Bootbox (modal bootstrap) filtering problem

[David]

HI!

i have a problem with BootBox.js -> http://bootboxjs.com/ when i try filtering on EjDropDownList.

When i render EjDropDownList in modal window, i can't filtering. I can't write on input box search...

var cmb = new ej.DropDownList($('#cmbTags'), {

            dataSource: BikeList,

            width: "100%",

            enableFilterSearch:true,

            caseSensitiveSearch: true,

            enablePopupResize:true,

            filterType: ej.filterType.Contains,

            watermarkText: "Seleccione tag",

            fields: { id: "Id", text: "TagName", value: "TagName" }

        });

EJ Version:  14.1

Thanks!!

[Prince Oliver]

Hi David, 

Thanks for contacting Syncfusion support. 

We have analyzed the issue and it is due to dropdownlist by default appends its pop-up wrapper element to the body. In bootbox dialog, only the elements inside the modal-dialog <div> will be focused and accessible. Hence you need to manually add the pop-up wrapper into the modal-dialog <div> in dropdownlist create event as a work around. We have attached a sample for your convenience. 

 

 

Note: we have added selector for selecting the div as per the sample attached you need to modify it as per your application. 

Refer below for the playground sample: 

http://jsplayground.syncfusion.com/f4zc0gt5 

Regards, 

Prince  

[David]

Hi!

first, thank you.

I try it  but my popup dropdownlist have a bad position...

then, i try SELECT2... and i have the same case... but searching i have a good news. 

code:

 $.fn.modal.Constructor.prototype.enforceFocus = function () { };

then, works!!! in ejdropdownlist and select2.

I hope you will be helpful.

[Prince Oliver]

Hi David,   

  

We are happy that you found a solution for the problem. ejDialog box can also be used as modal window and the ejDropdownlist works fine in it. Please refer to the following sample and we hope it will be helpful.   

  

http://jsplayground.syncfusion.com/2kfzk3f2 

  

Regards,   

Prince