I want to know how to make another column react when modifying one column.

[TaeWook Kang]

When I select an item from the dropdown list in one cell, I want to bring the data in the DB through the controller and respond to the other cell.

However, if you refer to the source referenced below, an error occurs when the responding cell is sent to the controller.

(I will put the image below for your reference.)

May I know what the problem is?

Before leaving a question, I tried with the treegrid I chose as the next best option.

When using the tregrid, it seems impossible to make another cell react when I change one cell I want. Can I solve my problems by using tregrid?

//////Source of making grid using batch mode.

//html

columns="@(new List() {

new Syncfusion.EJ2.Grids.GridColumn { Field = "DTY" , HeaderText = "DTY" , Width = "60", DefaultValue = "", HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Center},

new Syncfusion.EJ2.Grids.GridColumn { Field = "STB" , HeaderText = "STB" , Width = "60", DefaultValue = "", HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Center},

new Syncfusion.EJ2.Grids.GridColumn { Field = "DUAL_FAN", HeaderText = "DUAL FAN", Width = "60", DefaultValue = "", HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, Edit = new { create="DualFan_Create", read="DualFan_Read", destory="DualFan_Destory", write="DualFan_Write" } }})">

columns="@(new List() {

new Syncfusion.EJ2.Grids.GridColumn { Field = "SC_AIR_FLOW_RATE" , HeaderText = "AIR FLOW RATE" , Width = "80", DefaultValue = "", HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right},

new Syncfusion.EJ2.Grids.GridColumn { Field = "SC_COOLING_CAPA" , HeaderText = "COOLING CAPA" , Width = "80", DefaultValue = "", HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right},

new Syncfusion.EJ2.Grids.GridColumn { Field = "SC_HEATING_CAPA" , HeaderText = "HEATING CAPA" , Width = "80", DefaultValue = "", HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right},

new Syncfusion.EJ2.Grids.GridColumn { Field = "SC_HUMIDIFIER_CAPA" , HeaderText = "HUMIDIFIER CAPA" , Width = "90", DefaultValue = "", HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right},

new Syncfusion.EJ2.Grids.GridColumn { Field = "SC_CW_FLOW_RATE" , HeaderText = "CW FLOW RATE" , Width = "80", DefaultValue = "", HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right},

new Syncfusion.EJ2.Grids.GridColumn { Field = "SC_SENSIBLE_COIL_LOAD" , HeaderText = "SENSIBLE COIL LOAD", Width = "80", DefaultValue = "", HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right}})">

columns="@(new List() {

new Syncfusion.EJ2.Grids.GridColumn { Field = "UC_AIR_FLOW_RATE" , HeaderText = "AIR FLOW RATE" , Width = "80", DefaultValue = "", HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right},

new Syncfusion.EJ2.Grids.GridColumn { Field = "UC_COOLING_CAPA" , HeaderText = "COOLING CAPA" , Width = "80", DefaultValue = "", HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right},

new Syncfusion.EJ2.Grids.GridColumn { Field = "UC_HEATING_CAPA" , HeaderText = "HEATING CAPA" , Width = "80", DefaultValue = "", HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right},

new Syncfusion.EJ2.Grids.GridColumn { Field = "UC_HUMIDIFIER_CAPA" , HeaderText = "HUMIDIFIER CAPA" , Width = "90", DefaultValue = "", HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right},

new Syncfusion.EJ2.Grids.GridColumn { Field = "UC_CW_FLOW_RATE" , HeaderText = "CW FLOW RATE" , Width = "80", DefaultValue = "", HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right},

new Syncfusion.EJ2.Grids.GridColumn { Field = "UC_SENSIBLE_COIL_LOAD" , HeaderText = "SENSIBLE COIL LOAD", Width = "80", DefaultValue = "", HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right}})">

//script

var Serv_elem;

var Serv_dObj;

//AIR_SYS_NM ComboBox

function Serv_Create(args) {

Serv_elem = document.createElement('input');

return Serv_elem;

}

function Serv_Destory() {

Serv_dObj.destroy();

}

function Serv_Read(args) {

return Serv_dObj.value;

}

