How to hide add command from tool bar In TreeGrid

[Ahmed]

Hi,

Q1- How to hide "Add" Command from tool bar In Tree Grid?

Q2- How to change row color based on specific value in specific column?

Thank you very much

[Jagadesh Ram Raajkumar]

Hi Ahmed, 

Greeting from Syncfusion Support. 

Query 1: How to hide the "Add" Command from the toolbar 

 

If you want to dynamically hide the add button, changing the value of the toolbar property with the instance of treegrid would change the items displayed in the toolbar. In the below code snippet we have added two buttons to hide/show the add button in the toolbar when clicked upon.

please refer to the below code snippet and sample,

Code snippet: 

<button onclick="hideadd()">Hide ADD Option</button> 

<button onclick="showadd()">Show ADD Option</button> 

 

<div> 

<ejs-treegrid id="TreeGrid" dataSource="@ViewBag.data" allowPaging="true" childMapping="Children" treeColumnIndex="1" toolbar="@(new List<string>() { "Add", "Delete", "Update", "Cancel" })"> 

   <e-treegrid-editsettings allowAdding="true" allowEditing="true" allowDeleting="true" newRowPosition="Below"></e-treegrid-editsettings> 

    <e-treegrid-columns> 

        <e-treegrid-column field="TaskId" isPrimaryKey="true" headerText="Task ID" textAlign="Right" width="90"></e-treegrid-column> 

        <e-treegrid-column field="TaskName" headerText="Task Name" width="180"></e-treegrid-column> 

        <e-treegrid-column field="StartDate" headerText=" Start Date" textAlign="Right"  

                format="yMd" type="date" width="90"></e-treegrid-column> 

        <e-treegrid-column field="Duration" headerText="Duration" textAlign="Right" width="80"></e-treegrid-column> 

    </e-treegrid-columns> 

</ejs-treegrid> 

</div> 

 

<script> 

    function hideadd(){ 

        var treeGridObj = document.getElementById("TreeGrid").ej2_instances[0]; 

        treeGridObj.toolbar = ['Delete', 'Update', 'Cancel'];  //hides the add button 

    } 

    function showadd(){ 

        var treeGridObj = document.getElementById("TreeGrid").ej2_instances[0]; 

        treeGridObj.toolbar = ['Add', 'Delete', 'Update', 'Cancel']; //shows the add button 

    } 

</script> 

Sample: https://www.syncfusion.com/downloads/support/forum/168123/ze/SyncfusionWebApplication11635420469 

 

Query 2: How to change row color based on a specific value in a specific column 

To customize a row color based on a condition you can use rowDataBound event since this event will be triggered before the row element is appended.  

Please refer to the below help documentation,

Documentation: https://ej2.syncfusion.com/aspnetcore/documentation/tree-grid/row/#customize-rows
API Documentation: https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.TreeGrid.TreeGrid.html#Syncfusion_EJ2_TreeGrid_TreeGrid_RowDataBound 

Regards,
Jagadesh Ram 

[Ahmed]

Thanks for your response ,

But 

I want to Hide "Add" Command from Tree Grid onload or when created .

For Example when I want to do that in Data Gird I did it by

 

var actions = @Html.Raw(Json.Serialize(ViewBag.currentActions))

        function beforeDataBound(args) {

        var data = this.toolbar.indexOf('Add');

        this.toolbarModule.toolbar.hideItem(data, true);

         data = this.toolbar.indexOf('Edit');

        this.toolbarModule.toolbar.hideItem(data, true);

         data = this.toolbar.indexOf('Delete');

        this.toolbarModule.toolbar.hideItem(data, true);

        for (var i = 0; i < actions.length; i++) {

            if ('Add'== actions[i].Type) {

                var data = this.toolbar.indexOf('Add');

                this.toolbarModule.toolbar.hideItem(data, false);

            }

            if ('Edit' == actions[i].Type) {

                var data = this.toolbar.indexOf('Edit');

                this.toolbarModule.toolbar.hideItem(data, false);

            }

            if ('Delete' == actions[i].Type) {

                var data = this.toolbar.indexOf('Delete');

                this.toolbarModule.toolbar.hideItem(data, false);

            }

        }

    }

But When I tried this method in Tree Grid, it failed.

Thanks Very much  

[Jagadesh Ram Raajkumar]

Hi Ahmed, 

Thanks for the update.

Query: How to use hideItem in treegrid. 

 

To access hideItem method of toolbar in tree grid, we suggest you use the below approach. In the below code example we have obtained the toolbar instance using the getToolbar method of tree grid and used the hideItem method of toolbar to hide the toolbar items. 

     function beforeDataBound(args) { 

 

        var data = this.toolbar.indexOf('Add'); 

 

        this.toolbarModule.getToolbar().ej2_instances[0].hideItem(data, true); 

 

         data = this.toolbar.indexOf('Edit'); 

 

        this.toolbarModule.getToolbar().ej2_instances[0].hideItem(data, true); 

 

         data = this.toolbar.indexOf('Delete'); 

 

        this.toolbarModule.getToolbar().ej2_instances[0].hideItem(data, true); 

 

        for (var i = 0; i < actions.length; i++) { 

 

            if ('Add'== actions[i].Type) { 

 

                var data = this.toolbar.indexOf('Add'); 

 

                this.toolbarModule.getToolbar().ej2_instances[0].hideItem(data, false); 

 

            } 

 

            if ('Edit' == actions[i].Type) { 

 

                var data = this.toolbar.indexOf('Edit'); 

 

                this.toolbarModule.getToolbar().ej2_instances[0].hideItem(data, false); 

 

            } 

 

            if ('Delete' == actions[i].Type) { 

 

                var data = this.toolbar.indexOf('Delete'); 

 

                this.toolbarModule.getToolbar().ej2_instances[0].hideItem(data, false); 

 

            } 

 

        } 

 

    } 

Regards,
Jagadesh Ram 

[Ahmed]

Perfect,

Thanks very much to your response

[Jagadesh Ram Raajkumar]

Hi Ahmed, 

Thanks for the update.  

Please get back to us if you need further assistance. 

Regards,
Jagadesh Ram