Dropdown created using jquery not opening in Chrome

Dropdown created using jquery not opening in Chrome

I have created a dynamic dropdown list using jquery. This dropdown will get bound to kendo grid column based on certain condition. Refer the below code

The code works fine when viewed from IE. But the issue occurs in Chrome. The dropdown does not open. Please suggest.

     CreateDropDown : function ( e , grid , defaultvalue ) {
 var field = $("#" + grid).data("kendoGrid").columns[e.index()].field; $("#" + field).hide(); var kendoddl = $("<input id='DDL' />"); e.append(kendoddl); $("#DDL").find('select').append( $("#DDL").kendoDropDownList({ dataTextField: 'LevelName', dataValueField: 'Levelvalue', index: 0, change: LocalSetup.LevelOnSelect, dataSource: { transport: { read: { url: "/ONT/TYK/GetDropDowndata" } }, serverFiltering: true }, }) ); var value = LocalSetup.checkLevelValue(defaultvalue); var dropdownlist = $("#DDL").data("kendoDropDownList"); dropdownlist.value(value); },