function Serv_Write(args) {

var EqDetailGrid = document.getElementById('EqSelTree').ej2_instances[0];

var JobNo = sessionStorage.getItem('JobKey');

var BLDGValue = document.getElementById('BldgNo').value;

var EqName = args.rowData["EQ_NM"];

var sendData = { "jobNo": JobNo, "BldgNo": BLDGValue, "EqName": EqName };

var dObj;

$.ajax({

url: "/HvacInform/HD_Service", //render the partial view

type: "POST",

data: JSON.stringify(sendData),

dataType: 'JSON',

contentType: "application/json",

success: function (data) {

var placeholder;

if (data == "EMPTY") {

alert("SELECT BUILDING");

EqDetailGrid.refresh();

}

else {

if (data.length > 0) {

var dataList = [];

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

dataList.push(data[i]["AIR_SYS_NM"]);

}

placeholder = dataList[0];

dObj = new ej.dropdowns.DropDownList({

dataSource: dataList,

value: placeholder

});

dObj.appendTo(Serv_elem);

}

else {

alert("HAS NOT AIR SERVICE SYSTEM");

EqDetailGrid.refresh();

}

}

Serv_dObj = dObj;

}

});

}

//controller

public ActionResult HD_Service([FromBody] JObject data)

{

string BldgNo = data["BldgNo"].ToString();

string sJobNo = data["jobNo"].ToString();

string sEqName = data["EqName"].ToString();

string[] splitBldg = BldgNo.Split('-');

if (sEqName == "AHU-DX" || sEqName == "AHU-DX" || sEqName == "ACWC" || sEqName == "ACCU" || sEqName == "PACU" || sEqName == "CFU" || sEqName == "SIF" || sEqName == "CWP")

{

string serviceNo = splitBldg[2];

};

if (string.IsNullOrEmpty(BldgNo)) return Json("EMPTY");

HI_HD_ReportModel model = new HI_HD_ReportModel()

{

BLDG_SNO = BldgNo

};

List list = HI_HD_ReportModel.GetList(model, "S0");

int listCnt = list.Count;

return Json(list);

}

================================================================================

///////////Source using tregrid

//html

@**@

columns="@(new List() {

new Syncfusion.EJ2.Grids.GridColumn { Field = "DTY_QTY" , HeaderText = "DTY" , Width = "60", DefaultValue = "", HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Center},

new Syncfusion.EJ2.Grids.GridColumn { Field = "STB_QTY" , HeaderText = "STB" , Width = "60", DefaultValue = "", HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Center},

new Syncfusion.EJ2.Grids.GridColumn { Field = "DUAL_FAN" , HeaderText = "DUAL FAN", Width = "60", DefaultValue = "", HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, Edit = new { create="DualFan_Create", read="DualFan_Read", destory="DualFan_Destory", write="DualFan_Write" } }})">

columns="@(new List() {

new Syncfusion.EJ2.Grids.GridColumn { Field = "S_AIR_FLRT" , HeaderText = "AIR FLOW RATE" , Width = "80", DefaultValue = "", HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right},

new Syncfusion.EJ2.Grids.GridColumn { Field = "S_COOLING_CAPA" , HeaderText = "COOLING CAPA" , Width = "80", DefaultValue = "", HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right},

new Syncfusion.EJ2.Grids.GridColumn { Field = "S_HEATING_CAPA" , HeaderText = "HEATING CAPA" , Width = "80", DefaultValue = "", HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right},

new Syncfusion.EJ2.Grids.GridColumn { Field = "S_HUMIDIFIER_CAPA" , HeaderText = "HUMIDIFIER CAPA" , Width = "90", DefaultValue = "", HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right},

new Syncfusion.EJ2.Grids.GridColumn { Field = "S_CW_FLAT" , HeaderText = "CW FLOW RATE" , Width = "80", DefaultValue = "", HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right},

new Syncfusion.EJ2.Grids.GridColumn { Field = "S_SS_COIL_LOAD" , HeaderText = "SENSIBLE COIL LOAD", Width = "80", DefaultValue = "", HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right}})">

columns="@(new List() {

new Syncfusion.EJ2.Grids.GridColumn { Field = "U_AIR_FLRT" , HeaderText = "AIR FLOW RATE" , Width = "80", DefaultValue = "", HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right},

