1. Home
  2. Forum
  3. jQuery
  4. Custom and default toolbar items

Custom and default toolbar items

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...)


3 Replies
JD Jayakumar Duraisamy Syncfusion Team February 13, 2019 07:24 AM UTC

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 
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 
Note: We would like to inform you that TreeGrid component also available in our JS2 platforms. Please refer following demo link, 
Please let us know, if you need further assistance. 
Regards, 
Jayakumar D 


MG Marco Giorgi February 13, 2019 08:35 AM UTC

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

JD Jayakumar Duraisamy Syncfusion Team February 13, 2019 10:32 AM UTC

Hi Marco, 
Thanks for the update. 
We are happy to hear that your requirement has been achieved. 
Regards, 
Jayakumar D 


Loader.
Up arrow icon