[CLOSED] Store Page size hanging when pagsize >= 20

[Digital.Dynamics]

Hi,

We have an issue when binding a store in gridpanel when the count of the rows are over 20. The gridpanel is using pageproxy and we bind on server side. In version 2.0 every thing was working good, but when deploying with version 2.1 we faced this issue. As i wrote to you if the total rows in server side is less than 20 the gridpanel is showing fine, otherwise it hangs with the loading mask.

<ext:GridPanel ID="GridPanelJobs" Region="Center" runat="server" Title="Jobs"
                ForceFit="true" AutoScroll="true" Frame="true" Split="true" ColumnLines="true">
                <Store>
                    <ext:Store ID="StoreJobs" PageSize="30" runat="server" LeadingBufferZone="0"
                        AutoSync="false" OnReadData="Store_RefreshData" RemoteSort="true" AutoDataBind="true">
                        <Model>
                            <ext:Model ID="Model2" runat="server" IDProperty="Job_ID">
                                <Fields>
                                    <ext:ModelField Name="Job_ID" />
                                    <ext:ModelField Name="Job_Name_Ar" />
                                    <ext:ModelField Name="Job_Name_En" />
                                    <ext:ModelField Name="Ordering" />
                                    <ext:ModelField Name="Department_ID" />
                                    <ext:ModelField Name="Time_IN_H" />
                                    <ext:ModelField Name="Time_IN_M" />
                                    <ext:ModelField Name="Time_Out_H" />
                                    <ext:ModelField Name="Time_Out_M" />
                                    <ext:ModelField Name="Late_In_H" />
                                    <ext:ModelField Name="Late_In_M" />
                                    <ext:ModelField Name="Late_In_H2" />
                                    <ext:ModelField Name="Late_In_M2" />
                                    <ext:ModelField Name="IsAttReq" Type="Boolean" UseNull="true" />
                                </Fields>
                            </ext:Model>
                        </Model>
                        <AutoLoadParams>
                            <ext:Parameter Name="start" Value="0" Mode="Raw" />
                            <ext:Parameter Name="limit" Value="30" Mode="Raw" />
                        </AutoLoadParams>
                        <Proxy>
                            <ext:PageProxy />
                        </Proxy>
                        <Sorters>
                            <ext:DataSorter Property="Job_Name_En" Direction="ASC" />
                        </Sorters>
                    </ext:Store>
                </Store>
                <BottomBar>
                    <ext:PagingToolbar ID="PagingToolBar1" runat="server" StoreID="StoreJobs" DisplayInfo="true"
                        DisplayMsg="Displaying Jobs {0} - {1} of {2}" />
                </BottomBar>
            </ext:GridPanel>

[Daniil]

Hi,

I am unable to reproduce the problem with the sample below.

Could you provide a full example, please?

Example

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<%@ Import Namespace="System.Collections.Generic" %>

<script runat="server">
    public List<object> MyData = new List<object> 
    { 
        new { test = "test1" },
        new { test = "test2" },
        new { test = "test3" },
        new { test = "test4" },
        new { test = "test5" },
        new { test = "test6" },
        new { test = "test7" },
        new { test = "test8" },
        new { test = "test9" }
    };

    protected void Store_ReadData(object sender, StoreReadDataEventArgs e)
    {
        List<object> data = new List<object>();
        var limit = e.Limit;
        if ((e.Start + limit) > 100)
        {
            limit = 100 - e.Start;
        }
        for (int i = e.Start; i < e.Start + limit; i++)
        {
            data.Add(new { test = "test" + i });      
        }
        
        e.Total = 100;
        (sender as Store).DataSource = data;
    }
</script>

<!DOCTYPE html>

<html>
<head runat="server">
    <title>Ext.NET v2 Example</title>

</head>
<body>
    <ext:ResourceManager runat="server" />

    <ext:GridPanel runat="server">
        <Store>
            <ext:Store runat="server" OnReadData="Store_ReadData" PageSize="30">
                <Model>
                    <ext:Model runat="server">
                        <Fields>
                            <ext:ModelField Name="test" />
                        </Fields>
                    </ext:Model>
                </Model>
                <Proxy>
                    <ext:PageProxy>
                        <Reader>
                            <ext:JsonReader />
                        </Reader>
                    </ext:PageProxy>
                </Proxy>
            </ext:Store>
        </Store>
        <ColumnModel runat="server">
            <Columns>
                <ext:Column runat="server" Text="Test" DataIndex="test" />
            </Columns>
        </ColumnModel>
        <BottomBar>
            <ext:PagingToolbar runat="server" />
        </BottomBar>
    </ext:GridPanel>
</body>
</html>

[Digital.Dynamics]

Hi, please check this full sample .

We want just to take your attention with the 2 following points :

1. with bottom bar : the gridpanel is showing fine with the autoload parameter "Limit" set below 22"
2. Without bottom bar : the gridpanel is showing fine if we set the autoload param"limit" below 29.

As is informed before you that was working fine in 2.0. We had this issue in 2.1

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<%@ Import Namespace="System.Collections.Generic" %>
<%@ Import Namespace="System.Linq" %>
<%@ Import Namespace="System" %>
<%@ Import Namespace="System.Web" %>
<%@ Import Namespace="System.Web.UI" %>
<%@ Import Namespace="System.Web.UI.WebControls" %>
<%@ Import Namespace="Ext.Net" %>
<%@ Import Namespace="System.Text" %>
<%@ Import Namespace="Newtonsoft.Json.Linq" %>
<%@ Import Namespace="Newtonsoft.Json" %>
<%@ Import Namespace="System.Data" %>


<script runat="server">   

    public static string operationID;
    public static int jobID;
    int start;
    int limit;    


    public List<object> Jobs()
    { 
        List<object> JobsDemo = new List<object>();
        for (int i = 0; i < 100; i++)
        {
            JobsDemo.Add(new { Job_ID = "Job"+i, Job_Name_Ar = "Job-Ar"+i,  Job_Name_En ="Job-Ar" +i, Ordering = i});     
        }       
        
        return JobsDemo;      
    }
    
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!X.IsAjaxRequest)
        {
            
            //Filling Datasource for Department Combobx 
            //List<Jobs_Departments> eHR_Departement = Manager_HR.GetJobsDepartmentAll(dataContext);
            //if (eHR_Departement != null)
            //{
            //    StoreDepartment.DataSource = eHR_Departement.ToList();
            //    StoreDepartment.DataBind();
            //}
            
            
            DataSorter[] dataSorter = new DataSorter[1];
            dataSorter[0] = new DataSorter();
            dataSorter[0].Property = this.StoreJobs.Sorters[0].Property;
            dataSorter[0].Direction = this.StoreJobs.Sorters[0].Direction;
            limit = this.StoreJobs.PageSize;
            LinqSelecting(ref start, ref limit, dataSorter);
        }
    }

    protected void Store_RefreshData(object sender, StoreReadDataEventArgs e)
    {
        start = e.Start;
        limit = e.Limit;
        LinqSelecting(ref start, ref limit, e.Sort);
    }

    protected void ShowGridDetail(object sender, DirectEventArgs e)
    {
        jobID = Convert.ToInt32(e.ExtraParams["recordId"]);
        string command = e.ExtraParams["commandName"];

        
    }

    protected void SaveGridData(object sender, DirectEventArgs e)
    {
       
    }

    protected void ExportGrid(object sender, DirectEventArgs e)
    {
        
    }

    [DirectMethod]
    public void DoYes()
    {

        
        
    }

    [DirectMethod]
    public void DoNo()
    {

    }

    protected void LinqSelecting(ref int startRow, ref int limitRow, DataSorter[] dataSorter)
    { 
        List<object> query =
            (from lineJobs in Jobs() 
             select lineJobs).ToList<object>();

       
       
        //default case (all header fields are empty)
       
        {
            (this.StoreJobs.Proxy[0] as PageProxy).Total = query.Count();
            query = query.Skip(startRow).Take(limitRow).ToList();
            StoreJobs.DataSource = query.ToList();
            StoreJobs.DataBind();
        }
    }
</script>
<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
    <title>Jobs v2 Example</title>
</head>
<body>
    <ext:ResourceManager ID="ResourceManager1" runat="server" />
    <ext:Viewport ID="ViewPortJobs" runat="server" Layout="BorderLayout">
        <Bin>
            <ext:Store ID="StoreDepartment" runat="server">
                <Model>
                    <ext:Model ID="Model1" runat="server" IDProperty="Department_ID">
                        <Fields>
                            <ext:ModelField Name="Department_ID" />
                            <ext:ModelField Name="Department" />
                            <ext:ModelField Name="Department_En" />
                            <ext:ModelField Name="Department_Ar" />
                        </Fields>
                    </ext:Model>
                </Model>
            </ext:Store>
        </Bin>
        <Items>
            <ext:GridPanel ID="GridPanelJobs" Region="Center" runat="server" Title="Jobs"
                ForceFit="true" AutoScroll="true" Frame="true" Split="true" ColumnLines="true">
                <Store>
                    <ext:Store ID="StoreJobs" PageSize="30" runat="server" AutoSync="false" OnReadData="Store_RefreshData"
                        RemoteSort="false" AutoDataBind="false">
                        <Model>
                            <ext:Model ID="Model2" runat="server" IDProperty="Job_ID">
                                <Fields>
                                    <ext:ModelField Name="Job_ID" />
                                    <ext:ModelField Name="Job_Name_Ar" />
                                    <ext:ModelField Name="Job_Name_En" />
                                    <ext:ModelField Name="Ordering" />                                   
                                </Fields>
                            </ext:Model>
                        </Model>
                        <AutoLoadParams>
                            <ext:Parameter Name="start" Value="0" Mode="Raw" />
                            <ext:Parameter Name="limit" Value="23" Mode="Raw" />
                        </AutoLoadParams>
                        <Proxy>
                            <ext:PageProxy>
                                <Reader>
                                    <ext:JsonReader />
                                </Reader>
                            </ext:PageProxy>
                        </Proxy>
                        <Sorters>
                            <ext:DataSorter Property="Job_ID" Direction="ASC" />
                        </Sorters>
                    </ext:Store>
                </Store>
                
                <TopBar>
                    <ext:Toolbar ID="Toolbar1" runat="server">
                        <Items>
                            <ext:Button ID="BtnInsertRecord" runat="server" Text="Add Job" Icon="Add" Disabled="false"
                                Visible="true">                                
                            </ext:Button>
                            <ext:Button ID="BtnDeleteRecord" runat="server" Text="Remove Job" Icon="Delete" Disabled="true"
                                Visible="false">                                
                            </ext:Button>
                            <ext:Button ID="BtnRefresh" runat="server" Text="Refresh"
                                Icon="Reload">                                
                            </ext:Button>
                            <ext:ToolbarFill />
                            <ext:Button ID="BtnSaveRecord" runat="server" Text="<%$ Resources:ParadigmMres, msgSave %>"
                                Icon="Disk" Hidden="true">
                                <DirectEvents>
                                    <Click OnEvent="SaveGridData">
                                        <EventMask Msg="Saving..." ShowMask="true" />
                                        <ExtraParams>
                                            <ext:Parameter Mode="Raw" Name="recordsValues" Value="Ext.encode(#{GridPanelJobs}.getRowsValues())">
                                            </ext:Parameter>
                                        </ExtraParams>
                                    </Click>
                                </DirectEvents>
                            </ext:Button>
                            <ext:Hidden ID="hdnMenuItemClicked" runat="server" />
                        </Items>
                    </ext:Toolbar>
                </TopBar>
                <SelectionModel>
                    <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" />
                </SelectionModel>
                <ColumnModel ID="ColumnModel1" runat="server">
                    <Columns>
                        <ext:RowNumbererColumn ID="RowNumbererColumn1" runat="server" Text="#" />
                        <ext:CommandColumn runat="server" Width="15" ID="EditColumn">
                            <Commands>
                                <ext:GridCommand Icon="NoteEdit" CommandName="Edit" ToolTip-Text="Edit" Disabled="false">
                                </ext:GridCommand>
                            </Commands>
                            
                        </ext:CommandColumn>
                        <ext:Column runat="server" ID="Job_ID" Text="Job_ID" DataIndex="Job_ID" Sortable="true"
                            Hidden="true">
                        </ext:Column>
                        <ext:Column runat="server" ID="Job_Name_Ar" Text="Job_Name_Ar" Width="105" Align="Right"
                            DataIndex="Job_Name_Ar">                            
                            <Editor>
                                <ext:TextField ID="txfJob_Name_Ar" runat="server" AllowBlank="false">
                                </ext:TextField>
                            </Editor>
                        </ext:Column>
                        <ext:Column runat="server" ID="Job_Name_En" Text="Job_Name_En" Width="105" DataIndex="Job_Name_En"
                            Sortable="true">                            
                            <Editor>
                                <ext:TextField ID="txfJob_Name_En" runat="server" AllowBlank="false">
                                </ext:TextField>
                            </Editor>
                        </ext:Column>                        
                        <ext:Column runat="server" ID="Ordering" Text="Ordering" Width="45" DataIndex="Ordering"
                            Sortable="true" Align="Center">
                            <Editor>
                                <ext:NumberField ID="nbfOrdering" runat="server" />
                            </Editor>
                        </ext:Column>
                        <ext:CommandColumn ID="DeleteColumn" runat="server" Width="30" Align="Center" ButtonAlign="Center">
                            <Commands>
                                <ext:GridCommand Icon="Delete" CommandName="Delete" ToolTip-Text="Delete"
                                    Disabled="false" />
                            </Commands>
                            <DirectEvents>
                                <Command OnEvent="ShowGridDetail">
                                    <ExtraParams>
                                        <ext:Parameter Mode="Raw" Name="recordId" Value="record.getId()" />
                                        <ext:Parameter Mode="Raw" Name="commandName" Value="command" />
                                    </ExtraParams>
                                </Command>
                            </DirectEvents>
                            
                        </ext:CommandColumn>
                    </Columns>
                </ColumnModel>
                
                <BottomBar>
                    <ext:PagingToolbar ID="PagingToolBar1" runat="server" StoreID="StoreJobs" DisplayInfo="true"
                        DisplayMsg="Displaying Jobs {0} - {1} of {2}" />
                </BottomBar>
            </ext:GridPanel>
        </Items>
    </ext:Viewport>
</body>
</html>

[Daniil]

Thank you for the sample.

You should not set the "limit" and "start" parameters in Ext.NET v2. The page limit should be managed using the Store PageSize property.

Could you clarify the requirement? What exactly are you trying to achieve?

[Digital.Dynamics]

Thanks for reply,

I removed the start and limit parameters but it still the same problem. I just want to know if it worked for you (version 2.1) ?

I tried with PageSize <=21 and it worked fine. Please try with pagesize = 18 & 19 & 20 & 21 or greater and you will see the problem exactly.

[Daniil]

I reproduced now. I had to set bigger PageSize. It depends on screen height.

We are investigating. Thank you for the report.

For now, I can suggest to remove

Layout="BorderLayout"

[Daniil]

To fix the issue, please move

<ext:Hidden ID="hdnMenuItemClicked" runat="server" />

out of the Toolbar Items.

I would place it into Bin collection.