Grid Options Template/Control/Widget

[John]

Hello,

I apologize for the hash of a question this is. I am looking for a way to save the development team some time in a site heavy with kendo grid use. For example we have a grid defined like this:

01.@(Html.Kendo().Grid(Model)
02.       .Name("grid")
03.       .Columns(columns =>
04.       {
05.           columns.Bound(e => e.StyleName).Filterable(ftb => ftb.Multi(true));
06.           columns.Bound(e => e.Collection).Filterable(ftb => ftb.Multi(true));
07.           columns.Bound(e => e.CommodityDesign).Filterable(ftb => ftb.Multi(true));
08.           columns.Bound(e => e.Decoration).Filterable(ftb => ftb.Multi(true));
09.           columns.Bound(e => e.StyleId).Filterable(ftb => ftb.Multi(true));
10.       })
11.       .HtmlAttributes(new { style = "width: 80%;" })
12.       .DataSource(data => data.Ajax().Model(mdl => mdl.Id(p => p.StyleId) ))
13.       .Scrollable()
14.       .Groupable()
15.       .Sortable()
16.       .Editable()
17.       .Filterable()
18.       .Selectable()
19.       .Pageable(pageable => pageable
20.           .Refresh(true)
21.           .PageSizes(true)
22.           .ButtonCount(5))
23.       )

The client has accepted this layout and now states they want every grid this way. We certainly could go through and manually crud every grid to match this pattern. I was just trying to think of a way we could use the above as a "template" leaving us just the relevant deltas to configure. For example this pseudo code below:

1.@(Html.CustomKendoGrid(Model)
2.    .DataSource(data => data.Ajax().Model(mdl => mdl.Id(p => p.NewProdId))))

TIA

JB

 

 

[Dimiter Madjarov]

Hello John,

Yes, you could define a custom helper that will automatically include some options to the Grid. The approach is demonstrated on the following documentation page.

Regards,
Dimiter Madjarov
Telerik

[John]

This is just what I was looking for but I am still missing one thing...how to I pass in the model for the grid (grid extension) to use?

My Extension:

public static GridBuilder<T> PIMSGrid<T>(this HtmlHelper helper) where T: class
{

   return helper.Kendo().Grid<T>()
          .Scrollable()
          .Groupable()
          .Sortable()
          .Editable()
          .Filterable()
          .Resizable(size => size.Columns(true))
          .Pageable(pageable => pageable
                    .Refresh(true)
                    .PageSizes(true)
                    .ButtonCount(5));
}

 

My Use:

@model List<TT.PIMS.WebApi.Models.DemoGridModel>

....snip.....

@(Html.PIMSGrid<TT.PIMS.WebApi.Models.DemoGridModel>().Name("grid")
.Columns(columns =>
{
columns.Bound(e => e.StyleShapeName).Filterable(ftb => ftb.Multi(true).Search(true));
columns.Bound(e => e.DoorCollection).Filterable(ftb => ftb.Multi(true).Search(true));
columns.Bound(e => e.CommodityGlassDesign).Filterable(ftb => ftb.Multi(true).Search(true));
columns.Bound(e => e.DecorativeGlassDesign).Filterable(ftb => ftb.Multi(true).Search(true));
columns.Bound(e => e.StyleNumber).Filterable(ftb => ftb.Multi(true).Search(true));
        })
.DataSource(data => data.Ajax().Model(mdl => mdl.Id(p => p.StyleNumber)))
.Selectable(selectable => selectable.Mode(GridSelectionMode.Multiple))
    )

 

 

[John]

I've tried this and it is working but is this the correct way to design it or is it working by dumb luck?

Extension:

public static GridBuilder<T> PIMSGrid<T>(this HtmlHelper helper, System.Collections.Generic.IEnumerable<T> data) where T: class
{
   ...snip....
}

 

Use:

@(Html.PIMSGrid<TT.PIMS.WebApi.Models.DemoGridModel>(Model).Name("grid")
       .Columns(columns =>
       { ...snip....}

 

 

 

 

[Dimiter Madjarov]

Hello John,

The provided code snippet is correct for passing a model to the custom helper.

Regards,
Dimiter Madjarov
Telerik