How to add custom context menu items in TreeGrid

<div id="TreeGridContainer" style="height:400px;width:100%"></div>   
<script type="text/javascript">
$(function () {
            $("#TreeGridContainer").ejTreeGrid({
                //...
                dataSource: projectData,
                contextMenuSettings: {
                    showContextMenu: true,
                    contextMenuItems: ["add", "edit", "delete"]
                },
                contextMenuOpen: contextMenuOpen,
          })
        }); 
function contextMenuOpen(args) {
            //To add the custom context menu item in Treegrid
            var isExpandable = true, isCollapsable = true, data;
            data = args.item;
            if (data && data.hasChildRecords) {
                if (data.expanded)
                    isExpandable = false;
                else
                    isCollapsable = false;
            } else {
                isExpandable = false;
                isCollapsable = false;
            }
            var aboveMenu = args.contextMenuItems.filter(function (val) { return val.menuId == "Above" }),
              belowMenu = args.contextMenuItems.filter(function (val) { return val.menuId == "Below" });
            aboveMenu[0].iconClass = "e-aboveIcon";
            belowMenu[0].iconClass = "e-belowIcon";
            //To add the customized menu items in context menu
            var contextMenuItems = [{
                headerText: "Top",
                eventHandler: customMenuAddHandler,
                menuId: "Top",
                parentMenuId: "Add",
                iconClass: "e-topIcon"
 
            }, {
                headerText: "Bottom",
                menuId: "Bottom",
                parentMenuId: "Add",
                eventHandler: customMenuAddHandler,
                iconClass: "e-bottomIcon"
            },
            {
                headerText: "Child",
                menuId: "Child",
                parentMenuId: "Add",
                eventHandler: customMenuAddHandler,
                iconClass: "e-childIcon"
            },
             {
                 headerText: "Expand",
                 menuId: "Expand",
                 eventHandler: customMenuExpandCollapseHandler,
                 iconClass: "e-expandIcon",
                 disable: !isExpandable
             },
    {
                 headerText: "Collapse",
                 menuId: "Collapse",
                 eventHandler: customMenuExpandCollapseHandler,
                 iconClass: "e-collapseIcon",
                 disable: !isCollapsable
             }
            ];
           args.contextMenuItems.push.apply(args.contextMenuItems, contextMenuItems);
        }
        function customMenuAddHandler(args) {
            //To bind the action to the custom context menu items
            var currentMenuId = args.menuId,
                tempData = args.data && $.extend({}, args.data.item), rowPosition;
            if (currentMenuId == "Top") {
                rowPosition = ej.TreeGrid.RowPosition.Top;
            }
            else if (currentMenuId == "Bottom") {
                rowPosition = ej.TreeGrid.RowPosition.Bottom;
            }
            else if (currentMenuId == "Child") {
                rowPosition = ej.TreeGrid.RowPosition.Child;
            }
            this.addRow(tempData, rowPosition);
        }
        function customMenuExpandCollapseHandler(args) {
            var currentMenuId = args.menuId, expandCollapseArgs = {};
            expandCollapseArgs.data = args.data;
            if (currentMenuId === "Expand")
                expandCollapseArgs.expanded = true;
            else
                expandCollapseArgs.expanded = false;
            ej.TreeGrid.sendExpandCollapseRequest(this, expandCollapseArgs);
        }
</script>