How to make bind and edit a foreign keys in tree grid

Question

Hi,Q1- How to make bind and edit a foreign keys in self reference tree grid ?Q2- How to make enable and disable specific field based on dropdown list value changed?I tried this code Index.cshtml@{ var DDL_TicketDeduction = new Syncfusion.EJ2.DropDowns.DropDownList() { DataSource = ViewBag.DeductionTypes, Query = "new ej.data.Query()", Fields = new Syncfusion.EJ2.DropDowns.DropDownListFieldSettings() { Value = "ID", Text = "DeductionName" } }; var DDL_DurationTypes = new Syncfusion.EJ2.DropDowns.DropDownList() { DataSource = ViewBag.ExcuseDurationTypes, Query = "new ej.data.Query()", Fields = new Syncfusion.EJ2.DropDowns.DropDownListFieldSettings() { Value = "ID", Text = "DurationName" } }; var DDL_MinEmpDurationType = new Syncfusion.EJ2.DropDowns.DropDownList() { DataSource = ViewBag.DurationTypes, Query = "new ej.data.Query()", Fields = new Syncfusion.EJ2.DropDowns.DropDownListFieldSettings() { Value = "Value", Text = "Text" } }; var DDL_ResetIntervals = new Syncfusion.EJ2.DropDowns.DropDownList() { DataSource = ViewBag.ResetIntervals, Query = "new ej.data.Query()", Change = "onChange", Fields = new Syncfusion.EJ2.DropDowns.DropDownListFieldSettings() { Value = "Value", Text = "Text" } };}

But there is an error " Uncaught TypeError: Cannot read property 'removeAttribute' of null "Q3- Why I Can not edit on the same code above ?In Controller public async Task Edit([FromBody] CRUDModel excuseConfigurationViewModel) { //Code }The error is "Uncaught TypeError: this.getColumnByIndex is not a function"Thanks very much.

Padmavathy Kamalanathan · Accepted Answer

Hi Ahmed, Thanks for the update. Query 1: If the field I want to be disable is a numeric field, it still counted up and down although it is disabled. We are able to reproduce the reported issue at our end. In order to resolve this issue, we suggest you to follow the below steps, In dropdown change event, take the instance of numeric text box Then set the “enabled” property of numeric text box to false to disable it based on the dropdown value Please check the below code snippet, Query 2: There is a JavaScript error When I want to edit row in my tree grid. The error is "Uncaught TypeError: this.getColumnByIndex is not a function" In order to resolve this issue, we suggest you to use the getColumnByIndex method of Grid from Tree Grid. Please check the below code snippet, Query 3: How to get the value of dropdown list when edit or adding a row in TreeGrid to check this value ? On editing/adding, while changing dropdown value, dropdown’s “change” event will be triggered. In that change event, we can access the value of dropdown from “args.value” as shown in the below code, (OR) You can also access the updated value of dropdown column in the “actionComplete” event with requestType “save” from “args.data.EmployeeID” (EmployeeID is the field name of dropdown column). Please check the below code, Please check the below API help documentations, https://ej2.syncfusion.com/documentation/api/numerictextbox/#enabled https://ej2.syncfusion.com/documentation/api/treegrid#actionbegin https://ej2.syncfusion.com/documentation/api/treegrid#actioncomplete Kindly get back to us for further assistance. Regards, Padmavathy Kamalanathan

Ahmed · Answer

Continuous for Q1In above Code I Can not View the Foreign Key text  , it views as an integer not a text .

Manivannan Padmanaban · Answer

Hi Ahmed,

Greetings from Syncfusion Support.

Query 1: How to make bind and edit a foreign keys in self-reference tree grid ? && I Cannot View the Foreign Key text

The self-referential data support has the foreign key relationship within them and also by using the EditType and Edit properties of TreeGrid Column, we can render Dropdownlist with external or foreign dataSource.

Using Fields property of Edit Property object foreignkey fields should be mapped and also we can show the foreign key text on initial rendering using QueryCellInfo event of Tree Grid. Refer to the below code example,

@{

var DDL_TicketDeduction = new Syncfusion.EJ2.DropDowns.DropDownList()

{

DataSource = ViewBag.DeductionTypes,

Query = "new ej.data.Query()",

Fields = new Syncfusion.EJ2.DropDowns.DropDownListFieldSettings()

{

Value = "TaskID",

Text = "DeductionName"

}

};

}

<ejs-treegrid ID="TreeGrid" queryCellInfo="OnQueryCellInfo" ….>

……………….

<e-treegrid-columns>

……………..

<e-treegrid-column field="TaskID" headerText="TaskID" width="180" isPrimaryKey="true" editType="dropdownedit"

edit="new {@params = DDL_TicketDeduction }"></e-treegrid-column>

……………………

</e-treegrid-columns>

</ejs-treegrid>

……………………………

var ForeignkeyData = @Html.Raw(Json.Serialize(ViewBag.DropData)) // get the ForeignkeyData here.

function OnQueryCellInfo(args) {

if (args.column.field == "TaskID") {

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

if (args.data.TaskID == ForeignkeyData[i].TaskID) {

args.cell.innerText = ForeignkeyData[i].DeductionName; // assign the foreignkey field value to the innertext

}

</script>

Query 2: How to make enable and disable specific field based on dropdown list value changed?

We have achieved your requirement, please refer to the below code example.

@{ var DDL_TicketDeduction = new Syncfusion.EJ2.DropDowns.DropDownList() { DataSource = ViewBag.DeductionTypes, Query = "new ej.data.Query()", Change = "onChange", Fields = new Syncfusion.EJ2.DropDowns.DropDownListFieldSettings() { Value = "TaskID", Text = "DeductionName" } };………………….. } <ejs-treegrid ID="TreeGrid" …………. <e-treegrid-columns>………………. <e-treegrid-column field="TaskID" headerText="TaskID" width="180" isPrimaryKey="true" editType="dropdownedit" edit="new {@params = DDL_TicketDeduction }"></e-treegrid-column> </e-treegrid-columns></ejs-treegrid>

function onChange(args) { // TreeGrid_gridcontrol followed by field name document.getElementById("TreeGrid_gridcontrolTaskID").setAttribute("disabled", true); // disable the editing}

Also like same you can remove the disabled attribute to enable the field.

Query 3: Why I Cannot edit on the same code above ?

We are quite unclear about this query. So, please get back to us with the below details which will help us to resolve the reported issue as early as possible.

Share issue in detail.
Share the complete stack trace of the error.
Screenshot Or video demonstration of the issue.

Regards,

Manivannan Padmanaban

Ahmed · Answer

Thank you for your answers,But 1- In the second question "How to make enable and disable specific field based on dropdown list value changed?"If the field I want to be disable is a numeric field, it still counted up and down although it is disabled. how I can fix this issue.2- In the third question " Why I Can not edit on the same code above ?" There is a JavaScript error When I want to edit row in my tree grid The error is "Uncaught TypeError: this.getColumnByIndex is not a function"and My Code Is:

In Controller: public async Task Edit([FromBody] CRUDModel excuseConfigurationViewModel) { //Code }

Ahmed · Answer

AndHow to get the value of dropdown list when edit or adding a row in  TreeGrid to check this value ?

Ahmed · Answer

Perfect,Thanks very much for your response

Padmavathy Kamalanathan · Answer

Hi Ahmed, 
 
We are happy to hear that you have achieved your requirement. 
 
Please get back to us if you need further assistance. 
 
Regards, 
Padmavathy Kamalanathan