We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Bootbox (modal bootstrap) filtering problem

Thread ID:

Created:

Updated:

Platform:

Replies:

124046 May 11,2016 11:07 AM UTC May 13,2016 09:24 AM UTC JavaScript 3
loading
Tags: ejDropDownList
David
Asked On May 11, 2016 11:07 AM UTC

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 [Syncfusion]
Replied On May 12, 2016 01:11 PM UTC

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: 

Regards, 
Prince  

David
Replied On May 12, 2016 02:14 PM UTC

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 [Syncfusion]
Replied On May 13, 2016 09:24 AM UTC

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.   
  
  
Regards,   
Prince 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;