add a row to a nested grid

[J]

Inside a main grid I have a nested detail grid and a button. How is it possible to add a row to the nested grid on a button click. My solution doesn't work: @scope.detailsGrid is undefined (which is predictable).

$scope.addRow = function () {
                   var grid = $scope.detailsGrid.data("kendoGrid");
                   grid.addRow();
                   return false;
               };

<kendo-grid k-scope-field="mainGrid" options="mainGridOptions">
   <div k-detail-template>
        <div kendo-grid k-scope-field="detailsGrid" k-options="detailGridOptions(dataItem)"></div>
         <button ng-click="addRow()" style="width:100px; height:30px;">Add row</button>
   </div>
</kendo-grid>

[Konstantin Dikov]

Hello,

It will not be possible to access the detail grid with such approach and you need to modify the code as shown below:

<button ng-click="addRow($event)"  ...

And the handler:

$scope.addRow = function (ev) {
    var grid = $(ev.currentTarget).parent().find(".k-grid").data("kendoGrid");
    grid.addRow();
    return false;

};

Please note that you will have to remove the filter that you have in order for the new item to be visible:

},
filter: { field: "Id", operator: "eq", value: dataItem.Id }  <- this should be removed

Hope this helps.


Regards,
Konstantin Dikov
Telerik by Progress

 

 

[J]

Thank you

[J]

Thank you