We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback
Essential JS2

Syncfusion jQuery based widgets are no longer in active development. Switch to our pure JavaScript based next generation Essential JS 2 library.

Try Essential JS 2

Custom and default toolbar items

Thread ID:

Created:

Updated:

Platform:

Replies:

142613 Feb 12,2019 12:12 PM UTC Feb 13,2019 10:32 AM UTC jQuery 3
loading
Tags: ejTreeGrid
Marco Giorgi
Asked On February 12, 2019 12:12 PM UTC

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 [Syncfusion]
Replied On 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 


Marco Giorgi
Replied On February 13, 2019 08:35 AM UTC

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

Jayakumar Duraisamy [Syncfusion]
Replied On 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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon