Dropdownlist in Grid Edit Module

[Miguel Varela Rodriguez]

Hi, 

i have a DataGrid Column that in edit mode shows a dropdown. This works perfect.

The problem is when i activate Filtering. in this case the dropdown closes directly when i interacst with the list ( click or type ). And dosent show the entries.

I leave my Grid declaration that includes the edit mode, ( its the field codeProject ).

Thank you and greets.

Attachment: Grid_DropDown_code_7b533dd8.zip

[Pavithra Subramaniyam]

Hi Miguel, 

 

Greetings from Syncfusion. 

 

Query: i have a DataGrid Column that in edit mode shows a dropdown. This works perfect. The problem is when i activate Filtering. in this case the dropdown closes directly when i interacst with the list ( click or type ). And dosent show the entries. 

 

We have validated your query and tried to reproduce the reported problem at our end. But It works fine. We have prepared a sample based on your requirement. Please find the below code example and sample for your reference. 

 

[code example] 

... 

 

    var dropDownData = [ 

        { sid: '1', sname: 'France' }, 

        ... 

   ]; 

 

    var grid = new ej.grids.Grid({ 

        dataSource: window.orderData, 

        editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Batch' }, 

        allowPaging: true, 

        pageSettings: { pageCount: 5 }, 

        toolbar: ['Add', 'Delete', 'Update', 'Cancel'], 

        columns: [ 

            ... 

           { 

                field: 'ShipCountry', headerText: 'Ship Country', edit: { 

                    create: function () { 

                        elem = document.createElement('input'); 

                        return elem; 

                    }, 

                    read: function () { 

                        return dropDownObj.value; 

                    }, 

                    destroy: function () { 

                        dropDownObj.destroy(); 

                    }, 

                    write: function (args) { 

                        dropDownObj = new ej.dropdowns.DropDownList({ 

                            dataSource: dropDownData, 

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

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

                            popupHeight: '230px', 

                            allowFiltering: true, 

                        }); 

                        dropDownObj.appendTo(elem); 

                    } 

                }, width: 150 

            } 

        ], 

    }); 

    grid.appendTo('#Grid'); 

 

Sample link: https://stackblitz.com/edit/udzsvy-rb2cnn?file=index.js  

 

Please get back to us if you need further assistance. 

 

Regards, 

Pavithra S.