Hi, DropDownList not working for me in Edit and Insert Dialog in to DataGrid Need Help!

[Juan]

Hi, DropDownList not working for me in Edit and Insert Dialog

<ejs-grid id="Grid"

          toolbar="@(new List<string>() {"Add", "Edit", "Delete", "Search"})"

          allowMultiSorting="true"

          allowSorting="true"

          allowPaging="true"

          allowFiltering="true"

          allowExcelExport="true"

          enableHover="true">

    <e-data-manager json="@ViewBag.dataSource" crudUrl="/Clientes/UpdateData" adaptor="RemoteSaveAdaptor"></e-data-manager>

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

    <e-grid-filterSettings type="Excel"></e-grid-filterSettings>

    <e-grid-pagesettings pageCount="5"></e-grid-pagesettings>

    <e-grid-columns>

        <e-grid-column field="Idcliente" headerText="ID" isIdentity="true" isPrimaryKey="true" allowEditing="false" textAlign="Right" width="10"></e-grid-column>

        <e-grid-column field="NombreComercial" headerText="Nombre Comercial" validationRules="@(new { required=true})" width="150"></e-grid-column>

        <e-grid-column field="IdtipoDocumento" headerText="Tipo de Documento" dataSource="ViewBag.dropDownData" width="150"></e-grid-column>

        <e-grid-column field="Documento" headerText="Documento" validationRules="@(new { required=true})" width="150"></e-grid-column>

    </e-grid-columns>

</ejs-grid>

[Rajapandiyan Settu]

Hi Juan, 

  

Thanks for contacting Syncfusion support. 

Based on your query, you want to render dropdown control to edit a column in the Grid. We would like to share the available features to edit a column using EJ2 Dropdown control in the Grid. 

** EditType – dropdownedit ** 

By setting the editType of column as ‘dropdownedit’, you can render dropdown control to edit a column. In which the Grid’s dataSource is given to the Dropdown dataSource. Refer to the below documentation for more information. 

Demo: https://ej2.syncfusion.com/aspnetcore/Grid/DialogEditing#/material 

Available editType in Grid: https://ej2.syncfusion.com/aspnetcore/documentation/grid/edit/#cell-edit-type-and-its-params 

<e-grid-column field="ShipCountry" headerText="Ship Country" width="150" editType="dropdownedit"></e-grid-column> 

** EditParams ** 

If you want to provide custom dataSource for dropdown or need to customize few properties of dropdown. You can achieve it by using editParams of column. Refer to below documentation for more information. 

Provide custom dataSource to dropdown: https://ej2.syncfusion.com/aspnetcore/documentation/grid/how-to/provide-custom-data-source-and-enabling-filtering-to-drop-down-list/ 

@{ 

    var DropDownList = new Syncfusion.EJ2.DropDowns.DropDownList() { DataSource = ViewBag.DropDownData, Query = "new ej.data.Query()", AllowFiltering = true, Fields = new Syncfusion.EJ2.DropDowns.DropDownListFieldSettings() { Value = "Country", Text = "Country" }, ActionComplete = "actionComplete" }; 

} 

 

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

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

    <e-grid-columns> 

        --- 

        <e-grid-column field="ShipCountry" headerText="Ship Country" width="150" edit="new {@params = DropDownList }" editType="dropdownedit" ></e-grid-column> 

    </e-grid-columns> 

</ejs-grid> 

** Cell Edit Template ** 

If you want to render own dropdown control to edit the EJ2 Grid column, you can achieve it by using cellEditTemplate feature of Grid. Refer to the below documentation for more information. 

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

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

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

    <e-grid-columns> 

        <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="100"></e-grid-column> 

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

    </e-grid-columns> 

</ejs-grid> 

 

 

<script> 

    var ddlObject; 

 

    function create() { 

        //  create a input element 

        return document.createElement('input'); 

    } 

 

    function read(args) { 

        // return the value which will be saved in the grid 

        return ddlObject.value; 

    } 

 

    function destroy() { 

        // destroy the custom component. 

        ddlObject.destroy(); 

    } 

 

    function write(args) { 

        console.log(args); 

       console.log(args.rowData); 

        //get the dropdown dataSource based on the rowData 

        var ddData = args.rowData.OrderID % 2 == 1 ? data1 : data2 

        // create a dropdown control 

        ddlObject = new ej.dropdowns.DropDownList({ 

            //bind the data manager instance to dataSource property 

            dataSource: ddData, 

            allowFiltering: true, 

            //bind the current cell value to the Dropdown which will be displayed only when the dropdown dataSource contains that value 

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

            //map the appropriate columns to fields property 

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

            //set the placeholder to DropDownList input 

            placeholder: "Find a customer" 

        }); 

        //render the component 

        ddlObject.appendTo(args.element); 

    } 

</script> 

If you want use ForeignKey feature in the EJ2 Grid, refer to the below documentation for more information. 

ForeignKey Column: https://ej2.syncfusion.com/aspnetcore/documentation/grid/columns/#foreign-key-column 

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

  

Regards,  

Rajapandiyan S