$("#TreeGridContainer").ejTreeGrid({
selectionSettings: {
selectionType: ej.TreeGrid.SelectionType.Checkbox,
selectionMode: ej.TreeGrid.SelectionMode.Row,
enableSelectAll: true,
enableHierarchySelection: true
},
contextMenuSettings: {
showContextMenu: true
},
contextMenuOpen: function (args) {
args.contextMenuItems.push({
headerText: "Selected Rows",
menuId: "selectedrows",
eventHandler: function (args) {
alert("Number of rows selected " + args.model.selectedItems.length)
}
})
},
}) |
<script type="text/javascript">
$("#TreeGridContainer").ejTreeGrid({
create: create,
collapsed: collapsed,
expanded: expanded,
rowSelected: rowSelected,
actionComplete: actionComplete
//…
})
function create(args) {
//To update the height of TreeGrid during load time
updateTreeHeight();
}
function collapsed(args) {
//To update the height of TreeGrid during collapse action
updateTreeHeight();
}
function expanded(args) {
//To update the height of TreeGrid during expand action
updateTreeHeight();
}
function rowSelected(args) {
//To update the height of TreeGrid while adding any row
updateTreeHeight();
}
function actionComplete(args) {
//To update the height of TreeGrid while saving the newly added row and deleting the existing row
if (args.requestType == "addNewRow" || args.requestType == "delete") {
updateTreeHeight();
}
}
function updateTreeHeight() {
var tree = $("#TreeGridContainer").ejTreeGrid("instance"),
toolbar = $("#TreeGridContainer_toolbarItems").height(),
model = tree.model,
totalLen = tree.getExpandedRecords(model.updatedRecords);
//To calculate the height of TreeGrid as per records count
var height = model.rowHeight * totalLen.length + tree.getHeaderContent().height() + toolbar + 4;
//Update height using setModel
var sizesettings = { height: height.toString() };
tree.setModel({ "sizeSettings": sizesettings });
}
</script> |