This is a migrated thread and some comments may be shown as answers.

Define a custom Html.Kendo extension helper

11 Answers 1751 Views

Grid

This is a migrated thread and some comments may be shown as answers.

Eric asked on 22 Jan 2013, 12:42 AM

I would like to create a custom Html helper for a Kendo grid. We have a particular view-model combination which will be used across multiple controllers. I would like to be able to create a custom help method for display a grid of these models. It would basically be a short cut to use in all the views so we wouldn't have to maintain the same code in many different files. I would like to call it like this:

@Html.Kendo().ConfigruationGrid();

@* or *@

@Html.ConfigurationKendoGrid();

And have it output all the bells and whistles of a full grid declaration, like this:

@(Html.Kendo().Grid(@Model)

.Name("KnockoutQuestions")

.DataSource(datasource => datasource

.Ajax()

.Model(model =>

{

model.Id(k => k.Id);

model.Field(k => k.Id).Editable(false);

model.Field(k => k.Enabled).DefaultValue(true);

})

.Events(events => events.Error("Error"))

.Create(create => create.Action("Create", "KnockOutQuestion"))

.Read(read => read.Action("Read", "KnockOutQuestion"))

.Update(update => update.Action("Update", "KnockOutQuestion"))

)

.Columns(columns => {

columns.ForeignKey(k => k.AdminLeadType,

new SelectList(from pair in BaseKnockOutQuestionModel.EnumLeadTypes select new { text = pair.Value, value = pair.Key },

"value", "text"));

columns.ForeignKey(k => k.QuestionTypeId,

new SelectList(from pair in BaseKnockOutQuestionModel.QuestionTypes select new { text = pair.Value, value = pair.Key },

"value", "text"));

columns.Bound(k => k.QuestionText);

columns.Bound(k => k.Answer1Text);

columns.Bound(k => k.Answer2Text);

columns.Bound(k => k.Price);

columns.Bound(k => k.Enabled);

columns.Command(command => command.Edit());

})

.ToolBar(toolbar => { toolbar.Create(); })

.Editable(editable => editable.Mode(GridEditMode.PopUp))

.Pageable()

.Sortable()

.Filterable()

)

I know how to do custom Html helper methods, but I haven't found any examples of how to do a shortcut like this. It's probably something simple like using the "this HtmlHelper helper" param to execute and return the output of the Kendo().Grid() function. I wanted to ask anyways so I could hopefully avoid common mistakes/pitfalls.

11 Answers, 1 is accepted

Accepted

answered on 23 Jan 2013, 02:08 PM

Hello Eric,

You can easily create and use a shortcut like this:

@helper MyGridShortCut()

{

Html.Kendo().Grid()

.Name("Grid")

.Columns(columns =>

{

/* ... */

})

/* ... */

.Render();

}

@MyGridShortCut()

If you need a custom HtmlHelper that can accept additional configuration options, then you should use the following approach:

C# Version
=========

Class

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

using Kendo.Mvc.UI;

namespace MyNamespace

{

public static class MyHtmlHelperExtensions

{

public static Kendo.Mvc.UI.Fluent.GridBuilder<T> MyGrid<T>(this HtmlHelper helper, string name)

where T : class

{

return helper.Kendo().Grid<T>()

.Name(name)

.Groupable()

.Pageable()

.Sortable()

.Scrollable()

.Filterable()

.Pageable();

}

View

@model IEnumerable<Kendo.Mvc.Examples.Models.ProductViewModel>

@using MyNamespace

@(Html.MyGrid<Kendo.Mvc.Examples.Models.ProductViewModel>("Grid1")

.BindTo(Model)

.Columns(columns =>

{

columns.Bound(p => p.ProductID).Groupable(false);

columns.Bound(p => p.ProductName);

columns.Bound(p => p.UnitPrice);

columns.Bound(p => p.UnitsInStock);

})

.DataSource(dataSource => dataSource

.Ajax()

.Read(read => read.Action("Products_Read", "Grid"))

)

VB version
=========

web.config

<add namespace="Kendo.Mvc.UI" />

<add namespace="MyProject.MyHtmlHelpers" />

Class

Imports System

Imports System.Collections.Generic

Imports System.Linq

Imports System.Web

Imports System.Web.Mvc

Imports Kendo.Mvc.UI

Imports System.Runtime.CompilerServices

Namespace MyHtmlHelpers

Public Module HtmlHelperExtensions

<Extension()> _

Public Function MyGrid(Of T As Class)(

ByVal helper As HtmlHelper, _

ByVal name As String) As Kendo.Mvc.UI.Fluent.GridBuilder(Of T)

Return helper.Kendo().Grid(Of T)().Name(name).Groupable().Pageable().Sortable().Scrollable().Filterable()

End Function

End Module

End Namespace

View

@Code

Html.MyGrid(Of KendoUIMvcVB.Person)("Grid1") _

.Columns(Sub(c)

c.Bound(Function(p) p.PersonID)

c.Bound(Function(p) p.PersonName)

c.Bound(Function(p) p.PersonBirthDate)

c.Template(Sub()

@<text>server template</text>

End Sub).Title("Template column").ClientTemplate("client template")

End Sub) _

.DataSource(Function(d)

d.Ajax().Read(Function(read) read.Action("Person_Read", "Home"))

End Function) _

.Render()

End Code

Regards,
Dimo
the Telerik team

Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

answered on 23 Jan 2013, 02:08 PM

This was easier than I anticipated. You just make a regular helper method signature and return the regular Kendo HtmlHelper extension method. Like this:

public static IHtmlString CustomKendoGrid(this HtmlHelper htmlHelper,

IEnumerable<Model> models,

String gridName,

String otherOptions

)

{

return htmlHelper.Kendo().Grid(properties)

.Name(gridName)

// more options here

;

}

Then you invoke it like a normal html helper method

@(Html.ConfigurationKendoGrid(

(IEnumerable<ConfigPropertyModel>)ViewData["reportBack"],

"ReportBack",

"LccConfig"))

And viola!

answered on 03 Feb 2014, 08:06 AM

Hi Menahem,

You don't need a template to add multiple buttons to the Grid toolbar. You can use the syntax, which is demonstrated in our demos, e.g.

http://demos.telerik.com/kendo-ui/web/grid/editing.html

Custom buttons require you to attach an event handler to make them work:

.ToolBar(toolBar =>

{

toolBar.Create();

toolBar.Save();

toolBar.Custom().Name("myname").Text("mytext");

})

$(".k-grid-myname").click(function(e){

// do someting...

});

When using templates, you see several overloads in Visual Studio:

+ string - can be used in both the Razor and WebForms view engines
+ Action - () => { ... } - can be used in WebForms only
+ Func - @<text>...</text> - can be used in Razor only

I hope this makes things clear.

Regards,
Dimo
Telerik

Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Define a custom Html.Kendo extension helper

11 Answers, 1 is accepted