Grid in panel, get data when expanded

2 posts, 0 answers
  1. Joe
    Joe avatar
    66 posts
    Member since:
    May 2012

    Posted 29 Dec 2015 Link to this post

    I have a kendo grid in a kendo PanelBar (actually, I have a few kendo grids in a few kendo panelbars in the same page), and to eliminate a long load time, I don;t want to actually retrieve the grids data until the specific PanelBar get's expanded.  I figured out the Expand event, but how do I configure my Grid to get the data based on that event?

     

    <ul id="panelbar">
        <li id="item1">
            <b>Names</b>
            <div id="SampleNamesGrid"></div>
     
            @(Html.Kendo().Grid<SampleName>().Name("SampleNamesGrid")
                  .TableHtmlAttributes(new {@class = "table-condensed"})
                  .Columns(c =>
                  {
                      c.Bound(sn => sn.ID);
                      c.Bound(sn => sn.FirstName);
                      c.Bound(sn => sn.LastName);
                  })
                  .DataSource(d => d
                      .Ajax()
                      .Read(r => r.Action("GetNames", "SampleNames").Type(HttpVerbs.Get))
                      .PageSize(20)
                  )
                  .Pageable()
                  .Filterable()
                  .Sortable())
        </li>
    </ul>
     
    <script>
        $("#panelbar").kendoPanelBar({
            expand: Expand
        });
     
        function Expand(e) {
            alert("open");
        }
    </script>
  2. Joe
    Joe avatar
    66 posts
    Member since:
    May 2012

    Posted 30 Dec 2015 Link to this post

    I figured it out, but only for the MVC wrapper of the Grid oddly enough.  SInce it's available in the MVC grid, I assume it's available via the Javascript grid as well, but I've had some difficulties in switching between the two because of the server side paging, sorting, etc...

     

    Anyways, if anyone else needs the answer, it's quite simple really.  In the MVC Grid, add the.AutoBind(false) property, then in the event you want to use to trigger the get, just call the grid's dataSource read() event.

    The Grid:
    @(Html.Kendo().Grid<SampleName>().Name("SampleNamesGrid")
        .TableHtmlAttributes(new { @class = "table-condensed" })
        .Columns(c =>
        {
            c.Bound(sn => sn.ID);
            c.Bound(sn => sn.FirstName);
            c.Bound(sn => sn.LastName);
        })
        .DataSource(d => d
            .Ajax()
            .Read(r => r.Action("GetNames", "SampleNames").Type(HttpVerbs.Get))
            .PageSize(20)
        )
        .AutoBind(false)
        .Pageable()
        .Filterable()
        .Sortable())
     
    The Read:
    function DoExpand(e) {
        $("#SampleNamesGrid").data("kendoGrid").dataSource.read();
    }

  3. UI for ASP.NET MVC is VS 2017 Ready
Back to Top