How to find/select the datasource of a child grid

[erwin]

Hello,

Scenario: I have a custom command button on the toolbar of a child grid (created with detailInit()).
The onClick handler of my custom command button should also refresh the datasource of the child grid (only).

Being a newbie with kendo and jquery, I have not yet found out how to select the child grid and get it's datasource.
For the main grid it's simple because you have a unique identifier, but how for the child grid that's dynamically created vi detailInit()?

Thanks for your help.
Erwin

[Alexander Valchev]

Hello Erwin,

You can select the custom button by its class and hook up to the click event using the jQuery on method.
In the event handler method you can find the corresponding grid by searching for closest (to the target) element with class .k-grid.

To refresh the grid you should call the read method of it's DataSource. As an example:

$("#grid").on("click", ".btn-refresh", function(e) {
    var childGrid = $(e.target).closest(".k-grid").data("kendoGrid");
    childGrid.dataSource.read();
});

For convenience I prepared a small demo.

Kind regards,
Alexander Valchev
the Telerik team

[erwin]

Thanks Alexander,

in my scenario it's a bit more complicated since my button click event handler first opens a Kendo Window with a Kendo async Upload Control on it. The Refresh of the child grid should take place in the success handler of the upload. So I assume I have to pass some sort of ID to the window and the upload that allows me to find the right child grid again afterwards.

Regards
Erwin

[Alexander Valchev]

Hello Erwin,

In such case I suggest you to define a unique ID for child grids. The detailInit event data includes information about the parent dataItem and master row.
As an example - using the ID:

function detailInit(e) {
    $('<div id="childGrid' + e.data.EmployeeID + '"></div>')
      .appendTo(e.detailCell).kendoGrid({
        dataSource: {
            //...
        },
        toolbar: [{text: "Refresh", className: "btn-refresh"}],
        columns: [
            //...
        ]
    });
}

In this way you would be able to select the grid by ID.

Kind regards,
Alexander Valchev
the Telerik team

[erwin]

Thanks, Alexaner this does the trick.

Regards
Erwin

[Arnold]

is there an angular version of this?

I need to set the datasource of the childgrid after clicking the expand button of the parentgrid detail-template

[Alexander Valchev]

Hi Arnold,

Try the following approach:

<kendo-grid options="mainGridOptions">
    <div k-detail-template>
       <div kendo-grid k-scope-field={{dataItem.uniqueGridID}} k-options="detailGridOptions(dataItem)"></div>
    </div>
</kendo-grid>

Regards,
Alexander Valchev
Telerik

 

 

[Arnold]

and how do I access that in the controller?

[Alexander Valchev]

Hi Arnold,

I apologise for not being clear. This help topic explains how to use widget references in Angular controller.

• http://docs.telerik.com/kendo-ui/AngularJS/introduction#widget-references

Regards,
Alexander Valchev
Telerik