This is a migrated thread and some comments may be shown as answers.

Grid in panel, get data when expanded

1 Answer 202 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Joe
Top achievements
Rank 1
Joe asked on 29 Dec 2015, 08:04 PM

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>

1 Answer, 1 is accepted

Sort by
0
Joe
Top achievements
Rank 1
answered on 30 Dec 2015, 04:01 PM

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();
}

Tags
Grid
Asked by
Joe
Top achievements
Rank 1
Answers by
Joe
Top achievements
Rank 1
Share this question
or