new Syncfusion.EJ2.Grids.GridColumn { Field = "U_COOLING_CAPA" , HeaderText = "COOLING CAPA" , Width = "80", DefaultValue = "", HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right},

new Syncfusion.EJ2.Grids.GridColumn { Field = "U_HEATING_CAPA" , HeaderText = "HEATING CAPA" , Width = "80", DefaultValue = "", HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right},

new Syncfusion.EJ2.Grids.GridColumn { Field = "U_HUMIDIFIER_CAPA" , HeaderText = "HUMIDIFIER CAPA" , Width = "90", DefaultValue = "", HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right},

new Syncfusion.EJ2.Grids.GridColumn { Field = "U_CW_FLAT" , HeaderText = "CW FLOW RATE" , Width = "80", DefaultValue = "", HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right},

new Syncfusion.EJ2.Grids.GridColumn { Field = "U_SS_COIL_LOAD" , HeaderText = "SENSIBLE COIL LOAD", Width = "80", DefaultValue = "", HeaderTextAlign = Syncfusion.EJ2.Grids.TextAlign.Center, TextAlign = Syncfusion.EJ2.Grids.TextAlign.Right}})">

//Below is the same as before.

======================================================================================

[TaeWook Kang]

error image

Attachment: syncfusion_Q_image_dcb7d989.zip

[Pon Selva Jeganathan]

Hi Taewook, 

 

We are working on this query with high priority and will update you with further details by 17^th January 2022. Until then we value your patience. 

 

Regards,   

Pon selva   

[Pon Selva Jeganathan]

Hi Taewook,  

  

Thanks for your patience. 

  

Query: However, if you refer to the source referenced below, an error occurs when the responding cell is sent to the controller. May I know what the problem is? 

  

Based on the shared image, we suspect that the reported issue incorrectly referred the value from the dropdown object. So, we suggest you ensure correctly refer the dropdown value. 

Still faced issue please share us the following details.

 

1. Kindly share the exact scenario of your issue with detail explanation.
2. Share the product detail version.
3. Share the issue reproducible sample

  

The provided information will be helpful to provide you response as early as possible.   

  

  

Query: When using the treegrid, it seems impossible to make another cell react when I change one cell I want. Can I solve my problems by using treegrid? 

  

Based on your query, we suspect that you want to enable the cascading dropdown while editing. We achieved your query by using the cell edit template feature and actionComplete event of the treegrid and change event of the dropdown list. Within that change event handler, data has to be loaded to the child DropDownList based on the selected value of the parent DropDownList. 

  

Please refer to the below code snippet, 

  

Index.cshtml 

  

<ejs-treegrid id="TreeGrid" height="400" idMapping="TaskId" parentIdMapping="ParentId" hasChildMapping="isParent"  toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" })" treeColumnIndex="1" actionComplete="complete”> 

<e-data-manager url="/Home/DataSource" insertUrl="/Home/Insert" updateUrl="/Home/Update" removeUrl="/Home/Remove" adaptor="UrlAdaptor"></e-data-manager> 

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

  <e-treegrid-columns> 

<e-treegrid-column field="TaskName" headerText="Name" width="100" editType='dropdownedit' edit="@(new {create="countryCreate", read="countryRead", destroy="countryDestroy", write="countryWrite"  })"></e-treegrid-column> 

<e-treegrid-column field="Duration" headerText="Duration"  width="150" editType='dropdownedit' edit="@(new {create="stateCreate", read="stateRead", destroy="stateDestroy", write="stateWrite"  })"></e-treegrid-column> 

…… 

  

