Custom and default toolbar items

[Marco Giorgi]

I've discovered that is not possible to add a child element to the newly created node in the treegrid: you can only add a child element to an existing node with already child elements.

So I need to customize the add button in the toolbar but I want to mix the default standard buttons with the one created by me to manage the add.

I've used the following code in the options parameters:

                        toolbarSettings: {

                            showToolbar: true,

                            toolbarItems: [

                                ej.TreeGrid.ToolbarItems.Edit,

                                ej.TreeGrid.ToolbarItems.Delete,

                                ej.TreeGrid.ToolbarItems.Update,

                                ej.TreeGrid.ToolbarItems.Cancel,

                                ej.TreeGrid.ToolbarItems.ExpandAll,

                                ej.TreeGrid.ToolbarItems.CollapseAll,

                                ej.TreeGrid.ToolbarItems.Search

                            ],

                            customToolbarItems: [

                                { templateID: "#AddToTreeGrid", tooltipText: "Add a new item in the codebook" },

                                { text: "Add", tooltipText: "Add" }]

                        },

                        toolbarClick: function (args) {

                            if (args.itemName === "Add") {

                                //we can bind the custom actions here

                                console.log(args);

                            }

                        },

But the problem is that the button is added to the end. of the other buttons, on the extreme right.

Instead I'd like to have it as the first button, before the Edit button.

How can I do it?

(Or better, if you have a workaround to add childnodes to nodes with no child yet...)

[Jayakumar Duraisamy]

Hi Marco, 

Query1: I've discovered that is not possible to add a child element to the newly created node in the tree grid: you can only add a child element to an existing node with already child elements. 

Solution: 

Using editSettings.rowPosition we can add row on required position. We have prepared the sample with custom toolbar add item. Using “toolbarClick” event action, added record as child if parent having no child records using addRow method. 

Please find the code example below: 

toolbarClick: function (args) { 

    if (args.itemName == "CustomAdd") { 

        if (args.model.selectedItem) { 

            var selectedItem = $.extend(true, {}, args.model.selectedItem.item); 

            selectedItem.taskID = parseInt(selectedItem.taskID) + 1; 

            if (!args.model.selectedItem.hasChildRecords && ej.isNullOrUndefined(args.model.selectedItem.parentItem)) 

                this.addRow(selectedItem, ej.TreeGrid.RowPosition.Child); 

            else { 

                this.addRow(selectedItem, ej.TreeGrid.RowPosition.Top); 

            } 

        } 

        else { 

            this.addRow({ taskID: 40, taskName: "New Task 40", startDate: "2/20/2014", endDate: "2/25/2014" }); 

        } 

    } 

}, 

 

Query2: The problem is that the button is added to the end. of the other buttons, on the extreme right. Instead I'd like to have it as the first button, before the Edit button. 

Solution: Using create event we can rearrange the custom toolbar items before default toolbar items. 

Please find the code example below: 

  create: function (args) { 

                    var toolbar = $("#TreeGridContainer_toolbarItems"); 

                    //to append custom item as first toolbar element 

                    $(toolbar).append($(toolbar).children().get().reverse()); 

                } 

 

We have also prepared the sample based on this. Please find the sample from below location 

Sample: http://jsplayground.syncfusion.com/Sync_3wrmbzvp 

In Tree Grid we can also add records using context menu. Using custom context menu, we can add record in required position. Please find our documentation and online demo sample for further reference 

Reference: https://help.syncfusion.com/js/treegrid/context-menu#contextmenu-customization  

Demo: https://js.syncfusion.com/demos/web/#!/bootstrap/treegrid/contextmenu/customcontextmenu  

Note: We would like to inform you that TreeGrid component also available in our JS2 platforms. Please refer following demo link, 

https://ej2.syncfusion.com/demos/#/material/tree-grid/default.html  

Please let us know, if you need further assistance. 

Regards, 

Jayakumar D 

[Marco Giorgi]

That's exactly what I need! Many thanks for the support

[Jayakumar Duraisamy]

Hi Marco, 

Thanks for the update. 

We are happy to hear that your requirement has been achieved. 

Regards, 

Jayakumar D