Get the value of selected item of dropdown list in the grid and show it in another column.

[kalum]

Hi,
I have a dropdown list column named "PrntBUName"  in my grid and and I have a requirement to get the selected item value when selecting an item and show it in another column named "PrntBUKey" of same row. Is there a way to do it and my code is as bellow.



@Html.EJS().Grid("FlatGrid").DataSource((IEnumerable<object>)ViewBag.griddata).AllowFiltering(true).FilterSettings(filter => filter.Type(Syncfusion.EJ2.Grids.FilterType.Menu)).Columns(col =>{
   col.Field("BUKey").HeaderText("Key").Width("100").IsPrimaryKey(true).IsIdentity(true).AllowEditing(false).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Left).Add();
    col.Field("BUAbbr").HeaderText("BU Abbr").Width("100").AllowEditing(true).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Left).Add();
    col.Field("BUName").HeaderText("BU Name").Width("200").AllowEditing(true).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Left).Add();
    col.Field("PrntBUKey").HeaderText("PrntBUKey").Width("100").Visible(true).AllowEditing(true).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Left).DefaultValue("0").Add();
    col.Field("PrntBUName").HeaderText("PrntBUName").EditType("dropdownedit").Edit(new { create = "create", read = "read", destroy = "destroy", write = "write" }).Width("150").Add();
    col.Field("IsAct").HeaderText("IsAct").EditType("booleanedit").DisplayAsCheckBox(true).Type("boolean").Width("150").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Center).Add();
}).AllowPaging().Load("load").EditSettings(edit => { edit.AllowEditing(true).AllowAdding(true).Mode(Syncfusion.EJ2.Grids.EditMode.Batch).ShowConfirmDialog(false); }).Render()



<script>

    var elem;
    var dObj;
    function create(args) {
        elem = document.createElement('input');
        return elem;
    }

    function write(args) {
        var datasource = @Html.Raw(Json.Encode(ViewBag.PrntBUDataSource));
      

        dObj = new ej.dropdowns.DropDownList({
            dataSource: new ej.data.DataManager(datasource),
            fields: { text: 'PrntBUName', value: 'PrntBUKey' },
            popupHeight: '230px',
            value: args.rowData[args.column.field]
        });
        dObj.appendTo(elem);

    }

    function destroy() {

        dObj.destroy();
    }

    function read(args) {
            
        return dObj.text;
   
    }
</script>

Thank you
Kalum

[Joseph Christ Nithin Issack]

Hello Kalum, 

 

Thanks for contacting Syncfusion support. 

 

Based on your requirement you need to display selected value of dropdown in another column in the same row. To achieve your requirement, we have used ‘updateCell’ method of EJ2 Grid in the dropdown ‘change’ event. 

  

Please refer the below code snippet. 

  

  

@Html.EJS().Grid("FlatGrid").DataSource((IEnumerable<object>)ViewBag.griddata).AllowFiltering(true).FilterSettings(filter => filter.Type(Syncfusion.EJ2.Grids.FilterType.Menu)).Columns(col => 

{ 

   col.Field("BUKey").HeaderText("Key").Width("100").IsPrimaryKey(true).IsIdentity(true).AllowEditing(false).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Left).Add(); 

    col.Field("BUAbbr").HeaderText("BU Abbr").Width("100").AllowEditing(true).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Left).Add(); 

    col.Field("BUName").HeaderText("BU Name").Width("200").AllowEditing(true).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Left).Add(); 

    col.Field("PrntBUKey").HeaderText("PrntBUKey").Width("100").Visible(true).AllowEditing(true).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Left).DefaultValue("0").Add(); 

    col.Field("PrntBUName").HeaderText("PrntBUName").EditType("dropdownedit").Edit(new { create = "create", read = "read", destroy = "destroy", write = "write" }).Width("150").Add(); 

    col.Field("IsAct").HeaderText("IsAct").EditType("booleanedit").DisplayAsCheckBox(true).Type("boolean").Width("150").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Center).Add(); 

}).AllowPaging().EditSettings(edit => { edit.AllowEditing(true).AllowAdding(true).Mode(Syncfusion.EJ2.Grids.EditMode.Batch).ShowConfirmDialog(false); }).Render() 

  

  

<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script> 

  

<script> 

  

    var elem; 

    var dObj; 

    function create(args) { 

        elem = document.createElement('input'); 

        return elem; 

    } 

  

    function write(args) { 

        var datasource = @Html.Raw(Json.Encode(ViewBag.PrntBUDataSource)); 

  

  

        dObj = new ej.dropdowns.DropDownList({ 

            dataSource: new ej.data.DataManager(datasource), 

            fields: { text: 'PrntBUName', value: 'PrntBUName' }, 

            popupHeight: '230px', 

            value: args.rowData[args.column.field], 

            change: dropChange 

        }); 

        dObj.appendTo(elem); 

  

    } 

  

    function destroy() { 

  

        dObj.destroy(); 

   } 

  

    function read(args) { 

        return dObj.text; 

  

    } 

  

    function dropChange(args) { 

  

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

  

        var value = args.value; 

  

        var rowIndex = gridObj.selectedRowIndex; 

  

        var Field = "PrntBUKey"; //desire field name 

  

        gridObj.updateCell(rowIndex, Field, value); 

    } 

</script> 

  

  

Sample:  https://www.syncfusion.com/downloads/support/forum/165463/ze/Test_DropDown1110531905 

 

If we misunderstood your query, please get back to us with more details.  

  

  

Regards, 

Joseph I. 

[kalum]

Hi Joseph,

It worked fine. Thank you very much for your kind help.

Best regards,

Kalum

[Thiyagu Subramani]

Hi kalum, 

Thanks for your update. 

We are happy to hear that the provided solution works at your end. 

Please get back to us, if you need any further assistance. 

Regards, 

Thiyagu S