jqxGrid + Bootstrap 3.2.0 modal – filtering input 'text' box is not focusing

[arunthathamParticipant]

I am using Bootstrap 3.2.0 Modal for displaying the jqxGrid with filtering functionality. All functionality of jqxGrid filtering (Sorting, Select Box) is working, except for typing text in the filtering input box. I am not able to find a solution on this issue. Request to update on this issue.

[arunthathamParticipant]

Can anybody update on the issue, I am facing critical issue on filtering input text box, I am not able to type. Please help.

[Peter StoevKeymaster]

Hi arunthatham,

Well, your Modal may prevent Key events. I suggest you to use jqxWindow as Modal window.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[arunthathamParticipant]

I am sorry, I have tightly coupled dependencies on the Bootstrap modal, I believe I can’t discontinue that.

Do you have a solution on solving this issue? I want all input text operational.

I have attached a sample code from your example, representing my problem.
http://jsfiddle.net/yprLbyu7/3/

[Peter StoevKeymaster]

Hi arunthatham,

That’s not an issue in our libary. If you would like to display a Grid in Modal Dialog, use jqxWindow.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[arunthathamParticipant]

I am able to edit and focus on the text input normally using Bootstrap Modal windows, which is not happening here.
Please understand the peculiarity of problem and it is a serious BUG.

I have illustrated the issue in the image using the Dev Tools from Chrome.

From the above image, adding value(‘Hello’) using the developer tools should reflect the same in the input(‘Hello’) tag, but in this case it is not happening. Bootstrap doesn’t hold any issues with this, there is basically no key event binding associated with Bootstrap Modal, if so normal input would have malfunctioned.

I am bound to understand that, jqWidgets does not provide compatibility to Bootstrap.

Please Clarify.

[Peter StoevKeymaster]

Hi arunthatham,

The problem is that the Bootstrap’s Modal Window Prevents Keyboard and Selection. The solution is to use jqxWindow instead. If you do not want to do this, we cannot help!

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[arunthathamParticipant]

Hi,

I tried using jqxwindow for my requirements. But i see that, lot of inline styles are used for sizing jqxwindow which are mentioned in pixels. Should I overwrite these css styles to fit the jqxwindow to fit browser screen? also, will bootstrap styles not get applied inside jqxwindow? will it conflict with jqx css?

It would be great if i can get some sample that uses jqxwindow that fits browser window, similar to modal form popup.

Please clarify.

[rgbnParticipant]

find unique class name assigned to the filter textbox in the Grid by using browser “Inspect Element”.
For me it is ” .jqx-input “.
Write code like below in the Grid ‘bindingcomplete’

$('#jqxGrid').on('bindingcomplete', function () {
    var ele = $("#" + this.id + " .jqx-input");
    ele[0].focus();
});

[logsParticipant]

I think it is too late to reply to this problem , but i will give the solution for anyone having same problem.
Its true that keyboard restriction done by the Bootstrap’s modal.
So what you need to do is to bind data to a jqwidget element after the bootsrap modal has been shown.
example JQXGRID:

$("#idModalBootstrap").on('shown.bs.modal', function (e) {
   $("#idJqwidgetElement").jqxGrid({source: DATA });
});

[Author]

Posts