Custom paging in grid has issues

[getgopi1]

In the Paging Toolbar of a GridPanel, I have a ComboBox set up to display four items:

25
50
100
ALL

The idea is to allow Users to select the number of rows they would like to see per page. The default number of rows or PageSize is 50.

Issue 1: The moment I touch paging related code during runtime, the browser (FireFox and IE) starts to hang and then run slowly.

Issue 2: Also the paging display "Page X of Y" becomes incorrect:



Here is the function that I call to update paging when the User selects a value from the ComboBox (called ddnRowsPerPage):

        function fnRedoPaging() {
            rowsPerPage = ddnRowsPerPage.getValue();

            if (rowsPerPage == "ALL") {
                rowsPerPage = strResults.totalLength;
            }
            //debugger;
            strResults.start = 0;
            strResults.limit = rowsPerPage;
            strResults.applyPaging();
            
            pgTbr.pageSize = rowsPerPage;
            pgTbr.doLoad(pgTbr.cursor);
        };

And here is the GridPanel and Store rendering code:

    <ext:Store ID="strResults" IDMode="Static" runat="server" OnSubmitData="strResults_Submit">   
        <Reader>
            <ext:ArrayReader>
                <Fields>
                </Fields>
            </ext:ArrayReader>
        </Reader>
        <AutoLoadParams>
            <ext:Parameter Name="start" Value="0" Mode="Raw"/>
            <ext:Parameter Name="limit" Value="50" Mode="Raw"/>
        </AutoLoadParams> 
        <DirectEventConfig IsUpload="true"></DirectEventConfig>
    </ext:Store>
    <ext:GridPanel ID="grdResults" runat="server" StoreID="strResults" Header="false" MonitorResize="true">
        <TopBar>
            <ext:PagingToolbar ID="pgTbr" runat="server" PageSize="50">
                <Items>
                    <ext:ToolbarSeparator ID="sr" runat="server"></ext:ToolbarSeparator>
                    <ext:ComboBox ID="ddnRowsPerPage" runat="server" Editable="false" FieldLabel="Rows Per Page"
                        Width="175" ForceSelection="true" SelectedIndex="1" TriggerAction="All"
                        FireSelectOnLoad="True" SelectOnFocus="true">
                        <Listeners>
                            <Select Handler="fnRedoPaging()" />
                        </Listeners>
                        <Items>
                            <ext:ListItem Text="25" Value="25" />
                            <ext:ListItem Text="50" Value="50" />
                            <ext:ListItem Text="100" Value="100" />
                            <ext:ListItem Text="ALL" Value="ALL" />
                        </Items>
                    </ext:ComboBox>
                    <ext:ToolbarSeparator ID="tbrSep" runat="server"></ext:ToolbarSeparator>
                    <ext:Button ID="btnExcel" runat="server" Text="To Excel" Icon="PageExcel">
                        <Listeners>
                            <Click Handler="exportData('xls');" />
                        </Listeners>
                    </ext:Button>                    
                 </Items>
            </ext:PagingToolbar>
        </TopBar>
        <BottomBar>

        </BottomBar>
        <LoadMask ShowMask="true" Msg="Loading Results..." />
    </ext:GridPanel>

[Vladimir]

Hi,

Convert combo value to the int

rowsPerPage = parseInt(ddnRowsPerPage.getValue());

[getgopi1]

Hi Vlad, I can't convert the ComboBox value to INT because one of its values will be "ALL". But I did try using the parseInt function further down the code through a new variable like so:

        function fnRedoPaging() {
            rowsPerPage = ddnRowsPerPage.getValue();

            if (rowsPerPage == "ALL") {
                rowsPerPage = strResults.totalLength;
            }

            NewVariable = parseInt(rowsPerPage); // new code
            
            //debugger;
            strResults.start = 0;
            strResults.limit = NewVariable;
            strResults.applyPaging();

            pgTbr.pageSize = NewVariable;
            pgTbr.doLoad(pgTbr.cursor);
        };

This seems to have fixed Issue 1 and processing is fast enough. But Issue 2 remains. Also now, once I make a selection in the ComboBox, I am always seeing no more than 50 rows picked up by the Store.

I tried searching for some examples on the web as well as on this forum for similar examples but couldn't find any.

You guys are doing an outstanding job with the component work, by the way :cool:

[getgopi1]

The following code seems to have fixed the issue:

        function fnRedoPaging() {
            
            var rowsPerPage = ddnRowsPerPage.getValue();

            if (rowsPerPage == "ALL") {
                rowsPerPage = strResults.totalLength;
            }
            var NewVariable = parseInt(rowsPerPage);
            
            strResults.start = 1;
            strResults.limit = NewVariable;
            pgTbr.pageSize = NewVariable;
            pgTbr.doLoad(pgTbr.cursor);
            pgTbr.moveFirst();
        };

Everything renders correctly. The paging works as expected.

BUT...

Now I have a memory issue and both FireFox and IE crash when I deal with data sets containing close to 10000 rows. I can see the memory usage climb steadily in Task Manager as soon as I select the "ALL" option from the dropdown. However, smaller data sets in the range of 1000 or so work fine.

[Vladimir]

Hi,

GridPanel is not designed to show such amount of the data

[getgopi1]

I think the ultimate solution for a situation like this would be a "load on demand" type of capability. I think that this is what local paging with remote data may have been intended to do. However, in my case, I need to display the results in a single page when the User selects the "ALL" option.

So ideally, when the User wants to see all data, I could use remote paging to load, say, 1000 rows. Then when the User scrolls down and gets close to the 1000th row, load another 1000 rows. I used such functionality during my client/server development days with the FarPoint Spread grid ActiveX control. Here is an example of that grid from their website...demonstrated in a web page actually:

http://www.fpoint.com/netproducts/sp...dondemand.aspx

Could something like this be currently done with the Ext.Net GridPanel? Thanks!

[Vladimir]

Hi,

I suggest to use this extension
http://www.sencha.com/forum/showthre...light=LiveGrid

Also, why paging is bad solution? Are you able to analyze 10000 rows at once?

[getgopi1]

Vlad, some Users do want to use paging. Others, however, want to be able to scroll down to view all rows in a single page. If that is what they would like to do, it needs to be accomodated.

I will check out the link you provided. Right now, we are attempting to use a Listener like BodyScroll to see if we can mimic the "Load on demand" capability. Going forward, it would be nice if the GridPanel exposed something like a VirtualMode property. Thanks.

[eljackpot]

Hi Vlad....

I have a doubt....

When using pagind grid whose data source is for example 5000 or 10000 or 100 000 records. The charging time of the first page will always be the same?

Another question:

When I assign the datasource to the grid, loads all records in the client ? Beyond that does not show ?

Thanks...... sorry for my english :)