Populate field depending the value selected from another field in ASP.NET MVC Grid

[Daniel]

Hi,

I have two columns A and B, the column A is a dropdownlist and the column B is text or numericedit and after to select a value in dropdownlist, I would like to populate the column B depending of the value selected in the column A. How can to do that?

Thanks,

[Rajapandiyan Settu]

Hi Daniel, 

Greetings from syncfusion support. 

Query : I have two columns A and B, the column A is a dropdownlist and the column B is text or numericedit and after to select a value in dropdownlist, I would like to populate the column B depending of the value selected in the column A. How can to do that? 

Based on your query we could see that you need to dynamically populate a value in column B by a selecting dropdown value in column A. 

We have created a simple sample with your requirement, in which we used dropdown edit for ShipCounty column, numeric edit for Freight column and textbox edit (default edit) for CustomerID column. In the actionComplete event of beginedit we have bind the change event to ShipCountry dropdown. In that event we dynamically changed the value of Freight column and CustomerID column based on the dropdown select value. Please refer the below code example and sample for more information. 

 

@Html.EJS().Grid("EditParam").DataSource((IEnumerable<object>)ViewBag.datasource).Columns(col => 

{ 

    col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width("120").ValidationRules(new { required = "true" }).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); 

    col.Field("ShipCountry").HeaderText("Ship Country").EditType("dropdownedit").Width("150").Add(); 

    col.Field("CustomerID").HeaderText("Customer Name").AllowEditing(false).Width("150").Add(); 

    col.Field("Freight").HeaderText("Freight").Width("120").AllowEditing(false).EditType("numericedit").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); 

 

}).AllowPaging().ActionComplete("ActionComplete").EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Normal); }).Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" }).Render() 

 

<script> 

    function ActionComplete(args) { 

        if (args.requestType == 'beginEdit') { 

// get the shipcountry dropdown element in the grid form 

            var ddobj = args.form.elements.ShipCountry[1].ej2_instances[0]; 

// bind the change event to the dropdown 

            ddobj.change = function (args) { 

// get the grid instance 

                var grid = document.getElementsByClassName('e-grid')[0].ej2_instances[0]; 

// get the freight column input element 

                var freightinput = grid.editModule.formObj.element.elements.EditParamFreight; // editparam + column field name 

// get the customerID column input element 

                var customeridinput = grid.editModule.formObj.element.elements.EditParamCustomerID; // editparam + column field name 

// change the value of customerID and freight column based on dropdown select value 

                switch (args.value) { 

                    case 'Denmark': // dropdown select value 

                        freightinput.ej2_instances[0].value = 2; // changing freight column value 

                        customeridinput.value = 'ALFKI'; // changing customerID column value 

                        break; 

                    case 'Brazil': 

                        freightinput.ej2_instances[0].value = 4; 

                        customeridinput.value = 'ANATR'; 

                        break; 

                    case 'Germany': 

                        freightinput.ej2_instances[0].value = 6; 

                        customeridinput.value = 'ANTON'; 

                        break; 

                    default : 

                        freightinput.ej2_instances[0].value = 8; 

                        customeridinput.value = 'BLONP'; 

                        break; 

                } 

            } 

        } 

    } 

</script> 

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/mvc_grid_edit_dropdown_change1568671410.zip 

Please get back to us if you need further assistance on this. 

Regards, 

Rajapandiyan S