Filter input field on jqxGrid are disabled, cannot type inside the filter field

[ayrus02Participant]

Hi,

I have some problem with the filter text field on a Grid that inside a JQuery UI Dialog PopUp.
The problem is when I click the filter on one of grid column, the popup for the filter is shows up, but when I try to click on the filter text input field on the popup I cannot.
The other function like sort ascending and descending are ok, the filter type dropdown are also functioning as expected (I can click it and choose the filter type whether I choose ‘Contain’, ‘Empty’, ‘Not Empty’ etc.
Just the filter input field are like disabled and cannot give focus to type some filter string.

below are the initalization code for my grid:

    var source ={
        datatype: "json",
		cache: false,
		root: 'Rows',
        datafields: [
			{ name: 'code_id' },
			{ name: 'full_code' },
			{ name: 'category' },
			{ name: 'sub_category' },
			{ name: 'item_name' },
			{ name: 'item_type' },
			{ name: 'unit' },
			{ name: 'item_drawing' },
			],
        url: '<?php echo(ISW::GetPageUrl()); ?>getItemCodeList/',
		beforeprocessing: function (data) {
				// this need to be executed in order for paging to be working
				source.totalrecords = data.TotalRows;
			},
		sort: function () {
                $("#jqxGridSelectItemCode").jqxGrid('updatebounddata', 'sort');
            },
		filter: function () {
				$("#jqxGridSelectItemCode").jqxGrid('updatebounddata', 'filter');
			}
    };

        $("#jqxGridSelectItemCode").jqxGrid({
		width: '100%',
		height: 270,
        source: source,
        theme: 'light',
        pagesize: 100,
		pagesizeoptions: [10, 20, 50, 100, 200, 500, 1000],
		filterable: true,
		sortable: true,
		pageable: true,
		showsortcolumnbackground: true,
		showsortmenuitems: true,
		enabletooltips: true,
		columnsresize: true,
        sorttogglestates: 1,
        virtualmode: true,
		rendergridrows: function (params) {
				return params.data;
			},
        columns: [
			{ text: 'Code ID', datafield: 'code_id', width: 30 },
			{ text: 'Full Code', datafield: 'full_code', width: 150 },
			{ text: 'Category', datafield: 'category', width: 150 },
			{ text: 'Sub Category', datafield: 'sub_category', width: 150 },
			{ text: 'Item Name', datafield: 'item_name', width: 150 },
			{ text: 'Item Type', datafield: 'item_type', width: 150 },
			{ text: 'Item Drawing', datafield: 'item_drawing', width: 150 },
			{ text: 'Unit', datafield: 'unit', width: 150 }
		]
    });

[ayrus02Participant]

This is jsfiddle for my problem

https://jsfiddle.net/ayrus02/qLcrz956/48/

Hope can help to solve the problem

Regards,
ayrus02

[HristoParticipant]

Hello ayrus02,

I would like to mention a few things that could help in your case and also in the future implementations.
Firstly it is important to create the initialization of the widgets just once.
In your case you create the second grid in the “click” event of a button.
This is not appropriate and it could cause issues.
You could create it, hide it and using its methods to update and change it.

Also, we cannot guarantee about the result when using third part libraries.
We have a jqxWindow which you could use in that case.
Also, it has a special callback which is used for implementation of the widgets inside it.
The name of this is “initContent” callback of the jqxWindow.

Another thing if you have small amount of records then you do not need to use the virtualmode option.
For example we have demos with 30k records that work fine.

I tested this example and it seems to work fine.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[ayrus02Participant]

Hi Hristo,

Ok if I want to use jqxWindow, how can I add button like OK and Cancel button that not inside the window content?
(for example not getting scrolled with the content of the jqxWindow, and positioned on bottom right side of the jqxWindow like in jQuery UI Dialog button)

Regards,
ayrus02

[fabricebParticipant]

Hi Hristo,

thanks for your great advices.

your example works, except when you add option : isModal: true,

in this case you’ll see that menu appears BEHIND the jqxwindow.

And then you need to add a CSS hack to force z-index.

here is your example, corrected with css hack in case of modal window :
https://jsfiddle.net/mogador/rh1pu7mf/5/

best regards,

fabriceb

[Author]

Posts