How can i always call a function on Master - Detail Kendo grid row expansion?

Question

I am using Master detail in Kendo Grid in AngularJS. Here is the setup of the code: In cshtml is:

        <script type="text/x-kendo-template" id="template">                                                  
                   <div>
                        <div class="orders"></div>
                   </div>                                                   
        </script>

In the AngularJS controller is

      The MasterRowId is the id of the Column in the Master row. So the Master grid is a grid with 
   columns Id and  name

    $scope.getorders = function (masterRowId)
    {           
        myservice.getorders(masterRowId)
            .then(function (result) {
                for (var j = 0; j < result.data.length; j++)
                    $scope.ordergroupdata.push(result.data[j]);                    
            });

    }

In the master grid definition i have ......

        detailTemplate: kendo.template($("#template").html()),
        detailInit: $scope.detailInit,

The definition of $scope.detailInit is

    $scope.detailInit = function (e)
    {
        $scope.MasterRowId = e.data.Id;                       
        $scope.getorders ($scope.MasterRowId); 

        var orderdata = $scope.ordergroupdata;
        var orderdatasource = new kendo.data.DataSource({                
            transport: {
                read: function (e) {
                    e.success(orderdata);
                },
                update: function (e) {
                    e.success();
                },
                create: function (e) {
                    var item = e.orderdata;
                    item.Id = orderdata.length + 1;
                    e.success(item);
                }
            },
            schema: {
                model: {
                    id: "Id",
                    fields: {
                        OrderId: { type: 'string'},                                                   
                    }
                }
            },                
        });
        e.detailRow.find(".orders").kendoGrid({
            dataSource: orderdatasource,                                      
            columns: [
                { field: "OrderId", title: "OrderId" },                         
            ]
        });
    }

The issue is that if i click on the first row , i can retrieve the data according to the MasterRowId from my MVC action method. So If i click on the first row and the MasterRowId is for example 10 , then i get an OrderId of "1234" . I can click on the second row with MasterRowID of 15 and it will retrieve the OrderId of "8231", BUT if i go back to the first row the data (OrderId) in the details grid is actually the data from the second row, so its "8321" NOT "1234". How can i always call the $scope.detailInit so that i can go back to the MVC Action method and always retrieve the correct data for that particular row with that MasterRowId ? Once i expand the row and move on to another row , the detailsInit doesnt get called any more for that row ?

dev_in_progress dev_in_progress · Accepted Answer · 2020-06-11T10:35:14

detailInit is only called on first expand, but you can use detailExpand that is called every time you expand the detail table.

Offical example:

<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" }
  ],
  dataSource: [
    { name: "Jane Doe", age: 30 },
    { name: "John Doe", age: 33 }
  ],
  detailTemplate: "<div>Name: #: name #</div><div>Age: #: age #</div>",
  detailExpand: function(e) {
    console.log(e.masterRow, e.detailRow);
  }
});
</script>

Docs: detailExpand

Official example: detailExpand example

How can i always call a function on Master - Detail Kendo grid row expansion?

1 Answers