Load items in dropDown Edit type in a TreeGrid and custom delete fialog.

[César Alejandro Guerrero Nava]

Hi Syncfusion workers, My name is Cesar Guerrero and I From Mexico. The purpose of this post is two questions about the TreeGrid:

1.- In the next link: 

https://www.syncfusion.com/kb/7920/how-to-set-dropdown-edit-type-for-the-treegrid-column

You explain how to load data to a DropDownEdit Form from a TreeGrid, but in spite of I can´t load the options. When I use your method, My TreeGrid don´t load anything, the DataTable is empty. I use breakpoints to follow the code and everything is okay, but the grid don´t show the information of the DataBase. But, if I quit the dropDownEditForm option in the Treegrid, load perfectly.

Why I am doing wrong? I exhausted options.

2.- In the next link:

https://www.syncfusion.com/kb/8347/how-to-customize-the-text-in-delete-confirmation-dialog

You explain how to customize the text in the delete confirmation dialog. I want to customize the text when y press th Supr Key. When I press Supr Key, the dialog appears. I try to  change the text of the title and the buttons by jquery...but doesn´t work.  Can you help me to change the text of the title and buttons by jquery?

Those are my questions, please help me.

Thank You very much, have a nice day.   

[John Rajaram]

Hi Cesar, 

Greetings from Syncfusion. 

Please find the following response. 

Query 1: You explain how to load data to a DropDownEdit Form from a TreeGrid, but in spite of I can´t load the options. When I use your method, My TreeGrid don´t load anything, the DataTable is empty 

Answer: We have analyzed your reported issue and we have suspect that dropdown data source property is mismatch with the dropdown field values. The default value of dropdown field of text as text and value as value. So, we need to provide same naming for dropdown data like text and value. Otherwise, we need to change default dropdown field name as similar to data source property names.  

Please refer following code snippet, 

protected void Page_Load(object sender, EventArgs e) 

        { 

            var DataSource = this.GetDataSource(); 

            this.TreeGridControlDefault.DataSource = DataSource; 

            this.TreeGridControlDefault.DataBind();       

            var resource = this.TreeGridControlDefault.Columns.FindIndex(col => col.Field == "Resource"); 

            this.TreeGridControlDefault.Columns.ElementAt(resource).DropDownEditOptions = new DropDownListProperties() { DropDownListFields = new DropDownListFields() { Text = "role", Value = "credit" } }; 

            this.TreeGridControlDefault.Columns.ElementAt(resource).DropDownData = this.GetResources();                

        } 

 

public List<Resource> GetResources() 

        { 

            List<Resource> ResourceCollection = new List<Resource>(); 

            ResourceCollection.Add(new Resource() { id = 1, role = "Project Manager", credit = "1" }); 

            ResourceCollection.Add(new Resource() { id = 2, role = "Software Analyst", credit = "2" }); 

            ResourceCollection.Add(new Resource() { id = 3, role = "Developer", credit = "3" }); 

            ResourceCollection.Add(new Resource() { id = 4, role = "Testing Engineer", credit = "4" }); 

            return ResourceCollection; 

        }    

 

If the given solution doesn’t resolve your problem, please revert us by modified the sample to replicate the issue. 

 

Query 2: You explain how to customize the text in the delete confirmation dialog. I want to customize the text when y press th Supr Key. When I press Supr Key, the dialog appears. I try to change the text of the title and the buttons by jquery...but doesn´t work. 

Answer: In TreeGrid delete confirmation dialog have localization text support. Hence, we can change the localization text to customize the title and button name. 

Please refer following code snippet, 

<ej:TreeGrid runat="server" Locale="es-ES" 

//..> 

/ej:TreeGrid> 

         <asp:ScriptManager ID="ScriptManager" runat="server" EnablePageMethods="true"></asp:ScriptManager>   

         <script> 

             ej.TreeGrid.Locale["es-ES"] = { 

                 deleteRecordText: "¿Está seguro de que desea eliminar el registro?", 

                 okButtonText: "DE ACUERDO", 

                 cancelButtonText: "Cancelar", 

             }; 

         </script>    

 

We have also prepared a sample for both the queries for your reference. Please find the sample as below, 

Sample:  http://www.syncfusion.com/downloads/support/directtrac/general/ze/TreeGrid_ASP-1515858247  

Please let us know, if you need any assistance on this. 

Regards, 

John R 

[César Alejandro Guerrero Nava]

Thank you so much, it works.

But now, I have another question:

When I click a row in the TreeGrid, the color change for a dark blue.

How I can change the color of this CSS? and How can I change the color when the cursor is hover of the row ?

Thank you for you attention, have a nice day.

[John Rajaram]

Hi Cesar, 

Thank you for the update. 

Please find the response below. 

Query 1: When I click a row in the TreeGrid, the color change for a dark blue.How I can change the color of this CSS? 

Answer: To customize the TreeGrid row selection color, we need to override the “e-selectionbackground” CSS class.  

Please refer following code snippet, 

<style> 

        .e-treegrid .e-selectionbackground{ 

            background: green; 

        } 

    </style> 

Query 2: How can I change the color when the cursor is hover of the row ? 

Answer: To enable TreeGrid cursor hover support, we need to override the background-color CSS property in “e-treegridrows:hover” class. 

<style> 

        tr.e-treegridrows:hover{ 

            background-color: lightgreen; 

        } 

    </style> 

We have also prepared a sample for your reference. Please find the sample as below, 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/TreeGrid_ASP-1027338596  

Please let us know, if you need any other assistance on this. 

Regards, 

John R