Is there a way to declare a databound function for kendo grid inside an another grid?

[Omer Faruk]

I want to resize my grid that inside another grid. These grids are hierarchical. I wrote something for that but this works for second click. The processes I mentioned are seen in the pictures (firstclick, secondclick). the red circle shows extand button.

 

The js code block I wrote for solution but it does not work properly:

 

// The code inside the databound function of master grid
    $("#SiparisListeleGrid td a.k-icon").click(function () { // onclick for a element that opens second grid inside the row
        if ($(this).hasClass("k-i-expand")) { // if the grid is expand

            // uid of tr element
            var tr_UID = $(this).parents("tr").data("uid");

            // master grid
            var ustGrid = $("#SiparisListeleGrid").data("kendoGrid");

            $(ustGrid.dataSource.data()).each(function (i, item) {
                if (item.uid == tr_UID) {
                    var altGrid = $("#Grid_SiparisSatir_" + item.SipUstID).data("kendoGrid");
                    var rowCount = altGrid.dataSource.view().length;

                    $("#Grid_SiparisSatir_" + item.SipUstID).attr("style", "height:" + (rowCount * 40 + 125) + "px;");

                    $("#Grid_SiparisSatir_" + item.SipUstID + " .k-grid-content").css("height", (rowCount * 40));

                    $("#Grid_SiparisSatir_" + item.SipUstID + " .k-grid-content-locked").css("height", (rowCount * 40));
                }
            });
        }
    });
    // This code block only works on second clicking the expan button.
    // Does not recognize the second grid when clicked for the firs time
    // Should I use databound for second grid? However I do not know how can I do that.

[Georgi Denchev]

Hello, Omer Faruk,

If I understand correctly, you wish to bind the dataBound event to the child grids as well. The following approach can be used to achieve this behavior:

// master grid
$("#grid").kendoGrid({
                detailInit: detailInit,
                dataBound: function() {
                    this.expandRow(this.tbody.find("tr.k-master-row").first());
                },
...other configs...
            });

// child grid
        function detailInit(e) {
            $("<div/>").appendTo(e.detailCell).kendoGrid({
                // Databound inside child grid
                dataBound: function() {
                    // This code will execute when the child grid(expanded grid) has fully loaded.
                },
            });

In the snippet above, both the child and master grids have their own dataBound events. There is no need to get access to the rows through the parent's dataBound event, you can do it directly in the child.

Dojo

https://dojo.telerik.com/@gdenchev/ecIXeqiX 

You'll see alerts when you first load the Grid and whenever an expanded Grid loads.

Best Regards,
Georgi Denchev
Progress Telerik

[Omer Faruk]

Thanks for the information. It worked fine.