[CLOSED] GridPanel: issue with paging when using DirectMethod

[Leonid_Veriga]

Hi Guys,
I'm using DirectMethod for loading data to Store and I have issue with PagingToolbar. The fist page is displaying correctly. When I click on the Next page button, GridPane shows data from the second page but PagingToolbar shows that I stay on the first page.
My code:

         public static List<Template> GetTestData()
         {
             List<Template> result = new List<Template>();
             for (int i = 0; i < 20; i++)
             {
                 result.Add(new Template() { Id = i, Name = String.Format("Template Name {0}", i), PortfolioLevel = "Yes", Assets = String.Format("Assets Name {0}", i) });
             }
             return result;
         }
         
         [DirectMethod]
         public static Paging<Template> GetTemplates(int start, int limit)
         {
             List<Template> templates = GetTestData();
             if ((start + limit) > templates.Count)
             {
                 limit = templates.Count - start;
             }
             List<Template> rangeTemplates = (start < 0 || limit < 0) ? templates : templates.GetRange(start, limit);
             return new Paging<Template>(rangeTemplates, templates.Count);
         }

var TemplateGridPageSize = 6;
        var templeteListStoreInitializeCalled= false;

       function LoadTemplateListStore(start, limit) {
           if (!templeteListStoreInitializeCalled) {
               Ext.net.DirectMethods.GetTemplates(start, limit,
                   {
                       timeout: 300000,
                       eventMask: { showMask: true, minDelay: 500 },
                       success: function (result) {
                           var target = <%= TemplateListStore.ClientID%>;
                           target.loadData(result, false);

                           templeteListStoreInitializeCalled = false;
                       }
                   });
                  templeteListStoreInitializeCalled = true;
            }
       }
       var OnTemplateListStorePreLoad = function (store) {
           var start, limit;
           start = (store.lastOptions.params && store.lastOptions.params.start) || 0;
           limit = (store.lastOptions.params && store.lastOptions.params.limit) || TemplateGridPageSize;
           LoadTemplateListStore(start, limit);
       }

  <ext:Store ID="TemplateListStore" runat="server" RemotePaging="true" AutoLoad="true">
        <Reader>
            <ext:JsonReader Root="Data" TotalProperty="TotalRecords">
                <Fields>
                    <ext:RecordField Name="Id" />
                    <ext:RecordField Name="Name" />
                    <ext:RecordField Name="PortfolioLevel" />
                    <ext:RecordField Name="Assets" Mapping="Assets" />
                </Fields>
            </ext:JsonReader>
        </Reader>
        <Proxy>
            <ext:HttpProxy />
        </Proxy>
        <Listeners>
            <BeforeLoad fn="OnTemplateListStorePreLoad" />
        </Listeners>
        <AutoLoadParams>
            <ext:Parameter Name="start" Value="={0}" />
            <ext:Parameter Name="limit" Value="={6}" />
        </AutoLoadParams>
    </ext:Store>

    <ext:GridPanel ID="TemplateListGrid" StoreID="TemplateListStore" Collapsible="false" TitleCollapse="true"
            Frame="true" StripeRows="true" HideHeaders="false" Height="300" Border="true" runat="server" >
        
                <ColumnModel ID="cmTemplateListGrid" runat="server">
                    <Columns>
                        <ext:Column DataIndex="Name" Header="Template Name" Tooltip="Template Name" Width="300"> </ext:Column>
                        <ext:Column DataIndex="PortfolioLevel" Header="Portfolio Level Template" Tooltip="Portfolio Level Template" Width="100"><Renderer/></ext:Column>
                        <ext:Column DataIndex="Assets" Header="Associated Assets" Tooltip="Associated Assets" Width="150"><Renderer /></ext:Column>
                    </Columns>
                </ColumnModel>
                <LoadMask ShowMask="true" />
                <View>
                    <ext:GridView  DeferEmptyText="false" />
                </View>
                <SelectionModel>
                    <ext:RowSelectionModel ID="TemplateListRowSelectionModel" runat="server"/>
                </SelectionModel>
                <BottomBar>
                    <ext:PagingToolbar ID="TemplateListPagingToolbar" runat="server" StoreID="TemplateListStore" PageSize="6" DisplayInfo="true"  DisplayMsg="Displaying templates {0} - {1} of {2}"   >
                    </ext:PagingToolbar>
                </BottomBar>
    </ext:GridPanel>

Thank you.

[Daniil]

Hi,

Well, setting up HttpProxy seems to don't make any sense and cause the JavaScript exception.

To get PagingToolbar updating you have to refresh it manually with a new loaded data. I think it can be complicated.

Finally, I would suggest to implement your own type of proxy, for example, DirectMethodProxy. I think it's the cleaner and easier way to achieve your requirement.

