<script>
$("#TreeGridContainer").ejTreeGrid({
//...
columns: [
//...
{
field: 'custom', headerText: "Command Column",
commands: [
//...
{ type: "Add", buttonOptions: { text: "Add", click: addRow } },
]
}
],
queryCellInfo: function(args){
if (args.column.field == "custom") {
if(!args.data.hasChildRecords){
$(args.cellElement).find(".e-Addbutton").css({ 'display': 'none'});
}
}
}
})
function addRow(args){
var obj = $("#TreeGridContainer").ejTreeGrid("instance");
var index = obj.getIndexByRow(args.target.closest("tr"));
obj.selectRows(obj.getUpdatedRecords().indexOf(obj.model.currentViewData[index]));
var data = {};
obj.addRow(data, ej.TreeGrid.RowPosition.Child);
}
});
</script> |
Hi Xia,We can include custom buttons in command column to perform custom actions using the type property. By using queryCellInfo event of TreeGrid control, we can include the custom buttons only for the parent records. By using the addRow method, we can dynamically add the empty rows on custom button click action, using the click event of button control.Please find the below code example.
<script>$("#TreeGridContainer").ejTreeGrid({//...columns: [//...{field: 'custom', headerText: "Command Column",commands: [//...{ type: "Add", buttonOptions: { text: "Add", click: addRow } },]}],queryCellInfo: function(args){if (args.column.field == "custom") {if(!args.data.hasChildRecords){$(args.cellElement).find(".e-Addbutton").css({ 'display': 'none'});}}}})function addRow(args){var obj = $("#TreeGridContainer").ejTreeGrid("instance");var index = obj.getIndexByRow(args.target.closest("tr"));obj.selectRows(obj.getUpdatedRecords().indexOf(obj.model.currentViewData[index]));var data = {};obj.addRow(data, ej.TreeGrid.RowPosition.Child);}});</script>Please find the below sample link.Regards,Pooja Priya K.