Grid extension method

[Robert Madrian]

Hello,

I want to create a helper method that wraps a Kendo UI widget as described here:
http://docs.telerik.com/kendo-ui/aspnet-mvc/helpers/grid/faq#how-to-create-helper-methods-rendering-predefined-widgets-i-can-further-configure

using Kendo.Mvc.UI;
using Kendo.Mvc.UI.Fluent;
using Microsoft.AspNetCore.Mvc.ViewFeatures;

namespace Gpdb.Helpers

{
    public static class HtmlHelperExtensions

    {
        public static GridBuilder<T> MyKendoGrid<T>(this HtmlHelper helper, string name)
            where T : class
        {
            return helper.Kendo().Grid<T>()
                .Name(name)
                .Groupable()
                .Pageable()
                .Sortable()
                .Scrollable()
                .Filterable()
                .Pageable();
        }
    }
}

but this doesn't work because of the following error (see attached Picture) - what I'm missing?

[Robert Madrian]

public static GridBuilder<T> MyKendoGrid<T>(this HtmlHelper<T> helper, string name)
            where T : class
        {
            return helper.Kendo().Grid<T>()
                .Name(name)
                .Groupable()
                .Pageable()
                .Sortable()
                .Scrollable()
                .Filterable()
                .Pageable();
        }

found the solution:

 

[Robert Madrian]

found the error:

 

public static GridBuilder<T> MyKendoGrid<T>(this HtmlHelper<T> helper, string name) where T : class { return helper.Kendo().Grid<T>() .Name(name) .Groupable() .Pageable() .Sortable() .Scrollable() .Filterable() .Pageable(); }

[Robert Madrian]

Sorry not the solution - now I have the Problem in the Razor View (see Picture)

robert

 

[Danail Vasilev]

Hi Robert ,

You can use the GridBuilder type instead of  HtmlHelper. For example:

C#:

public static GridBuilder<T> MyKendoGrid<T>(this GridBuilder<T> helper, string name)
    where T : class
{
    return helper
        .Name(name)
        .Groupable()
        .Pageable()
        .Sortable()
        .Scrollable()
        .Filterable()
        .Pageable();
}

cshtml:

@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.OrderViewModel>()
        .MyKendoGrid("myGrid")
        .Columns(columns =>
        {
            columns.Bound(p => p.OrderID).Filterable(ftb => ftb.Cell(cell => cell.ShowOperators(false))).Width(225);
            columns.Bound(p => p.ShipName).Width(500).Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")));
        })
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(20)
        .ServerOperation(true)
        .Read(read => read.Action("Orders_Read", "Grid"))
     ))

Regards,
Danail Vasilev
Telerik by Progress

[Robert Madrian]

Hi Danail,

if I use your approach I cannot use JQuery to access the Grid like that: $("#grid").data("kendoGrid").dataSource.page(1); it will not found...

another solution might be to use IHtmlHelper<dynamic> so I can use @(Html.MyKendoGrid...

public static GridBuilder<TModel> MyKendoGrid<TModel>(this IHtmlHelper<dynamic> helper)
            where TModel : class

[Danail Vasilev]

Hi Robert,

I am glad you have managed to find a solution. 

Let us know if you need any assistance with our products.

Regards,
Danail Vasilev
Telerik by Progress