Grid Filtering contained in Window

[dishmannParticipant]

Not sure if this is the proper forum….
My first look at the filtering and sorting capabilities of jqxGrid. Stuff is awesome. But in this application of these grid features I have a challenge. I have embedded my grid inside a window. I will use pictures to try to explain.

This is the Item List Window being stood up as viewed in the Chrome browser. (The same happens in IE)

This is a Web Forms app (aspx) with backend data setup. Pretty simple (thanks to jqWidgets) most of the js/jqx code is cut and pasted from the demo example code. OK so…..

Let’s click one of the filter buttons on the grid header. The picture below show the results of clicking the “Vendor” column header.

Notice that the Popup for the filter appears on the underlying page. (I am not sure if Popup is accurate terminology but accept it for now please).

Thus the end user cannot interact with the filter. (The filter popup eventually goes away based on other events in the window as you probably know.) I can easily turn this modal Window into a Page. Still I would like a modal window because it follows the design of a corresponding Win32 App.

Is this a valid issue ? Is there something I can refer to as an example to help me work around this? Thanks.

[StanislavParticipant]

Hello dishmann,

Your images do not load.
But from your explanation, I managed to create an example(which I don’t know how accurate it is)

I have a window with a jqxGrid inside of it.
The grid has filterable: true.

When I try to open the filter menu, it is shown below the window.(this is the issue you mentioned right?)
Changing the z-index of that menu fixes the view problem(makes the menu go above the window, and be visible when opened)

If this is incorrect, please try resending the images, or send us a more detailed explanation(maybe even a fiddle), so we can test a more accurate example.

Best Regards,
Stanislav

jQWidgets Team
http://www.jqwidgets.com/

[dishmannParticipant]

Hi Stanislav,

Sorry… I returned the images so you can see them. But it sounds like you are correct in your understanding.

(I took the images out because I started to dig in using/learning the filterrow.html example. Which is also very cool.)

my gird props for filtering and sorting are:

filterable: true,
sortable: true,
autoshowfiltericon: false,

I get what you are saying but need more insight on the mechanics of setting the z-index of the menu ?
I am guessing I set the z-index on the css side ?

If so perhaps a hint. The class names in the “grid” styling and appearance page with ‘menu’ in the class name are:
‘jqx-grid-column-menubutton’. I don’t think I’m in the same place you are referring to.

Thanks for you help.

Dishmann

P.S. I might try a fiddle if I need to (it would be my first time and I guess I need to learn that as well).

[StanislavParticipant]

Hello dishmann,

Yes the z-index is set in the CSS.

.jqx-menu {
   z-index: 9999;
}

This should be what you need to fix your issue.
Try opening the menu, and inspecting it, to see its classes.

Best Regards,
Stanislav

jQWidgets Team
http://www.jqwidgets.com/

[dishmannParticipant]

Thanks Stanislav.

That worked.

dishmann

[Author]

Posts