[CLOSED] Question on grid columns show/hide check list panel

[susanz]

Hi Fabricio,

On the attached desktop screen, one of my users has many columns in a grid. She tried to show/hide some columns, but cannot see the bottom of the column list.

In order to keep all grid windows inside the desktop, my current desktop taskbar z-index is set to 99990. How do I make the user be able to see the full column checklist? Can I config paging on this checklist panel? Or maybe change it's z-index to be > 9990?
Please advise.

Thanks in advance.

-Susan

[fabricio.murta]

Hello Susan!

This should help making the change affect only and only grids you explicitly specify which target zIndex you want for the menus.

First, add this override to the column header trigger's click:

Ext.define("GridHeaderMenuZIndex", {
    override: 'Ext.grid.header.Container',
    onHeaderTriggerClick: function (header, e, t) {
        var me = this,
            fixZIndex = !me.getMenu().rendered,
            retVal = me.callParent(arguments);

        if (fixZIndex && !me.getMenu().hidden) {
            me.getMenu().zIndexManager.setBase(me.forceZIndexAs);
        }

        return retVal;
    }
});

Then give the column model of the grid a value to ForceZIndexAs with:

<ColumnModel ForceZIndexAs="99050">

You'd probably have just a <ColumnModel> block without properties in your grid, or may have specified it in some way else. It's up to you: you may identify how you define your column model (if not like above) and add the custom setting, or just hardcode it in the override (which will then imply the column menu z-index to any grid panel in any page in which this override is added.

The value the menu gets as zIndex by default is whatever is in Ext.WindowManager.zseed at the moment the window is displayed. So you might instead of all that just add this script code:

Ext.onReady(function () { Ext.WindowManager.setBase(99050); });

But it will imply anything added could go above your taskbar -- which is probably not the case as you forced it a high z-index as a way to disallow anything (or well, most things) to show on top of the task bar.

Forcing z-index may not always be the best choice, but it should take a considerable research to find a way friendly to Ext JS z-index manager. So if you keep having trouble with z-index on that page, you may consider spending time understanding how it works and try to use it to your advantage.

Hope this helps!

[susanz]

Awesome! It works!
Really appreciate!
Thanks

[fabricio.murta]

Glad it helped, thanks for the feedback!

Remember to add a commend like "this may break in a new Ext.NET release" because that's basically an extension and there's no guarantee a change in private code in Ext JS won't break it. (it is not very likely the way the override is written, though).

It was written in Ext.NET 5, so if it works for you back in 4, at least until another big Ext JS change this should work.

Assuming this is done, marking as closed.