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

Define a custom Html.Kendo extension helper

11 Answers 1025 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Eric
Top achievements
Rank 1
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

Sort by
0
Accepted
Dimo
Telerik team
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!
 
0
Eric
Top achievements
Rank 1
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!
0
Eric
Top achievements
Rank 1
answered on 23 Jan 2013, 02:10 PM
I can't believe I double posted with Dimo... I will try out the options splitting capability you provided. I can anticipate at least one situation where that would be very useful.

Thanks!
0
menaheme
Top achievements
Rank 1
answered on 29 Jan 2014, 02:27 PM
Hi Dimo,

I found this post very helpful, though i have a question:
how do i pass an array of buttons to be rendered in the grid`s toolbar? 

when i use the regular fluent html helper directly in the view it`s simple, but i cant get it to work in the grid Html helper that you show here.

Thanks,
Menahem
0
Dimo
Telerik team
answered on 31 Jan 2014, 11:02 AM
Hi Menahem,

The Toolbar() configuration syntax should be the same in the regular Kendo UI Grid and your custom Helper. What exactly seems to be the problem? Can you show your code?

Regards,
Dimo
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
menaheme
Top achievements
Rank 1
answered on 02 Feb 2014, 10:20 AM
Hi Dimo,
i used the overload that takes 'Action' , and no buttons got rendered. 
now im using the overload that takes string, and do something like this
StringBuilder.Append(helper.xxx.ToHtmlString())
to build the output.
this works, but i would like to not use this method.

my code that didnt work look something like:
...Template.( () => { helper.ButtonHelper.RenderButton(operation); } 
  •  in Telerik`s samples of toolbar templates in razor views there`s always a @<text> tag there, and i get the feeling this is the missing link for me.

    Thanks,
    Menahem


0
Dimo
Telerik team
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!
0
menaheme
Top achievements
Rank 1
answered on 03 Feb 2014, 08:49 AM
Hi Dimo,

your answer really cleares things up for me , thank you.

in my case i am also rendering other kendo ui widgets to the toolbar , like kendo buttons , dropdowns and so on.

is there another way to do that other than a template ?
Menahem
0
Dimo
Telerik team
answered on 03 Feb 2014, 08:54 AM
Hello Menahem,

No, there isn't. A template is the most flexible way, which allows you to insert any content.

http://docs.telerik.com/kendo-ui/getting-started/using-kendo-with/aspnet-mvc/fundamentals#client-templates

Regards,
Dimo
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Shoeb
Top achievements
Rank 1
answered on 09 Aug 2016, 09:25 PM

Can you please help me for below question.

How to create custom strongly typed  helper method for kendo DatePicker?

Thanks,

Shoeb.

 

0
Dimo
Telerik team
answered on 10 Aug 2016, 05:48 AM
Hello Shoeb,

Please check the second code snippet in the second post in this thread:

http://www.telerik.com/forums/define-a-custom-html-kendo-extension-helper#XL7GVFpsXU2CcCIxxKHNBg

Regards,
Dimo
Telerik by Progress
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Tags
Grid
Asked by
Eric
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Eric
Top achievements
Rank 1
menaheme
Top achievements
Rank 1
Shoeb
Top achievements
Rank 1
Share this question
or