How to add paging functionality ?

[kavit@bdtpark.com]

Hello,

I want to add paging functionality in Dataview. I am using following example.I want to add paging functionality in below example.

https://examples2.ext.net/#/DataView/Advanced/Animated/

[Daniil]

Hi,

Maybe, this example can help.
https://examples2.ext.net/#/DataView/Basic/With_Paging/

[kavit@bdtpark.com]

Hi,

Maybe, this example can help.
https://examples2.ext.net/#/DataView/Basic/With_Paging/

Thanks Daniil for reply. I applied the pager as you suggested. It works fine. Now I want to know that in this dataview whole data will come from the database of only those data come based on selected page size??

If this paging is client side that I want to develop server side paging.

waiting for your reply.

[kavit@bdtpark.com]

I have did the following coding for paging with remote data

<form id="form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server">
        </ext:ResourceManager>
        <ext:Panel ID="Panel1"
            runat="server"
            Title="Animated DataView"
            Height="555"
            Width="700"
            Layout="FitLayout">
            <TopBar>
                <ext:PagingToolbar ID="PagingToolbar1" runat="server" StoreID="Store1" HideRefresh="true">
                    <Items>
                        <ext:Label ID="Label1" runat="server" Text="Page size:" />
                        <ext:ToolbarSpacer ID="ToolbarSpacer1" runat="server" Width="10" />
                        <ext:ComboBox ID="ComboBox1" Editable="false" runat="server" Width="80">
                            <Items>
                                <ext:ListItem Text="5" />
                                <ext:ListItem Text="10" />
                                <ext:ListItem Text="15" />
                                <ext:ListItem Text="20" />
                                <ext:ListItem Text="25" />
                                <ext:ListItem Text="30" />
                            </Items>
                            <SelectedItems>
                                <ext:ListItem Value="10" />
                            </SelectedItems>
                            <Listeners>
                                <Select Handler="#{MyDataView}.store.pageSize = parseInt(this.getValue(), 10); #{MyDataView}.store.reload();" />
                            </Listeners>
                        </ext:ComboBox>
                    </Items>
                </ext:PagingToolbar>


            </TopBar>
            <Items>
                <ext:DataView
                    ID="MyDataView"
                    runat="server"
                    DeferInitialRefresh="false"
                    ItemSelector="div.phone"
                    OverItemCls="phone-hover"
                    MultiSelect="true"
                    AutoScroll="true"
                    Cls="phones-view"
                    TrackOver="true">
                    <Store>
                        <ext:Store ID="Store1" runat="server" OnReadData="MyData_Refresh" PageSize="10">
                            <Proxy>
                                <ext:PageProxy />
                            </Proxy>
                            <Model>
                                <ext:Model ID="Model1" runat="server" IDProperty="InventoryID">
                                    <Fields>

                                        <ext:ModelField Name="InventoryID" Type="Int" />
                                        <ext:ModelField Name="SKU" />
                                        <ext:ModelField Name="Price" Type="Int" />
                                        <ext:ModelField Name="Images" />

                                    </Fields>
                                </ext:Model>
                            </Model>
                            <Sorters>
                                <ext:DataSorter Property="SKU" Direction="ASC" />
                            </Sorters>

                        </ext:Store>
                    </Store>
                    <Tpl ID="Tpl1" runat="server">
                        <Html>
                            <tpl for=".">
                                <div class="phone">
                                    <tpl if="!Ext.isIE6">
                                            <img width="64" height="64" src="images/{Images}" />
                                    </tpl>
                                    <tpl if="Ext.isIE6">
                                        <div style="width:74px;height:74px;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/{Images}.png',sizingMethod='scale');"></div>
                                    </tpl>
                                    <strong>Stock#:{SKU}</strong>
                                    <strong>Price:${Price}</strong>
                                </div>
                            </tpl>
                        </Html>
                    </Tpl>
                    <Plugins>
                        <ext:DataViewAnimated ID="DataViewAnimated1" runat="server" Duration="550" IDProperty="InventoryID" />
                    </Plugins>

                </ext:DataView>
            </Items>

        </ext:Panel>

    </form>

In back end I have written following coding:

 protected int BindGrid(int Start)
        {
            DataClasses1DataContext db = new DataClasses1DataContext();
            int Limit = Convert.ToInt32(ComboBox1.SelectedItem.Value);
            Session["Start"] = start;
            var v = (from c in db.Inventories
                     where c.InventoryID >= start
                     select c).Take(Limit);

            Store1.DataSource = v;
            Store1.DataBind();
            int Total = db.Inventories.Count();
            return Total;
        }

        protected void MyData_Refresh(object sender, StoreReadDataEventArgs e)
        {
            if (Session["Start"] == null)
            {
                start = 1;
            }
            else
            {
                start = Convert.ToInt32(Session["Start"]) + Convert.ToInt32(ComboBox1.SelectedItem.Value);
                Session["Start"] = start;
            }
            e.Total = this.BindGrid(start);
        }

As I got to know from your example that to do paging with remote data we have to pass "start" and "limit". I can pass the limit. But how to pass "start" value that I don't know. SO please help me. Everything else is finished. I don't know how to get "start" value. So please help me to get "Start" value in above example.

[rammus]

i solved my problem with remote paging something like this

in your store put

<Proxy>
    <ext:PageProxy DirectFn="App.direct.BindData" />
</Proxy>

and your directmethod is

<script runat="server">
    [DirectMethod]
    public object BindData(string action, Dictionary<string, object> extraParams)
    {
        StoreRequestParameters prms = new StoreRequestParameters(extraParams);

        var start = prms.Start;
        var limit = prms.Limit;
    }    
</script>

[kavit@bdtpark.com]

i solved my problem with remote paging something like this

in your store put

<Proxy>
    <ext:PageProxy DirectFn="App.direct.BindData" />
</Proxy>

and your directmethod is

<script runat="server">
    [DirectMethod]
    public object BindData(string action, Dictionary<string, object> extraParams)
    {
        StoreRequestParameters prms = new StoreRequestParameters(extraParams);

        var start = prms.Start;
        var limit = prms.Limit;
    }    
</script>

Thanks for the reply rammus
what should I return in this "BindData" method. If possible please provide me full coding where you applied paging.