Wrap and reuse grid markup

3 posts, 0 answers
  1. Claus
    Claus avatar
    8 posts
    Member since:
    Jun 2009

    Posted 18 Aug 2017 Link to this post

    Hi gurus

    I have a solution where I would like to have the same grid on multiple pages. But with "same" I mean that the underlying model, behavior, paging etc. is the same but different columns has to be visible on every use.

    Is there an elegant way to wrap the same code in a helper class to avoid having to replicate the entire markup multiple times where the only difference will be a couple of "hidden(true)" and "hidden(false)"?

    Thanks in advance

     

    Claus

     

  2.
  3. Georgi
    Admin
    Georgi avatar
    695 posts

    Posted 22 Aug 2017 Link to this post

    Hi Claus,

    Possible solution is to create an extension method for HtmlHelper which returns grid which has all necessary configurations except for columns.

    e.g.

    public static GridBuilder<T> MyGrid<T>(this HtmlHelper helper, string name) where T : class, IModel
    {
        return helper.Kendo().Grid<T>()
               .Name(name)
    .HtmlAttributes(new { style = "height: 550px;" })
    .Scrollable()
    .Groupable()
    .Sortable()
    .Filterable(x => x.Mode(GridFilterMode.Row))
    .Editable()
    .Pageable(pageable => pageable
        .Refresh(true)
        .PageSizes(true)
        .ButtonCount(5))
    .DataSource(dataSource => dataSource
        .Ajax()
        .Read(read => read.Action("GetStudents", "Home"))
       .Update(x => x.Action("EditStudents", "Home"))
        .PageSize(20)
        .Model(x => x.Id(y => y.Id))
    );
    }

    Then create the grid as shown in the code block below:

    @(Html.MyGrid<Student>("names-grid").Columns(columns =>
    {
        columns.Bound(x => x.FirstName);
        columns.Bound(x => x.LastName);
        columns.Command(x => x.Edit());
    }))


    I have assembled small sample (reuse-grid.zip) which illustrates the aforementioned approach.


    Regards,
    Georgi
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. Claus
    Claus avatar
    8 posts
    Member since:
    Jun 2009

    Posted 22 Aug 2017 in reply to Georgi Link to this post

    That's a brilliant approach!

     

    Thanks a million :-)

Back to Top