Grid in panel, get data when expanded

[Joe]

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>

[Joe]

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