[CLOSED] How to load data on store and set Total of pagingtoolbar in client side for static direct method

  1. #1

    [CLOSED] How to load data on store and set Total of pagingtoolbar in client side for static direct method

    Hi,

    We are using Static direct methods to load data result on gridpanel using store. In this scenario we need to get the inputs from different controls (Search Criteria input controls) and send those to database and get data based on inputs, finally bind that data to gridpanel.

    Controls are not access in STATIC direct method, we are preparing object in client side and sending that as parameter for that method, so we are able to load data using
     App.direct.StaticBindData(optionalFilterValuesObj, storeParams, {
                    success: function (result) {
                        App.Store1.loadData(result.data);
                        App.GridPanel1.view.loadMask.hide();
                    }
                });
    but not able to set the Total for PageProxy, so that the pagination is not working.

    Please suggest us like how we can set Total value to PageProxy of store ? are we doing in correct way to load data with static direct methods?

    Please find the attached screen shot of result and issue.
    Sample Code:

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="PagingNSortingWithStaticDirect.aspx.cs"
        Inherits="Ext.Net.Examples.RealtimeSamples.PagingNSortingWithStaticDirect" %>
     
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <!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></title>
        <script runat="server">
            public class TestClass
            {
                public string company { get; set; }
                public string Firstname { get; set; }
                public string Lastname { get; set; }
                public double price { get; set; }
                public double change { get; set; }
                public DateTime lastChange { get; set; }
                public double pctChange { get; set; }
     
            }
            static int firstRecord = 0;
            static int lastRecord = 100;
            private static List<TestClass> TestData
            {
                get
                {
                    DateTime now = DateTime.Now;
                    List<TestClass> testDataList = new List<TestClass>();
     
                    for (int i = firstRecord; i < lastRecord; i++)
                    {
                        testDataList.Add(new TestClass() { company = "3m Co " + i, price = 71.72 * i, change = 0.02 * i, pctChange = 0.03 * i, lastChange = now });
                    }
                    return testDataList;
                }
            }
     
           
            [DirectMethod]
            public static object StaticBindData(TestClass optionalFilterValuesObj, Dictionary<string, object> extraParams)
            {
                StoreRequestParameters prms = new StoreRequestParameters(extraParams);
                firstRecord = (prms.Page - 1) * prms.Limit;
                lastRecord = prms.Page * prms.Limit + 1;
     
                List<TestClass> testData1 = null;
                if (prms.SimpleSortDirection == Ext.Net.SortDirection.ASC)
                    testData1 = TestData.OrderBy(o => o.company).ToList();
                else
                    testData1 = TestData.OrderByDescending(o => o.company).ToList();
     
                int total = 100;
                List<TestClass> data = testData1;
     
                Ext.Net.X.Mask.Hide();
     
                //return new Paging<TestClass>(data, total).SerializationObject();
                
                return new { data, total };
            }    
        </script>
        <script language="javascript" type="text/javascript">
            function loadResult() {
                App.Store1.reload({ params: { start: 0, limit: parseInt(App.cmbPagesize.getValue(), 10), page: 1} });
            }
     
            function loadDataStatic(action, storeParams, p3) {
                var optionalFilterValuesObj = new Object();
                optionalFilterValuesObj.company = App.txtCompanyName.getValue();
                optionalFilterValuesObj.Firstname = App.txtFirstName.getValue();
                optionalFilterValuesObj.Lastname = App.txtLastName.getValue();
     
                App.direct.StaticBindData(optionalFilterValuesObj, storeParams, {
                    success: function (result) {
                        App.Store1.loadData(result.data);
                        App.GridPanel1.view.loadMask.hide();
                    }
                });
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server"> 
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <div>
            <ext:Store ID="Store1" runat="server" RemoteSort="true" PageSize="10" AutoLoad="false">
                <Proxy>
                    <ext:PageProxy DirectFn="loadDataStatic" >
                    </ext:PageProxy>
                </Proxy>
                <AutoLoadParams>
                    <ext:Parameter Name="start" Value="0" Mode="Raw" />
                    <ext:Parameter Name="limit" Value="10" Mode="Raw" />
                </AutoLoadParams>
                <Sorters>
                    <ext:DataSorter Property="company" Direction="ASC" />
                </Sorters>
                <Model>
                    <ext:Model ID="Model1" runat="server">
                        <Fields>
                            <ext:ModelField Name="company" />
                            <ext:ModelField Name="price" Type="Float" />
                            <ext:ModelField Name="change" Type="Float" />
                            <ext:ModelField Name="pctChange" Type="Float" />
                            <ext:ModelField Name="lastChange" Type="Date" />
                        </Fields>
                    </ext:Model>
                </Model>
            </ext:Store>
            <ext:ComboBox ID="cmbPagesize" runat="server">
                <Items>
                    <ext:ListItem Value="5" Text="5" />
                    <ext:ListItem Value="10" Text="10" />
                    <ext:ListItem Value="20" Text="20" />
                    <ext:ListItem Value="50" Text="50" />
                </Items>
                <SelectedItems>
                <ext:ListItem Value="10" Text="10" />
                </SelectedItems>
                <Listeners>
                    <Select Handler="#{Store1}.pageSize = parseInt(this.getValue(), 10); loadResult();" />
                </Listeners>
            </ext:ComboBox>
            <ext:TextField ID="txtCompanyName" runat="server" FieldLabel="Company" />
            <ext:TextField ID="txtFirstName" runat="server" FieldLabel="Firstname" />
            <ext:TextField ID="txtLastName" runat="server" FieldLabel="Lastname" />
     
            <ext:GridPanel ID="GridPanel1" runat="server" Title="Array Grid" Width="600" Height="320"
                ButtonAlign="Center" StoreID="Store1">
                <ColumnModel ID="ColumnModel1" runat="server">
                    <Columns>
                        <ext:Column ID="Column1" runat="server" Text="Company" DataIndex="company" Flex="1">
                            <Editor>
                                <ext:TextField ID="TextField1" runat="server" />
                            </Editor>
                        </ext:Column>
                        <ext:Column ID="Column2" runat="server" Text="Price" Width="75" DataIndex="price">
                            <Editor>
                                <ext:TextField ID="TextField2" runat="server" />
                            </Editor>
                        </ext:Column>
                        <ext:Column ID="Column3" runat="server" Text="Change" Width="75" DataIndex="change" />
                        <ext:Column ID="Column4" runat="server" Text="Change" Width="75" DataIndex="pctChange" />
                        <ext:DateColumn ID="DateColumn1" runat="server" Text="Last Updated" Width="85" DataIndex="lastChange"
                            Format="HH:mm:ss" />
                    </Columns>
                </ColumnModel>
                <BottomBar>
                    <ext:PagingToolbar ID="PagingToolbar1" runat="server" Weight="100" StoreID="Store1" />
                </BottomBar>
                <Buttons>
                    <ext:Button ID="Button1" runat="server" Text="Load">
                        <Listeners>
                            <Click Handler="loadResult();" />
                        </Listeners>
                    </ext:Button>               
                </Buttons>
            </ext:GridPanel>
        </div>
        </form>
    </body>
    </html>
    Attached Thumbnails Click image for larger version. 

Name:	Staticdirectmethod result.GIF 
Views:	39 
Size:	48.3 KB 
ID:	24103  
    Last edited by fabricio.murta; Aug 03, 2015 at 4:59 PM. Reason: [CLOSED]
  2. #2
    Hello @iansriley!

    First of all, thank you very much for the perfect sample to reproduce your issue!..

    You were way near to fixing your issue, just a line away.

    On loadDataStatic(), after App.Store1.loadData(result.data); just add App.Store1.totalCount = result.total; and you're good to go.

    By the way, I noticed the sample returns always limit+1 elements, you should remove the + 1 on line 44.

    Let me know if this still does not do for you and I can share the full example. Or maybe if I overlooked something important in the example, just point me to it.

    Hope this helps.
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Hi, thanks for providing solution.

    I tried your solution but pagination is not enabled for first action (like Load button click or header sorting or pagesize change events) after next action paging buttons are enabled and total also set.
                        storeResult.loadData(result.data);
                        storeResult.totalCount = result.total;
    So i tried with below code, now it's working fine. First setting totalCount and after loading data.
             storeResult.totalCount = result.total;
                        storeResult.loadData(result.data);
    Thank you once again.
  4. #4
    Hello, glad it solved for you! I really didn't notice the problem if totalRows were bound afterwards, but fortunately it was just a matter of inverting the order.
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. Cannot get data in store in client side
    By Holly in forum 2.x Help
    Replies: 1
    Last Post: Nov 16, 2013, 12:30 AM
  2. Replies: 2
    Last Post: Nov 08, 2013, 2:14 PM
  3. [CLOSED] Bind store data in direct method
    By bayoglu in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Jun 14, 2013, 6:13 PM
  4. [CLOSED] HttpProxy sample with Method='GET' to load data for store
    By inayath in forum 1.x Legacy Premium Help
    Replies: 10
    Last Post: Feb 08, 2011, 2:18 PM
  5. [CLOSED] HttpProxy sample with Method='GET' to load data for store
    By inayath in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Feb 07, 2011, 11:55 AM

Tags for this Thread

Posting Permissions