ejs-grid dropdown issue in edit mode

[Nitin Pawar]

We are using  ejs-grid with dropdownlist but in edit mode we are not able to bind preselected value to the d

Please find below sample from dropdownlist

<ejs-grid id="Grid" allowPaging="true" actionBegin="actionBegin" actionComplete="actionComplete"

                                          load="onLoad" toolbarClick="ontoolbarClick" toolbar="@(new List<string> { "Add", "Edit", "Delete", "Cancel", "Update" })">

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

                                    <e-data-manager json="@Model.TaxonomyViewModel.TaxonomyInfos?.ToArray()" adaptor="RemoteSaveAdaptor"

                                                    insertUrl="TaxonomyList?handler=Insert"

                                                    updateUrl="TaxonomyList?handler=Update"></e-data-manager>

                                    <e-grid-columns>

                                        <e-grid-column field="Id" isPrimaryKey="true" headerText="Id" width="120" clipMode="EllipsisWithTooltip" visible="false"></e-grid-column>

                                        <e-grid-column field="TaxonId" headerText="TaxonId" width="120" clipMode="EllipsisWithTooltip"></e-grid-column>

                                        <e-grid-column field="Mnemonic" headerText="Mnemonic" width="120" clipMode="EllipsisWithTooltip"></e-grid-column>

                                        <e-grid-column field="ScientificName" headerText="Scientific Name" width="120" clipMode="EllipsisWithTooltip"></e-grid-column>

                                        <e-grid-column field="CommonName" headerText="Common Name" width="120" clipMode="EllipsisWithTooltip"></e-grid-column>

                                        <e-grid-column field="Synonym" headerText="Synonym" width="120" clipMode="EllipsisWithTooltip" visible="false"></e-grid-column>

                                        <e-grid-column field="Organism" headerText="Organism" width="120" clipMode="EllipsisWithTooltip" allowEditing="true" visible="false"></e-grid-column>

                                        <e-grid-column field="Lineage" headerText="Lineage" width="120" clipMode="EllipsisWithTooltip" allowEditing="true" visible="false"></e-grid-column>

                                        <e-grid-column field="Parent" headerText="Parent" textAlign="Right" width="120" editType="dropdownedit" edit="@(new {create = "onCreate", read = "onRead", write = "onWrite", destroy= "onDestroy"})"></e-grid-column>

                                        <e-grid-column field="Solanaceae" headerText="Solanaceae" textAlign="Right" width="120" editType="booleanedit" edit="@(new {create = "onCreateSolanaceae", read = "onReadSolanaceae", write = "onWriteSolanaceae", destroy= "onDestroySolanaceae"})" clipMode="EllipsisWithTooltip"></e-grid-column>

                                    </e-grid-columns>

                                </ejs-grid>

<script>

    var selectElementSolanaceae;

    var elementSolanaceae

    function onCreateSolanaceae(args) {

        elementSolanaceae = document.createElement('input');

        return elementSolanaceae;

    }

    function onReadSolanaceae(e) {

        return selectElementSolanaceae.value;

    }

    function onDestroySolanaceae() {

        selectElementSolanaceae.destroy();

    }

    function onWriteSolanaceae(args) {

        selectElementSolanaceae = new ej.dropdowns.DropDownList({ //rendering selectElement component

            dataSource:[{Disabled: false, Selected: false, Text: 'Solanaceae', Value: 'True'},

                       {Disabled: false, Selected: false, Text: 'Non Solanaceae', Value: 'False'}],

            fields: { value: "Value", text:"Text"},

            placeholder: 'Select solanaceae',

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

        });

        selectElementSolanaceae.appendTo(elementSolanaceae);

    }

</script>

<script>

    var selectElement;

    var element

    function onCreate(args) {

        element = document.createElement('input');

        return element;

    }

    function onRead(e) {

        return selectElement.value;

    }

    function onDestroy() {

        selectElement.destroy();

    }

    function onWrite(args) {

        selectElement = new ej.dropdowns.DropDownList({ //rendering selectElement component

            dataSource: @Html.Raw(Json.Serialize(Model.TaxonomyViewModel.TaxonomyDropdownList.Items)),

            fields: { value: "Value", text:"Text"},

            placeholder: 'Select parent',

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

        });

        selectElement.appendTo(element);

    }

</script>

[Sujith Kumar Rajkumar]

Hi Nitin, 

 

Greetings from Syncfusion support. 

 

Your reported problem occurs if the value(from the edited row cell) set to the custom edit dropdown(rendered in cell edit template) is not available in the dropdown data source. Like in your case, we could see that you have defined the ‘Solanaceae’ edit dropdown data source as string values – ‘True’, ‘False’. So the value set from the event arguments to the edit dropdown(value: args.rowData[args.column.field]) should also be either ‘True’ or ‘False’ and the reported problem will occur if a Boolean value is set here(true, false). 

 

So please ensure this case from your end and if problem still persists, then please share us the following information to validate further on this, 

 

• Share us a sample data bound to the Grid.
• Are any console errors thrown? If so please share it.
• Let us know how you have referenced the script file for the EJ2 Grid control.

 

Regards, 

Sujith R