[CLOSED] Store to be client-side or server-side paginated upon the checkbox change

  1. #1

    [CLOSED] Store to be client-side or server-side paginated upon the checkbox change

    We have a screen in which we show a dropdown and a grid(along with Store). The drop-down will have couple of records and the user can select records and add to the grid. The grid in this case will need to have client-side pagination.
    In the same screen, we have a checkbox called Display All. When the user checks this checkbox, the above drop-down shall be hidden and the grid will be cleared and then populated with 1st page of the record from the server. Here the pagination is server-side pagination.

    The grid pagination will depend on checkbox. We tried to set RemotePaging(RemoteGroup) from the javascript on check/uncheck of checkbox. But the pagination is not working.

    Could you please help me with some sample ?
    Last edited by Daniil; Jan 02, 2012 at 8:22 AM. Reason: [CLOSED]
  2. #2
    Hi,

    I would implement it this way.

    1. Use two Stores.
    2. Assign a respective Store'.
    3. Re-render a GridPanel.

    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 Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                Store store = this.GridPanel1.GetStore();
                store.DataSource = this.MyData;
                store.DataBind();
            }
        }
    
        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;
        }
    
        [DirectMethod]
        public void ChangePaging(bool remote)
        {
            if (remote)
            {
                this.GridPanel1.Title = "Remote";
                this.GridPanel1.StoreID = this.Store2.ID;
                this.Store2.Call("load");
            }
            else
            {
                this.GridPanel1.Title = "Local";
                this.GridPanel1.StoreID = this.Store1.ID;
            }
            this.GridPanel1.Render();
        }
    </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:Store ID="Store1" runat="server">
                <Reader>
                    <ext:JsonReader>
                        <Fields>
                            <ext:RecordField Name="test" />
                        </Fields>
                    </ext:JsonReader>
                </Reader>
            </ext:Store>
            <ext:Store 
                ID="Store2" 
                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>
            <ext:Container 
                runat="server" 
                Width="500" 
                Height="200" 
                Layout="FitLayout">
                <Items>
                    <ext:GridPanel 
                        ID="GridPanel1" 
                        runat="server" 
                        StoreID="Store1"
                        Title="Local">
                        <ColumnModel runat="server">
                            <Columns>
                                <ext:Column Header="Test" DataIndex="test" />
                            </Columns>
                        </ColumnModel>
                        <BottomBar>
                            <ext:PagingToolbar runat="server" PageSize="3" />
                        </BottomBar>
                    </ext:GridPanel>
                </Items>
            </ext:Container>
            <ext:Checkbox runat="server">
                <Listeners>
                    <Check Handler="Ext.net.DirectMethods.ChangePaging(checked);" />
                </Listeners>
            </ext:Checkbox>
        </form>
    </body>
    </html>
  3. #3

    The example is not working with MVC application

    Hi Daniil,

    The example is working fine. But our application is being developed using MVC. Here, I am unable to invoke DirectMethod. The moment I call DirectMethod, the application is throwing error.



    Quote Originally Posted by Daniil View Post
    Hi,

    I would implement it this way.

    1. Use two Stores.
    2. Assign a respective Store'.
    3. Re-render a GridPanel.

    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 Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                Store store = this.GridPanel1.GetStore();
                store.DataSource = this.MyData;
                store.DataBind();
            }
        }
    
        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;
        }
    
        [DirectMethod]
        public void ChangePaging(bool remote)
        {
            if (remote)
            {
                this.GridPanel1.Title = "Remote";
                this.GridPanel1.StoreID = this.Store2.ID;
                this.Store2.Call("load");
            }
            else
            {
                this.GridPanel1.Title = "Local";
                this.GridPanel1.StoreID = this.Store1.ID;
            }
            this.GridPanel1.Render();
        }
    </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:Store ID="Store1" runat="server">
                <Reader>
                    <ext:JsonReader>
                        <Fields>
                            <ext:RecordField Name="test" />
                        </Fields>
                    </ext:JsonReader>
                </Reader>
            </ext:Store>
            <ext:Store 
                ID="Store2" 
                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>
            <ext:Container 
                runat="server" 
                Width="500" 
                Height="200" 
                Layout="FitLayout">
                <Items>
                    <ext:GridPanel 
                        ID="GridPanel1" 
                        runat="server" 
                        StoreID="Store1"
                        Title="Local">
                        <ColumnModel runat="server">
                            <Columns>
                                <ext:Column Header="Test" DataIndex="test" />
                            </Columns>
                        </ColumnModel>
                        <BottomBar>
                            <ext:PagingToolbar runat="server" PageSize="3" />
                        </BottomBar>
                    </ext:GridPanel>
                </Items>
            </ext:Container>
            <ext:Checkbox runat="server">
                <Listeners>
                    <Check Handler="Ext.net.DirectMethods.ChangePaging(checked);" />
                </Listeners>
            </ext:Checkbox>
        </form>
    </body>
    </html>
  4. #4
    You can call a controller action using a DirectMethod this way:
    http://examples1.ext.net/#/Events/Di...ds/WebService/
    or use a DirectEvent with a respective URL.

Similar Threads

  1. [CLOSED] Change toggle state form server or client side
    By caha76 in forum 1.x Premium Help
    Replies: 2
    Last Post: Feb 19, 2011, 8:46 PM
  2. Replies: 1
    Last Post: Dec 01, 2010, 5:14 PM
  3. Replies: 4
    Last Post: Mar 19, 2010, 11:35 AM
  4. [CLOSED] checkbox check client side
    By majestic in forum 1.x Premium Help
    Replies: 1
    Last Post: Sep 24, 2009, 4:13 AM
  5. Replies: 6
    Last Post: Sep 01, 2009, 1:06 PM

Posting Permissions