[CLOSED] grid column filters - need to scroll menu!

  1. #1

    [CLOSED] grid column filters - need to scroll menu!

    How can i make the gridFilters menu scrollable - it's not behaving in the browser window (see image).

    TIA!


    Click image for larger version. 

Name:	Untitled-1.jpg 
Views:	270 
Size:	96.0 KB 
ID:	5416
    Last edited by Daniil; Jan 17, 2013 at 3:53 AM. Reason: [CLOSED]
  2. #2
    Hello!

    Try following overriding:

    Ext.override(Ext.grid.GridView, {
    	afterRenderUI: function () {
    		var grid = this.grid;
    		this.initElements();
    		Ext.fly(this.innerHd).on('click', this.handleHdDown, this);
    		this.mainHd.on({
    			scope: this,
    			mouseover: this.handleHdOver,
    			mouseout: this.handleHdOut,
    			mousemove: this.handleHdMove
    		});
    		this.scroller.on('scroll', this.syncScroll, this);
    		if (grid.enableColumnResize !== false) {
    			this.splitZone = new Ext.grid.GridView.SplitDragZone(grid, this.mainHd.dom);
    		}
    		if (grid.enableColumnMove) {
    			this.columnDrag = new Ext.grid.GridView.ColumnDragZone(grid, this.innerHd);
    			this.columnDrop = new Ext.grid.HeaderDropZone(grid, this.mainHd.dom);
    		}
    		if (grid.enableHdMenu !== false) {
    			this.hmenu = new Ext.menu.Menu({ id: grid.id + '-hctx' });
    			this.hmenu.add(
    		{ itemId: 'asc', text: this.sortAscText, cls: 'xg-hmenu-sort-asc' },
    		{ itemId: 'desc', text: this.sortDescText, cls: 'xg-hmenu-sort-desc' }
    		);
    			if (grid.enableColumnHide !== false) {
    				// Put here required height
    				this.colMenu = new Ext.menu.Menu({ id: grid.id + '-hcols-menu', maxHeight: 250, enableScrolling: true });
    				this.colMenu.on({
    					scope: this,
    					beforeshow: this.beforeColMenuShow,
    					itemclick: this.handleHdMenuClick
    				});
    				this.hmenu.add('-', {
    					itemId: 'columns',
    					hideOnClick: false,
    					text: this.columnsText,
    					menu: this.colMenu,
    					iconCls: 'x-cols-icon'
    				});
    			}
    			this.hmenu.on('itemclick', this.handleHdMenuClick, this);
    		}
    		if (grid.trackMouseOver) {
    			this.mainBody.on({
    				scope: this,
    				mouseover: this.onRowOver,
    				mouseout: this.onRowOut
    			});
    		}
    		if (grid.enableDragDrop || grid.enableDrag) {
    			this.dragZone = new Ext.grid.GridDragZone(grid, {
    				ddGroup: grid.ddGroup || 'GridDD'
    			});
    		}
    		this.updateHeaderSortState();
    	}
    });
  3. #3
    Hi everybody,

    There is a possibility to avoid override the whole afterRenderUI method.

    Example
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
     
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            for (int i = 0; i < 50; i++)
            {
                Column c = new Column()
                {
                    Header = "Test" + i,
                    DataIndex = "test"
                };
      
                this.GridPanel1.ColumnModel.Columns.Add(c);
            }
              
            if (!X.IsAjaxRequest)
            {
                Store store = this.GridPanel1.GetStore();
                 
                store.DataSource = new object[] 
                { 
                    new object[] { "test" },
                };
                 
                store.DataBind();
            }
        }
    </script>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     
     
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Ext.NET Example</title>
    
        <ext:ResourcePlaceHolder runat="server" Mode="ScriptFiles" />
      
        <script type="text/javascript">
            Ext.grid.GridView.prototype.afterRenderUI = Ext.grid.GridView.prototype.afterRenderUI.createSequence(function () {
                this.colMenu.maxHeight = 250;
                this.colMenu.enableScrolling = true;
            });
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
    
            <ext:GridPanel ID="GridPanel1" runat="server">
                <Store>
                    <ext:Store runat="server">
                        <Reader>
                            <ext:ArrayReader>
                                <Fields>
                                    <ext:RecordField Name="test" />
                                </Fields>
                            </ext:ArrayReader>
                        </Reader>
                    </ext:Store>
                </Store>                                                                        
            </ext:GridPanel>
        </form>
    </body>
    </html>
    You can organize it as custom configs if needed.
  4. #4

    Just a big thank you

    As far as I am able to see the initial issue was not actually a huge issue because there was a page scrollbar that could be used to navigate to all of the columns.
    We had a bigger issue in IE7 and IE8 when browser window is not maximized, the columns menu just blinked (showed for a piece of sec) along with the scrollbar and then dissapeared.

    Anyway this solution looks great.

    Thanks again.
  5. #5

    Mouse wheel scrolling

    Is there a way to tweak the above and make possible "mouse wheel scrolling"?
  6. #6

    If browser window is maximized top part of the menu is cut off

    Any idea how to fix this?
    Attached Thumbnails Click image for larger version. 

Name:	cutOff.png 
Views:	26 
Size:	79.2 KB 
ID:	6563  
  7. #7
    Quote Originally Posted by deejayns View Post
    Any idea how to fix this?
    Try to set smaller height.

Similar Threads

  1. [CLOSED] Grid Panel Column menu
    By FpNetWorth in forum 2.x Legacy Premium Help
    Replies: 1
    Last Post: Sep 12, 2012, 11:05 AM
  2. Replies: 3
    Last Post: Aug 01, 2012, 6:51 PM
  3. Replies: 2
    Last Post: Feb 22, 2012, 4:16 PM
  4. [CLOSED] Scroll column size in the Grid
    By majunior in forum 1.x Legacy Premium Help
    Replies: 8
    Last Post: Mar 19, 2011, 3:17 AM
  5. Replies: 16
    Last Post: Feb 23, 2011, 10:03 AM

Tags for this Thread

Posting Permissions