Using a DropdownList defined in the row model as edit params for a column

[Richard Popovich]

I have a DataGrid that I am databinding a collection (List of T) to. One of the columns is configured for dropdownedit, and each item in the collection has a DropDownList of the valid choices for that column, in that row.

How do I configure the DataGrid to use that row's DropDownList as the edit params?

[Balaji Sekar]

Hi Richard, 

 

Greetings from the Syncfusion support. 

 

Query: How do I configure the DataGrid to use that row's DropDownList as the edit params? 

 

Based on your query we have bound the EJ2 Dropdownlist component in the ShipCountry column while editing using cellEditTemplate feature. Please refer the below code example, sample and Help Documentation for more information. 

 

[Index.cshtml] 

<ejs-grid id="Grid" dataSource="ViewBag.dataSource" toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" })" allowPaging="true" height="300"> 

   <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true"></e-grid-editSettings> 

     <e-grid-columns> 

        <e-grid-column field="OrderID" width="110" isPrimaryKey=true></e-grid-column> 

        <e-grid-column field="CustomerID" headerText="CustomerID" width="110"></e-grid-column> 

        <e-grid-column field="ShipCountry" headerText="ShipCountry" edit="@(new { create = "create", read = "read", destroy = "destroy", write = "write" })"  width="110"> 

                       </e-grid-column> 

        <e-grid-column field="ShipCity" width="110"> 

 

        </e-grid-column> 

    </e-grid-columns> 

</ejs-grid> 

 

<script> 

    var countryElem; 

    var countryObj; 

          function read() { 

                return countryObj.text; 

            } 

           function destroy() { 

                countryObj.destroy(); 

            } 

           function write(args) { 

                countryObj = new ej.dropdowns.DropDownList({ 

                    dataSource: @Html.Raw(Json.Serialize(ViewBag.dataSource)), 

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

                    placeholder: 'Select a country', 

                    floatLabelType: 'Never', 

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

                }); 

                countryObj.appendTo(countryElem); 

            } 

</script> 

 

Sample link: https://www.syncfusion.com/downloads/support/forum/161569/ze/Grid-Dropdown-editing1190241702.zip  

 

Help Documentation: https://ej2.syncfusion.com/aspnetcore/documentation/grid/edit/#cell-edit-template  

 

Please get back to us if you need further assistance. 

 

Regards, 

Balaji Sekar