[CLOSED] Determine number of rows a grid can display and set that as page size

Page 1 of 2 12 LastLast
  1. #1

    [CLOSED] Determine number of rows a grid can display and set that as page size

    Is something like this possible?

    Would be a nice feature to have. AutoPageSize = true :)

    I found something at the sencha forum, but have (at this moment) no clue how to implement it using the ext.net framework:

    resize: function(grid, adjWidth, adjHeight) {
        // Factor out the height of the column headers and ensure
        // there's always at least one row.
        var headerHeight = 22;
        var rowHeight = 21;
        var contentHeight = Math.max(rowHeight + headerHeight,
                grid.getInnerHeight()) - headerHeight;
        // Always display at least one row
        var maxRowsPerGrid = Math.floor(contentHeight/rowHeight);
        var bbar = grid.getBottomToolbar();
        if( bbar.pageSize != maxRowsPerGrid ) {
            bbar.pageSize = maxRowsPerGrid;
            // Just calling "reload" on our store will use the old
            // pageSize value, gotta do this through the page bar.
            bbar.doLoad(0);
        }
    }
    Martin
    Last edited by Daniil; Nov 02, 2010 at 7:54 AM. Reason: [CLOSED]
  2. #2
    Hi Martin,

    Could you provide us with a sencha's link to investigate?
  3. #3
    Hi Daniil,

    I've found this piece of code in this thread, but I can't figure out which listener to use an how to provide the parameters:

    http://www.sencha.com/forum/showthre...amic+page+size (second message)

    Thanks for looking into this. Would be a great feature. Automatic scaling the pagesize on the height of the grid.

    Martin
  4. #4
    Hi,

    Please see the following sample (i added PanelResizer plugin for convinience testting)
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                this.BindData();
            }
        }
    
        protected void MyData_Refresh(object sender, StoreRefreshDataEventArgs e)
        {
            this.BindData();   
        }
    
        private void BindData()
        {
            var store = this.GridPanel1.GetStore();
            
            store.DataSource = this.Data;
            store.DataBind(); 
        }
    
        private object[] Data
        {
            get
            {
                DateTime now = DateTime.Now;
    
                return new object[]
                {
                    new object[] { "3m Co", 71.72, 0.02, 0.03, now },
                    new object[] { "Alcoa Inc", 29.01, 0.42, 1.47, now },
                    new object[] { "Altria Group Inc", 83.81, 0.28, 0.34, now },
                    new object[] { "American Express Company", 52.55, 0.01, 0.02, now },
                    new object[] { "American International Group, Inc.", 64.13, 0.31, 0.49, now },
                    new object[] { "AT&T Inc.", 31.61, -0.48, -1.54, now },
                    new object[] { "Boeing Co.", 75.43, 0.53, 0.71, now },
                    new object[] { "Caterpillar Inc.", 67.27, 0.92, 1.39, now },
                    new object[] { "Citigroup, Inc.", 49.37, 0.02, 0.04, now },
                    new object[] { "E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28, now },
                    new object[] { "Exxon Mobil Corp", 68.1, -0.43, -0.64, now },
                    new object[] { "General Electric Company", 34.14, -0.08, -0.23, now },
                    new object[] { "General Motors Corporation", 30.27, 1.09, 3.74, now },
                    new object[] { "Hewlett-Packard Co.", 36.53, -0.03, -0.08, now },
                    new object[] { "Honeywell Intl Inc", 38.77, 0.05, 0.13, now },
                    new object[] { "Intel Corporation", 19.88, 0.31, 1.58, now },
                    new object[] { "International Business Machines", 81.41, 0.44, 0.54, now },
                    new object[] { "Johnson & Johnson", 64.72, 0.06, 0.09, now },
                    new object[] { "JP Morgan & Chase & Co", 45.73, 0.07, 0.15, now },
                    new object[] { "McDonald\"s Corporation", 36.76, 0.86, 2.40, now },
                    new object[] { "Merck & Co., Inc.", 40.96, 0.41, 1.01, now },
                    new object[] { "Microsoft Corporation", 25.84, 0.14, 0.54, now },
                    new object[] { "Pfizer Inc", 27.96, 0.4, 1.45, now },
                    new object[] { "The Coca-Cola Company", 45.07, 0.26, 0.58, now },
                    new object[] { "The Home Depot, Inc.", 34.64, 0.35, 1.02, now },
                    new object[] { "The Procter & Gamble Company", 61.91, 0.01, 0.02, now },
                    new object[] { "United Technologies Corporation", 63.26, 0.55, 0.88, now },
                    new object[] { "Verizon Communications", 35.57, 0.39, 1.11, now },
                    new object[] { "Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63, now }
                };
            }
        }
    </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>Simple Array Grid With Paging and Remote Reloading - Ext.NET Examples</title>
        <link href="../../../../resources/css/examples.css" rel="stylesheet" type="text/css" />
    
        <script type="text/javascript">
            var template = '<span style="color:{0};">{1}</span>';
    
            var change = function (value) {
                return String.format(template, (value > 0) ? "green" : "red", value);
            };
    
            var pctChange = function (value) {
                return String.format(template, (value > 0) ? "green" : "red", value + "%");
            };
            
            function applyPageSize(grid, adjWidth, adjHeight) {            
                var headerHeight = 22;
                var rowHeight = 21;
                var contentHeight = Math.max(rowHeight + headerHeight,
                        grid.getInnerHeight()) - headerHeight;
    
                var maxRowsPerGrid = Math.floor(contentHeight/rowHeight);
                var bbar = grid.getBottomToolbar();
                if( bbar.pageSize != maxRowsPerGrid ) {
                    bbar.pageSize = maxRowsPerGrid;
                    bbar.doLoad(0);
                }
            }
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
             
            <ext:GridPanel
                ID="GridPanel1"
                runat="server" 
                StripeRows="true"
                Title="Array Grid" 
                Width="600" 
                Height="300"
                AutoExpandColumn="Company">
                <Store>
                    <ext:Store runat="server" OnRefreshData="MyData_Refresh">
                        <Reader>
                            <ext:ArrayReader>
                                <Fields>
                                    <ext:RecordField Name="company" />
                                    <ext:RecordField Name="price" Type="Float" />
                                    <ext:RecordField Name="change" Type="Float" />
                                    <ext:RecordField Name="pctChange" Type="Float" />
                                    <ext:RecordField Name="lastChange" Type="Date" />
                                </Fields>
                            </ext:ArrayReader>
                        </Reader>
                    </ext:Store>
                </Store>
                <ColumnModel runat="server">
                    <Columns>
                        <ext:RowNumbererColumn />
                        <ext:Column ColumnID="Company" Header="Company" Width="160" DataIndex="company" />
                        <ext:Column Header="Price" Width="75" DataIndex="price">
                            <Renderer Format="UsMoney" />
                        </ext:Column>
                        <ext:Column Header="Change" Width="75" DataIndex="change">
                            <Renderer Fn="change" />
                        </ext:Column>
                        <ext:Column Header="Change" Width="75" DataIndex="pctChange">
                            <Renderer Fn="pctChange" />
                        </ext:Column>
                        <ext:DateColumn Header="Last Updated" Width="85" DataIndex="lastChange" Format="H:mm:ss" />
                    </Columns>
                </ColumnModel>
                <SelectionModel>
                    <ext:RowSelectionModel runat="server" />
                </SelectionModel>
                <LoadMask ShowMask="true" />
                <BottomBar>
                     <ext:PagingToolbar ID="PagingToolbar1" runat="server">                    
                    </ext:PagingToolbar>
                </BottomBar>
                
                <Plugins>
                    <ext:PanelResizer runat="server" />
                </Plugins>
                
                <Listeners>
                    <Resize Handler="applyPageSize(this)" Buffer="250" />
                </Listeners>
            </ext:GridPanel>
        </form>
    </body>
    </html>
  5. #5
    Superb Vlad !

    This is what I'm looking for. Can this be combined with Layout="fit' ?
    So when having a grid in a (desktop)window. That the grid has always a total fit of rows. Also when resizing the window ?

    Also ..is it an idea to make this feature an atribute of the gridpanel itself ? Something like autopagesize="true" ? Just a thought

    Martin
  6. #6
    Extended the example with a simple Viewport Layout="fit"

    The grid is always totally filled with rows (depending on the number of rows ofcourse. The resize plugin isn't necessary anymore)

    <%@ Page Language="C#" %>
     
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
     
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                this.BindData();
            }
        }
     
        protected void MyData_Refresh(object sender, StoreRefreshDataEventArgs e)
        {
            this.BindData();   
        }
     
        private void BindData()
        {
            var store = this.GridPanel1.GetStore();
     
            store.DataSource = this.Data;
            store.DataBind(); 
        }
     
        private object[] Data
        {
            get
            {
                DateTime now = DateTime.Now;
     
                return new object[]
                {
                    new object[] { "3m Co", 71.72, 0.02, 0.03, now },
                    new object[] { "Alcoa Inc", 29.01, 0.42, 1.47, now },
                    new object[] { "Altria Group Inc", 83.81, 0.28, 0.34, now },
                    new object[] { "American Express Company", 52.55, 0.01, 0.02, now },
                    new object[] { "American International Group, Inc.", 64.13, 0.31, 0.49, now },
                    new object[] { "AT&T Inc.", 31.61, -0.48, -1.54, now },
                    new object[] { "Boeing Co.", 75.43, 0.53, 0.71, now },
                    new object[] { "Caterpillar Inc.", 67.27, 0.92, 1.39, now },
                    new object[] { "Citigroup, Inc.", 49.37, 0.02, 0.04, now },
                    new object[] { "E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28, now },
                    new object[] { "Exxon Mobil Corp", 68.1, -0.43, -0.64, now },
                    new object[] { "General Electric Company", 34.14, -0.08, -0.23, now },
                    new object[] { "General Motors Corporation", 30.27, 1.09, 3.74, now },
                    new object[] { "Hewlett-Packard Co.", 36.53, -0.03, -0.08, now },
                    new object[] { "Honeywell Intl Inc", 38.77, 0.05, 0.13, now },
                    new object[] { "Intel Corporation", 19.88, 0.31, 1.58, now },
                    new object[] { "International Business Machines", 81.41, 0.44, 0.54, now },
                    new object[] { "Johnson & Johnson", 64.72, 0.06, 0.09, now },
                    new object[] { "JP Morgan & Chase & Co", 45.73, 0.07, 0.15, now },
                    new object[] { "McDonald\"s Corporation", 36.76, 0.86, 2.40, now },
                    new object[] { "Merck & Co., Inc.", 40.96, 0.41, 1.01, now },
                    new object[] { "Microsoft Corporation", 25.84, 0.14, 0.54, now },
                    new object[] { "Pfizer Inc", 27.96, 0.4, 1.45, now },
                    new object[] { "The Coca-Cola Company", 45.07, 0.26, 0.58, now },
                    new object[] { "The Home Depot, Inc.", 34.64, 0.35, 1.02, now },
                    new object[] { "The Procter & Gamble Company", 61.91, 0.01, 0.02, now },
                    new object[] { "United Technologies Corporation", 63.26, 0.55, 0.88, now },
                    new object[] { "Verizon Communications", 35.57, 0.39, 1.11, now },
                    new object[] { "Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63, now }
                };
            }
        }
    </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 id="Head1" runat="server">
        <title>Simple Array Grid With Paging and Remote Reloading - Ext.NET Examples</title>
        <link href="../../../../resources/css/examples.css" rel="stylesheet" type="text/css" />
     
        <script type="text/javascript">
            var template = '<span style="color:{0};">{1}</span>';
     
            var change = function (value) {
                return String.format(template, (value > 0) ? "green" : "red", value);
            };
     
            var pctChange = function (value) {
                return String.format(template, (value > 0) ? "green" : "red", value + "%");
            };
     
            function applyPageSize(grid, adjWidth, adjHeight) {            
                var headerHeight = grid.el.child(".x-grid3-header").getHeight(); //header height;
                var rowHeight = Ext.fly(grid.getView().getRow(0)).getHeight(); //row height;
                var contentHeight = Math.max(rowHeight + headerHeight,
                        grid.getInnerHeight()) - headerHeight;
     
                var maxRowsPerGrid = Math.floor(contentHeight/rowHeight);
                var bbar = grid.getBottomToolbar();
                if( bbar.pageSize != maxRowsPerGrid ) {
                    bbar.pageSize = maxRowsPerGrid;
                    bbar.doLoad(0);
                }
            }
        </script>
    </head>
    <body>
        <form id="Form1" runat="server">
            <ext:ResourceManager id="ResourceManager1" runat="server" />
            <ext:viewport id="ViewPort1" runat="server" layout="fit">
            <items>
            <ext:GridPanel
                ID="GridPanel1"
                runat="server"
                StripeRows="true"
                Title="Array Grid"
                Width="600"
                Height="300"
                AutoExpandColumn="Company"
                >
                <Store>
                    <ext:Store id="Store1" runat="server" OnRefreshData="MyData_Refresh">
                        <Reader>
                            <ext:ArrayReader>
                                <Fields>
                                    <ext:RecordField Name="company" />
                                    <ext:RecordField Name="price" Type="Float" />
                                    <ext:RecordField Name="change" Type="Float" />
                                    <ext:RecordField Name="pctChange" Type="Float" />
                                    <ext:RecordField Name="lastChange" Type="Date" />
                                </Fields>
                            </ext:ArrayReader>
                        </Reader>
                    </ext:Store>
                </Store>
                <ColumnModel id="ColumnModel1" runat="server">
                    <Columns>
                        <ext:RowNumbererColumn />
                        <ext:Column ColumnID="Company" Header="Company" Width="160" DataIndex="company" />
                        <ext:Column Header="Price" Width="75" DataIndex="price">
                            <Renderer Format="UsMoney" />
                        </ext:Column>
                        <ext:Column Header="Change" Width="75" DataIndex="change">
                            <Renderer Fn="change" />
                        </ext:Column>
                        <ext:Column Header="Change" Width="75" DataIndex="pctChange">
                            <Renderer Fn="pctChange" />
                        </ext:Column>
                        <ext:DateColumn Header="Last Updated" Width="85" DataIndex="lastChange" Format="H:mm:ss" />
                    </Columns>
                </ColumnModel>
                <SelectionModel>
                    <ext:RowSelectionModel id="RowSelectionModel1" runat="server" />
                </SelectionModel>
                <LoadMask ShowMask="true" />
                <BottomBar>
                     <ext:PagingToolbar ID="PagingToolbar1" runat="server">                    
                    </ext:PagingToolbar>
                </BottomBar>
                 <Listeners>
                    <Resize Handler="applyPageSize(this)" Buffer="250" />
                </Listeners>
            </ext:GridPanel>
            </items>
            </ext:viewport>
        </form>
    </body>
    </html>
  7. #7
    One small extra question

    Is it possible to determine the rendered rowheight and headerheight by code ?

    Martin
  8. #8
    Hi Martin,

    Please use the following code
    Ext.fly(GridPanel1.getView().getRow(0)).getHeight() //row height
    Ext.fly(GridPanel1.getView().getHeaderCell(0)).getHeight() // header row height
    Do you use additional header rows?
  9. #9
    Quote Originally Posted by Daniil View Post
    Hi Martin,
    Do you use additional header rows?
    Thankx Daniil.

    I use filters, but that's the headerrow isn't ?

    Martin
  10. #10
    This should work in all cases.
    GridPanel1.el.child(".x-grid3-header").getHeight()
Page 1 of 2 12 LastLast

Similar Threads

  1. [CLOSED] Navigate to a page on a grid using the page number
    By optibase in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Aug 06, 2012, 5:47 PM
  2. Grid Panel page size automatically increases
    By Vaishali in forum 1.x Help
    Replies: 1
    Last Post: Feb 22, 2012, 12:37 AM
  3. Replies: 1
    Last Post: Jan 08, 2012, 5:10 AM
  4. [CLOSED] Grid Page Number
    By vali1993 in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Oct 14, 2010, 12:46 PM
  5. [CLOSED] Display modal while grid/page loads
    By bfolger in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Aug 26, 2009, 7:05 PM

Tags for this Thread

Posting Permissions