[CLOSED] Local Pagination

**MarginPoint** · Jan 13, 2014, 1:25 PM

Hi Team,
I wanted to know how to paginate a store locally. I have store for which i am loading data from Controller method. I have given remote paging as false but still pagination is not working. plz show me an example.

**Daniil** · Jan 13, 2014, 2:56 PM

Hi @MarginPoint,

Here is an example.
https://examples1.ext.net/#/GridPane...rayWithPaging/

The key point is the PagingToolbar's PageSize setting.

As for a Store's RemotePaging. It should be set up to false only if a Store has a Proxy.

**MarginPoint** · Jan 14, 2014, 4:13 AM

Hi can you please tell me how to bind data from mvc controller method

**Daniil** · Jan 14, 2014, 5:13 AM

Here is an example with remote paging.

View

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

<%@ 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>Ext.NET Example</title>
</head>
<body>
    <ext:ResourceManager runat="server" />

    <ext:GridPanel runat="server" AutoHeight="true">
        <Store>
            <ext:Store runat="server">
                <Proxy>
                    <ext:HttpProxy Url="/Test/GetData" />
                </Proxy>
                <Reader>
                    <ext:JsonReader Root="data">
                        <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>
</body>
</html>

Controller

public class TestController : Controller
{
    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" }
    };


    public ActionResult Test()
    {
        return View();
    }

    public AjaxStoreResult GetData()
    {
        int start = int.Parse(this.Request["start"]);
        int limit = int.Parse(this.Request["limit"]);

        List<object> data = this.MyData;

        if ((start + limit) > data.Count)
        {
            limit = data.Count - start;
        }
        List<object> rangeData = (start < 0 || limit < 0) ? data : data.GetRange(start, limit);

        return new AjaxStoreResult(rangeData, this.MyData.Count);
    }
}

Here is an example with local paging.

View

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

<%@ 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>Ext.NET Example</title>
</head>
<body>
    <ext:ResourceManager runat="server" />

    <ext:GridPanel runat="server" AutoHeight="true">
        <Store>
            <ext:Store runat="server" RemotePaging="false">
                <Proxy>
                    <ext:HttpProxy Url="/Test/GetData" />
                </Proxy>
                <Reader>
                    <ext:JsonReader Root="data">
                        <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>
</body>
</html>

Controller

public class TestController : Controller
{
    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" }
    };

    public ActionResult Test()
    {
        return View();
    }

    public AjaxStoreResult GetData()
    {
        return new AjaxStoreResult(this.MyData);
    }
}

**MarginPoint** · Jan 14, 2014, 6:45 AM

Can you please tell me how to bind data

**MarginPoint** · Jan 14, 2014, 7:35 AM

Please ignore this

Originally Posted by MarginPoint

Can you please tell me how to bind data

**MarginPoint** · Jan 14, 2014, 12:17 PM

view source.txtHi thank you its working fine. But Now i have problem. This grid have a check box and i select the records and click on save after saving controller method will return data and i am loading this data to same store at this time pagination is not working its giving some java script error.

"TransferLinesStore" is the store which i am referring to

    Ext.net.DirectMethod.request
              ({
                  url: '/Routes/CreateTranferRequisitionByPreviewTransferRoute/'
              , params: { tranReqHdrStoreDetails: trfRouteHdrDetils,
                  trfReqItemStoreDetails: selectedtrfRouteLineDetils,
                  userId: Ext.GLOBAL_STORE.UserId
              }
              , cleanRequest: true
              , success:
              function (data) {
                  if (data.data != null) {
                      controls.TransferLinesStore.loadData(data);
                      if (controls.TransferLinesStore.events['load'] != true)
                          controls.TransferLinesStore.events['load'].clearListeners();
                      controls.TransferLinesStore.loadData(data);
                      controls.TransferLinesStore.on('load',
                      SavesuccessHandler(controls));

                  }
                  else {
                      Common.HideMask();
                      controls.SaveCancelToolBar.setVisible(false);
                      if (controls.TransferLinesStore.data.length == 0) {
                          controls.TransferLineGrid.getView().emptyText = Ext.RESOURCE_STORE.getById("NoReqs").data.Value;
                          controls.TransferLineGrid.getView().applyEmptyText();
                          controls.TransferLineGrid.getView().refresh();
                      }
                      
                  }
              },
                  failure: function ()
                  { SaveFailureHandler(controls) }
              });


};
var SavesuccessHandler = function (controls) {
    Common.HideMask();
    controls.SaveCancelToolBar.setVisible(false);
    Common.HideUnhideColumnByID(controls.TransferLineGrid, 'colRRGReqNo,colRRGLineNo', false);
    var index = controls.TransferLineGrid.colModel.getIndexById('colRRGLineCheck');
    controls.TransferLineGrid.colModel.setHidden(index, true);
    controls.TransferPageToolBar.doLoad();
    Common.MessageBox(Ext.RESOURCE_STORE.getById("Success").data.Value, Ext.RESOURCE_STORE.getById("TransferReqCreateSuccess").data.Value, '200', Ext.MessageBox.OK, false, "", '100591', SeverityConstants.Severity_Info);
};

var SaveFailureHandler = function (controls) {
    Common.HideMask();
    if (controls.TransferLinesStore.data.length == 0) {
        controls.TransferLineGrid.getView().emptyText = Ext.RESOURCE_STORE.getById("ReqCreateFailure").data.Value;
        controls.TransferLineGrid.getView().applyEmptyText();
        controls.TransferLineGrid.getView().refresh();
    }
    Common.MessageBox(Ext.RESOURCE_STORE.getById("Failure").data.Value, Ext.RESOURCE_STORE.getById("TransferReqCreateFailure").data.Value, '200', Ext.MessageBox.OK, false, "", '100592', SeverityConstants.Severity_Error);
};

Click image for larger version.

Name: Capture.PNG
Views: 8
Size: 10.6 KB
ID: 7486

**Daniil** · Jan 15, 2014, 3:32 AM

It looks a bit weird:

controls.TransferLinesStore.loadData(data);
if (controls.TransferLinesStore.events['load'] != true)
    controls.TransferLinesStore.events['load'].clearListeners();
controls.TransferLinesStore.loadData(data);
controls.TransferLinesStore.on('load',
SavesuccessHandler(controls));

You call loadData twice. Why? Also could you clarify why you do this:

controls.TransferLinesStore.events['load'].clearListeners();

I think it can clear some important internal listeners.

If you need some listener to be executed once, then use a single option:

store.on("load", handler, store, { single: true });

**MarginPoint** · Jan 15, 2014, 3:59 PM

Sorry that' mistake that store is loaded twise.

My intension here is, after user clicks on create the store data will be sent to the controller methos where i am creating the requisition for the selected items and after creating those(selected) items am sending back this data i want load to that grid.

The way am loading the store may be wrong

please suggest alternative solution to this so that pagination also works fine

**Daniil** · Jan 16, 2014, 3:04 AM

I think a Store's loadData method is good for your requirement.

If you can provide us with a runnable and simplified test case, we would be happy to investigate.

Thread: [CLOSED] Local Pagination

Thread Tools

Search Thread

Display

[CLOSED] Local Pagination

Similar Threads

[CLOSED] Local sorting with local filtering and paging

Gridpanel Pagination problem.

GridPanel Pagination Issue

[CLOSED] Local datastore filtering param when getting data to combo in local mode

Row expander with pagination

Posting Permissions

Sitemap

Downloads

Resources

Thread: [CLOSED] Local Pagination

[CLOSED] Local Pagination

Similar Threads

Posting Permissions

Sitemap

Downloads

Resources

Stay connected with us