Category / Section
How to add a custom button in command column
1 min read
The command columns in tree grid is used to perform CRUD actions with the default command column buttons. It is also possible to add the custom buttons to the command column for performing custom actions, using the type property.
In the below code snippet, you can see that a custom Syncfusion button is added to the command column and the button click action is handled to alert the record details by using the click client-side event of Syncfusion button control.
<script type="text/javascript">
$(function () {
$("#TreeGridContainer").ejTreeGrid({
columns: [{
headerText: "Details",
commands: [
{ type: "details", buttonOptions: { text: "Details", click: "onClick" } }]
}]
//..
});
});
function onClick(args) {
var $tr = $(args.e.target).closest('tr'),
treeObj = $("#TreeGridContainer").data("ejTreeGrid"),
rowIndex = treeObj.getIndexByRow($tr),
record = treeObj.model.currentViewData[rowIndex];
alert("Task Name: " + record.item.taskName);
}
</script>
You can find a simple sample on how to add a custom button in tree grid command column here.
