Grid Options Template/Control/Widget

5 posts, 1 answers
  1. John
    John avatar
    5 posts
    Member since:
    Sep 2015

    Posted 08 Mar Link to this post

    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

     

     

  2. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2157 posts

    Posted 10 Mar Link to this post

    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
    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
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. John
    John avatar
    5 posts
    Member since:
    Sep 2015

    Posted 10 Mar in reply to Dimiter Madjarov Link to this post

    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))
        )

     

     

  5. John
    John avatar
    5 posts
    Member since:
    Sep 2015

    Posted 10 Mar in reply to John Link to this post

    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....}

     

     

     

     

  6. Answer
    Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2157 posts

    Posted 11 Mar Link to this post

    Hello John,

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

    Regards,
    Dimiter Madjarov
    Telerik
    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
Back to Top
UI for ASP.NET MVC is VS 2017 Ready