I've create some example for you. The DirectMethodProxy.js code is based on PageProxy.js one.
<Ext.Net sources root>\Ext.Net\Build\Ext.Net\extnet\data\PageProxy. js

I've simplified the code as much as I can removing all (honestly, almost all, it might be simplified more) not required to get the example working.

To extend the DirectMethodProxy.js code with some functionality, for example, managing errors and firing Exception event for Store, you will need to investigate the original PageProxy.js code to get a clue how to do this.

Here is the example.

DirectMethodProxy Custom Control

using System.ComponentModel;
using Ext.Net;

namespace Work
{
    public class DirectMethodProxy : DataProxy
    {
        public DirectMethodProxy() { }

        public override string InstanceOf
        {
            get
            {
                return "Ext.net.DirectMethodProxy";
            }
        }
    }
}

DirectMethodProxy.js

Ext.net.DirectMethodProxy = function () {
    var api = {};
    
    api[Ext.data.Api.actions.read] = true;
    Ext.net.DirectMethodProxy.superclass.constructor.call(this, {
        api: api
    });
};

Ext.extend(Ext.net.DirectMethodProxy, Ext.data.DataProxy, {
    ro : {},
    isDataProxy : true,

    doRequest : function (action, rs, params, reader, callback, scope, arg) {
        if (this.fireEvent("beforeload", this, params) !== false) {
            this.ro = {
                params  : params || {},
                request : {
                    callback : callback,
                    scope    : scope,
                    arg      : arg
                },
                reader   : reader,
                callback : this.loadResponse,
                scope    : this
            };

            var config = {
                proxy : this,
                success : this.successHandler
            };
            
            Ext.net.DirectMethods.GetTemplates(params.start, params.limit, config);
        } else {
            callback.call(scope || this, null, arg, false);
        }
    },

    successHandler : function (result, response, extraParams, o) {
        var p = o.proxy;

        result = p.ro.reader.readRecords(result);

        p.fireEvent("load", p, p.ro, p.ro.request.arg);
        p.ro.request.callback.call(p.ro.request.scope, result, p.ro.request.arg, true);
    }
});

Example How To Use

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

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<%@ Register Assembly="Work" Namespace="Work" TagPrefix="cc" %>

<script runat="server">
    public static List<object> GetTestData()
    {
        List<object> result = new List<object>();
        for (int i = 0; i < 20; i++)
        {
            result.Add(new
            {
                Id = i,
                Name = String.Format("Template Name {0}", i),
                PortfolioLevel = "Yes",
                Assets = String.Format("Assets Name {0}", i)
            });
        }

        return result;
    }

    [DirectMethod]
    public static Paging<object> GetTemplates(int start, int limit)
    {
        List<object> templates = GetTestData();
        if ((start + limit) > templates.Count)
        {
            limit = templates.Count - start;
        }
        List<object> rangeTemplates = (start < 0 || limit < 0) ? templates : templates.GetRange(start, limit);
        return new Paging<object>(rangeTemplates, templates.Count);
    }
</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>

    <ext:ResourcePlaceHolder runat="server" Mode="ScriptFiles" />

    <script type="text/javascript" src="resources/js/DirectMethodProxy.js"></script>
</head>
<body>
    <ext:ResourceManager runat="server" />
    
    <ext:GridPanel runat="server" AutoHeight="true">
        <Store>
            <ext:Store runat="server">
                <Reader>
                    <ext:JsonReader Root="Data" TotalProperty="TotalRecords">
                        <Fields>
                            <ext:RecordField Name="Id" />
                            <ext:RecordField Name="Name" />
                            <ext:RecordField Name="PortfolioLevel" />
                            <ext:RecordField Name="Assets" Mapping="Assets" />
                        </Fields>
                    </ext:JsonReader>
                </Reader>
                <Proxy>
                    <cc:DirectMethodProxy />
                </Proxy>
                <AutoLoadParams>
                    <ext:Parameter Name="start" Value="0" Mode="Raw" />
                    <ext:Parameter Name="limit" Value="6" Mode="Raw" />
                </AutoLoadParams>
            </ext:Store>
        </Store>
        <ColumnModel runat="server">
            <Columns>
                <ext:Column DataIndex="Name" Header="Template Name" Width="300" />
                <ext:Column DataIndex="PortfolioLevel" Header="Portfolio Level Template" />
                <ext:Column DataIndex="Assets" Header="Associated Assets" Width="150" />
            </Columns>
        </ColumnModel>
        <LoadMask ShowMask="true" />
        <BottomBar>
            <ext:PagingToolbar 
                runat="server" 
                PageSize="6" 
                DisplayMsg="Displaying templates {0} - {1} of {2}">
            </ext:PagingToolbar>
        </BottomBar>
    </ext:GridPanel>
</body>
</html>

[Leonid_Veriga]

Thank you Daniil! It works!