How to find/select the datasource of a child grid

9 posts, 1 answers
  1. erwin
    erwin avatar
    358 posts
    Member since:
    Dec 2006

    Posted 07 Dec 2012 Link to this post

    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
  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 11 Dec 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. erwin
    erwin avatar
    358 posts
    Member since:
    Dec 2006

    Posted 11 Dec 2012 Link to this post

    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
  5. Answer
    Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 13 Dec 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. erwin
    erwin avatar
    358 posts
    Member since:
    Dec 2006

    Posted 13 Dec 2012 Link to this post

    Thanks, Alexaner this does the trick.

    Regards
    Erwin
  7. Arnold
    Arnold avatar
    2 posts
    Member since:
    Mar 2016

    Posted 21 Mar in reply to Alexander Valchev Link to this post

    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
  8. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 23 Mar Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  9. Arnold
    Arnold avatar
    2 posts
    Member since:
    Mar 2016

    Posted 23 Mar in reply to Alexander Valchev Link to this post

    and how do I access that in the controller?
  10. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 24 Mar Link to this post

    Hi Arnold,

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

    Regards,
    Alexander Valchev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready