What's New?

GridPanel Remote Paging Problem

  1. #1
    Nov 20, 2011, 2:43 PM

    GridPanel Remote Paging Problem

    Hi,
    I have a GirdPanel within a Store and a PageToolbar,and when I click a button,the DirectEvent Click is fired,and get a DataTable from Database and then the Store load.
    In this case,I use a StoredProcedure to return the data,and convert it into a Ext.Net.Paging<T> instance.Then call Store.LoadData() in server side to load the data into the GridPanel.
    Am I right?
    But then I found a problem,when I click a Button(like Next Page Button), the RefreshData Event of Store class is fired,and I call LoadData() again in this event,and now neither the GridPanel nor the PageToolbar can play well.Actially there are noting in the GridPanel and nothing in PageToolbar,seems like no DataSource was set to the Store.
    Could you please help me?
    Thanks.
  2. #2
    Nov 21, 2011, 5:32 PM
    Hi,

    What Store's Proxy do you use?

    In general, you should use any type of Proxy to get remote paging.

    Please see the remote paging examples in the Examples Explorer.
    https://examples1.ext.net/#/GridPane...rting/Handler/
    https://examples1.ext.net/#/GridPane...ON_WebService/
    https://examples1.ext.net/#/GridPane...ML_WebService/
    https://examples1.ext.net/#/GridPane..._Sorting/Page/
  3. #3
    Nov 21, 2011, 10:48 PM
    Quote Originally Posted by Daniil View Post
    Hi,

    What Store's Proxy do you use?

    In general, you should use any type of Proxy to get remote paging.

    Please see the remote paging examples in the Examples Explorer.
    https://examples1.ext.net/#/GridPane...rting/Handler/
    https://examples1.ext.net/#/GridPane...ON_WebService/
    https://examples1.ext.net/#/GridPane...ML_WebService/
    https://examples1.ext.net/#/GridPane..._Sorting/Page/
    Hi,
    Daniil.
    Of course I used a proxy,named PageProxy.
    I have read the samples for more times,but can not find the same situation like this.Just I do not want use the Store's AutoLoad="true" to load the data when Page was load,it should be loaded in a Postback Event or DirectEvent when I click a button.
    Last edited by zhangjiagege; Nov 21, 2011 at 10:53 PM.
  4. #4
    Nov 22, 2011, 5:35 AM
    Just call
    store.load();
    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_RefreshData(object sender, StoreRefreshDataEventArgs e)
    {
        List<object> data = this.MyData;
        var limit = e.Limit;
        if ((e.Start + e.Limit) > data.Count)
        {
            limit = data.Count - e.Start;
        }
        List<object> rangeData = (e.Start < 0 || limit < 0) ? data : data.GetRange(e.Start, limit);
        e.Total = data.Count;
        (sender as Store).DataSource = rangeData;
    }
</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>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:GridPanel runat="server" AutoHeight="true">
            <Store>
                <ext:Store
                    ID="Store1" 
                    runat="server" 
                    OnRefreshData="Store_RefreshData" 
                    AutoLoad="false">
                    <Proxy>
                        <ext:PageProxy />
                    </Proxy>
                    <Reader>
                        <ext:JsonReader>
                            <Fields>
                                <ext:RecordField Name="test" />
                            </Fields>
                        </ext:JsonReader>
                    </Reader>
                    <BaseParams>
                        <ext:Parameter Name="start" Value="0" Mode="Raw" />
                        <ext:Parameter Name="limit" Value="3" Mode="Raw" />
                    </BaseParams>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column Header="Test" DataIndex="test" />
                </Columns>
            </ColumnModel>
            <BottomBar>
                <ext:PagingToolbar runat="server" PageSize="3" />
            </BottomBar>
        </ext:GridPanel>
        <ext:Button runat="server" Text="Load">
            <Listeners>
                <Click Handler="Store1.load();" />
            </Listeners>
        </ext:Button>
    </form>
</body>
</html>
  5. #5
    Nov 22, 2011, 6:47 AM
    Quote Originally Posted by Daniil View Post
    Just call
    store.load();
    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_RefreshData(object sender, StoreRefreshDataEventArgs e)
    {
        List<object> data = this.MyData;
        var limit = e.Limit;
        if ((e.Start + e.Limit) > data.Count)
        {
            limit = data.Count - e.Start;
        }
        List<object> rangeData = (e.Start < 0 || limit < 0) ? data : data.GetRange(e.Start, limit);
        e.Total = data.Count;
        (sender as Store).DataSource = rangeData;
    }
</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>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:GridPanel runat="server" AutoHeight="true">
            <Store>
                <ext:Store
                    ID="Store1" 
                    runat="server" 
                    OnRefreshData="Store_RefreshData" 
                    AutoLoad="false">
                    <Proxy>
                        <ext:PageProxy />
                    </Proxy>
                    <Reader>
                        <ext:JsonReader>
                            <Fields>
                                <ext:RecordField Name="test" />
                            </Fields>
                        </ext:JsonReader>
                    </Reader>
                    <BaseParams>
                        <ext:Parameter Name="start" Value="0" Mode="Raw" />
                        <ext:Parameter Name="limit" Value="3" Mode="Raw" />
                    </BaseParams>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column Header="Test" DataIndex="test" />
                </Columns>
            </ColumnModel>
            <BottomBar>
                <ext:PagingToolbar runat="server" PageSize="3" />
            </BottomBar>
        </ext:GridPanel>
        <ext:Button runat="server" Text="Load">
            <Listeners>
                <Click Handler="Store1.load();" />
            </Listeners>
        </ext:Button>
    </form>
</body>
</html>
    Hi,
    Thanks for your reply.
    The only question is how can I do this in server side?Cause I need to control something at server side code, which method of Store(server side control ) can I. Invoke like load at client side?(I guess the LoadData method can do this,but I can use it in RefreshData event like in any other postback event, such as Button Click)
  6. #6
    Nov 22, 2011, 7:03 AM
    The LoadData method is for another purpose.

    You could call the load method from server by the following way.

    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_RefreshData(object sender, StoreRefreshDataEventArgs e)
    {
        List<object> data = this.MyData;
        var limit = e.Limit;
        if ((e.Start + e.Limit) > data.Count)
        {
            limit = data.Count - e.Start;
        }
        List<object> rangeData = (e.Start < 0 || limit < 0) ? data : data.GetRange(e.Start, limit);
        e.Total = data.Count;
        (sender as Store).DataSource = rangeData;
    }

    protected void Load(object sender, DirectEventArgs e)
    {
        this.Store1.Call("load");
    }
</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>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:GridPanel runat="server" AutoHeight="true">
            <Store>
                <ext:Store
                    ID="Store1"
                    runat="server"
                    OnRefreshData="Store_RefreshData"
                    AutoLoad="false">
                    <Proxy>
                        <ext:PageProxy />
                    </Proxy>
                    <Reader>
                        <ext:JsonReader>
                            <Fields>
                                <ext:RecordField Name="test" />
                            </Fields>
                        </ext:JsonReader>
                    </Reader>
                    <BaseParams>
                        <ext:Parameter Name="start" Value="0" Mode="Raw" />
                        <ext:Parameter Name="limit" Value="3" Mode="Raw" />
                    </BaseParams>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column Header="Test" DataIndex="test" />
                </Columns>
            </ColumnModel>
            <BottomBar>
                <ext:PagingToolbar runat="server" PageSize="3" />
            </BottomBar>
        </ext:GridPanel>
        <ext:Button runat="server" Text="Load" OnDirectClick="Load" />
    </form>
</body>
</html>
  7. #7
    Nov 22, 2011, 8:17 AM
    Quote Originally Posted by Daniil View Post
    The LoadData method is for another purpose.

    You could call the load method from server by the following way.

    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_RefreshData(object sender, StoreRefreshDataEventArgs e)
    {
        List<object> data = this.MyData;
        var limit = e.Limit;
        if ((e.Start + e.Limit) > data.Count)
        {
            limit = data.Count - e.Start;
        }
        List<object> rangeData = (e.Start < 0 || limit < 0) ? data : data.GetRange(e.Start, limit);
        e.Total = data.Count;
        (sender as Store).DataSource = rangeData;
    }

    protected void Load(object sender, DirectEventArgs e)
    {
        this.Store1.Call("load");
    }
</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>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:GridPanel runat="server" AutoHeight="true">
            <Store>
                <ext:Store
                    ID="Store1"
                    runat="server"
                    OnRefreshData="Store_RefreshData"
                    AutoLoad="false">
                    <Proxy>
                        <ext:PageProxy />
                    </Proxy>
                    <Reader>
                        <ext:JsonReader>
                            <Fields>
                                <ext:RecordField Name="test" />
                            </Fields>
                        </ext:JsonReader>
                    </Reader>
                    <BaseParams>
                        <ext:Parameter Name="start" Value="0" Mode="Raw" />
                        <ext:Parameter Name="limit" Value="3" Mode="Raw" />
                    </BaseParams>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column Header="Test" DataIndex="test" />
                </Columns>
            </ColumnModel>
            <BottomBar>
                <ext:PagingToolbar runat="server" PageSize="3" />
            </BottomBar>
        </ext:GridPanel>
        <ext:Button runat="server" Text="Load" OnDirectClick="Load" />
    </form>
</body>
</html>
    Thanks Daniil!
    This solution may be worked.Thanks again.

Similar Threads

  1. GridPanel Remote Paging with SqlDatasource
    By Aod47 in forum 1.x Help
    Replies: 1
    Last Post: Oct 25, 2013, 6:00 AM
  2. [CLOSED] Remote paging/sorting/filtering on SQLDataSource for GridPanel
    By jchau in forum 1.x Help
    Replies: 6
    Last Post: Nov 03, 2012, 10:48 PM
  3. [CLOSED] GridPanel remote paging issue
    By jskibo in forum 1.x Legacy Premium Help
    Replies: 15
    Last Post: Jan 31, 2011, 8:37 AM
  4. [CLOSED] GridPanel with Remote Filtering, Sorting and Paging (datatable)
    By CarWise in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Jul 23, 2010, 8:52 AM
  5. [CLOSED] Remote paging GridPanel
    By idrissb in forum 1.x Legacy Premium Help
    Replies: 6
    Last Post: Jan 21, 2010, 11:17 AM

Posting Permissions