DropDownList auto closing (Closing at the first click) when declared in the databound of Grid.

--This is my dataBound function in the property of Grid--. I don't know but it's DropDownList is/are auto closing when clicked. Please help me out. Thank you!
dataBound: function()
{
var yesNoChoice = ['Yes', 'No'];
for(i=0; i<20; i++)
{
dropDown(yesNoChoice, '#valid-drop-alrQCRecords-'+i);
dropDown(yesNoChoice, '#qc-drop-alrQCRecords-'+i);
dropDown(yesNoChoice, '#system-drop-alrQCRecords-'+i);
}
}
function dropDown(data, id)
{
var obj = new ej.dropdowns.DropDownList({
  dataSource: data,
  placeholder: 'Select',
});
    obj.appendTo(id);
}

1 Reply

MF Mohammed Farook J Syncfusion Team June 21, 2018 02:07 PM UTC

Hi Robin, 

Thanks for contacting Syncfusion support. 


We have checked at our end and the drop down inside grid cell is working fine and also we noted you have used dataBound event to render dropdown, we suggest to use ‘template’ and queryCellInfo to render drop down component inside the grid column.  Please find the code example.  


<script> 
    var data = new ej.data.DataManager(window.orderData).executeLocal(new ej.data.Query().take(15)); 
    var grid = new ej.grids.Grid({ 
        dataSource: data, 
        columns: [ 
            { 
                headerText: 'Order Status', 
                template: 
                `<div> 
                <select class="e-control e-dropdownlist"> 
                    <option value="1" selected="selected">Order Placed</option> 
                    <option value="2">Processing</option> 
                    <option value="3">Delivered</option> 
                </select> 
            </div>`, width: 140 
            }, 
. . . 
        ], 
        height: 315, 
        queryCellInfo: dropdown 
    }); 
    grid.appendTo('#Grid') 





Still if you have faced same issue , please share the Essential JS2 version which you have used in  your sample and more details regarding your requirement. 

Regards, 
J Mohammed Farook 
 


Loader.
Up arrow icon