<script> 

     

  

    function countryCreate() { 

        countryElem = document.createElement('input'); 

        return countryElem; 

    } 

    function countryRead() { 

        return countryObj.text; 

    } 

    function countryDestroy() { 

        countryObj.destroy(); 

    } 

    function countryWrite() { 

        countryObj = new ej.dropdowns.DropDownList({ 

                        dataSource: country, 

                        fields: { value: 'countryId', text: 'countryName' }, 

                        change:function(e){ 

                             stateObj.enabled = true; 

                             debugger 

            $.ajax({ 

                url: '/Home/DropDatasource', 

                type: 'GET', 

                data: { "countryId": e.value },//pass the selectedValue of the dropdown to server side 

                success: function (data1) { 

                     var durdd=document.getElementById("TreeGrid_gridcontrolDuration").ej2_instances[0]; 

                   durdd.dataSource= data1;//assign the filtered dataSource obtained from serverSide 

                   durdd.selectedIndex= 0; 

                } 

            }) 

                        } 

                         

                    countryObj.appendTo(countryElem); 

    } 

  

    function stateCreate() { 

        stateElem = document.createElement('input'); 

        return stateElem; 

    } 

    function stateRead() { 

        return stateObj.text; 

    } 

    function stateDestroy() { 

        stateObj.destroy(); 

    } 

    function stateWrite() { 

        stateObj = new ej.dropdowns.DropDownList({ 

                    dataSource: state, 

                    }); 

                    stateObj.appendTo(stateElem); 

    } 

    function complete(args) 

    { 

         if (args.requestType == "beginEdit" || args.requestType == "add") { 

             var durdd=document.getElementById("TreeGrid_gridcontrolDuration").ej2_instances[0]; 

             var taskdd=document.getElementById("TreeGrid_gridcontrolTaskName").ej2_instances[0]; 

        if (args.requestType == "beginedit") { 

            debugger 

            var titleObj = $("#TreeGrid_gridcontrolTaskName").data("ejDropDownList");//get the edited dropdown object 

            titleObj.selectItemByValue(args.rowData.TaskName); 

            $.ajax({ 

                url: '/Home/DropDatasource', 

                type: 'GET', 

                success: function (data1) { 

                    $("#TreeGrid_gridcontrolDuration").ejDropDownList({ dataSource: data1, selectedItemIndex: 0 });//assign the filtered dataSource obtained from serverSide 

                } 

            }) 

        } 

    } 

  

</script> 

  

  

  

  

  

  

  

  public ActionResult DropDataSource(int countryId) 

        { 

            var userTemplates = list1.Where(c => c.countryId == countryId).Distinct().ToList(); 

            var data = new List<object>(); 

            foreach (var Cust in userTemplates) 

            { 

                data.Add(new { value = Cust.stateId, text = Cust.stateName }); 

            } 

            return Json(data); 

        } 

  

In the above code snippet, the ActionComplete events of the Tree Grid, bound  Change event of the ejDropDownList. The selected value of the country dropdown is passed to the server side on the Ajax call, getting the filtered data from the server side and assigning it to the state dropdown’s dataSource. 

  

Please refer to the below sample, 

https://www.syncfusion.com/downloads/support/forum/171840/ze/Cascading_dropdown_with_api-1675916969 

  

Please refer to the below help documentation, 

https://ej2.syncfusion.com/aspnetcore/documentation/tree-grid/editing/#cell-edit-template 

https://ej2.syncfusion.com/aspnetcore/documentation/drop-down-list/how-to/cascading/ 

  

Please refer to the below API documentation, 

https://ej2.syncfusion.com/documentation/api/treegrid/#actioncomplete 

https://ej2.syncfusion.com/documentation/api/drop-down-list#change 

  

Kindly get back to us for further assistance.  

  

Regards, 

Pon selva 

[TaeWook Kang]

Hello, Pon selva.

I think the explanation was lacking.

In fact, there are cases where that part is used well without any problem when running step by step in Debug. (If you press F8 in "Write" to skip debug, it goes to "Read". I guess it's a bug.)

Additionally we use "Child" as the mode in <e-treegrid-editsettings>. (Dropdown itself is not a problem when in a row)

I'm attaching a picture, so please check this part again.

regards, 

TW Kang

[TaeWook Kang]

<first attach>

[TaeWook Kang]

<second attach>

[Pon Selva Jeganathan]

Hi Taewook,  

 

Based on the shared image, we try to reproduce the issue(script error thrown using dropdown) at our end, but we were unable to reproduce the issue at our end. 

 

Please refer to the below demo, 

https://www.syncfusion.com/downloads/support/forum/171840/ze/Dropdown1084258354 

 

Still faced issue please share us the following details.

1. Kindly share the exact scenario of your issue with detail explanation.
2. Share the video demo of the issue
3. Share the product detail version.
4. Share the issue reproducible sample or reproduce the issue on shared sample

 

The provided information will be helpful to provide you response as early as possible.   

 

Regards, 

Pon selva