ContextQMD
Back to Devexpress

ASPxClientGridView.GotoPage(pageIndex) Method

aspnet-js-aspxclientgridview-dot-gotopage-x28-pageindex-x29.md

latest11.8 KB
Original Source

ASPxClientGridView.GotoPage(pageIndex) Method

Selects the specified page.

Declaration

ts
GotoPage(
    pageIndex: number
): void

Parameters

NameTypeDescription
pageIndexnumber

The active page’s index.

|

Remarks

Use the GotoPage method to switch between pages in code. End-users can do this via the Pager.

Example

You can totally emulate the pager functionality in a grid template by using the Ajax grid methods.

aspx
<%-- BeginRegion TagPrefix and page properties --%>
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Grid_ColumnResizing_OverflowHidden_DataItemTemplate" %>
<%@ Register Assembly="DevExpress.Web.v13.1" Namespace="DevExpress.Web.ASPxEditors"
    TagPrefix="dx" %>
<%@ Register Assembly="DevExpress.Web.v13.1" Namespace="DevExpress.Web.ASPxGridView" TagPrefix="dx" %>

<%-- EndRegion --%>

<!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>Create the custom pager in the status bar template</title>    
</head>
<body>
    <form id="form1" runat="server">

    <dx:ASPxGridView ID="grid" ClientInstanceName="grid" runat="server" DataSourceID="AccessDataSource1" KeyFieldName="CustomerID" Width="100%" OnCustomCallback="grid_CustomCallback">
        <%-- BeginRegion Grid Columns --%>
        <Columns>
            <dx:GridViewDataColumn FieldName="ContactName" VisibleIndex="0">
            </dx:GridViewDataColumn>
            <dx:GridViewDataColumn FieldName="CompanyName" VisibleIndex="1">
            </dx:GridViewDataColumn>
            <dx:GridViewDataColumn FieldName="City" VisibleIndex="2">
            </dx:GridViewDataColumn>
            <dx:GridViewDataColumn FieldName="Region" VisibleIndex="3">
            </dx:GridViewDataColumn>
            <dx:GridViewDataColumn FieldName="Country" VisibleIndex="4">
            </dx:GridViewDataColumn>
        </Columns>
        <%-- EndRegion --%>
        <Settings ShowStatusBar="Visible" />
        <SettingsPager Visible="false" />
        <Templates>
            <StatusBar>
            <div style="text-align:right;">
                Records per page: 
                <select onchange="window.grid.PerformCallback(this.value);" >
                    <option value="5" <%# WriteSelectedIndex(5) %> >5</option>
                    <option value="10"<%# WriteSelectedIndex(10) %> >10</option>
                    <option value="15" <%# WriteSelectedIndex(15) %> >15</option>
                    <option value="20" <%# WriteSelectedIndex(20) %> >20</option>
                    <option value="25" <%# WriteSelectedIndex(25) %> >25</option>
                </select> 
                <%#GetShowingOnPage() %> 
                 <a title="First" href="JavaScript:grid.GotoPage(0);">&lt;&lt;</a>   
                 <a title="Prev" href="JavaScript:grid.PrevPage();">&lt;</a>  
                Page <input type="text" onchange="if(!grid.InCallback()) grid.GotoPage(parseInt(this.value, 10) - 1)" onkeydown="if (event.keyCode == 13) { event.cancelBubble=true; event.returnValue = false; grid.GotoPage(parseInt(this.value, 10) - 1); return false; }" value="<%# grid.PageIndex + 1 %>" style="width:20px" /> of <%# grid.PageCount %>  
                 <a title="Next" href="JavaScript:grid.NextPage();">&gt;</a>  
                 <a title="Last" href="JavaScript:grid.GotoPage(<%# grid.PageCount - 1 %>);">&gt;&gt;</a>   
            </div>
            </StatusBar>
        </Templates>
    </dx:ASPxGridView>
    <%-- BeginRegion DataSource--%>
    <asp:AccessDataSource ID="AccessDataSource1" runat="server" DataFile="~/App_Data/nwind.mdb"
        SelectCommand="SELECT * FROM [Customers]" DeleteCommand="DELETE FROM [Customers] WHERE [CustomerID] = ?" InsertCommand="INSERT INTO [Customers] ([CustomerID], [CompanyName], [ContactName], [ContactTitle], [Address], [City], [Region], [PostalCode], [Country], [Phone], [Fax]) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)" UpdateCommand="UPDATE [Customers] SET [CompanyName] = ?, [ContactName] = ?, [ContactTitle] = ?, [Address] = ?, [City] = ?, [Region] = ?, [PostalCode] = ?, [Country] = ?, [Phone] = ?, [Fax] = ? WHERE [CustomerID] = ?">
    </asp:AccessDataSource>
    <%-- EndRegion --%>
    </form>
</body>
</html>
csharp
using System;
using System.Data;
using System.Configuration;
using DevExpress.Web.ASPxGridView;

public partial class Grid_ColumnResizing_OverflowHidden_DataItemTemplate : System.Web.UI.Page {
    const string GridCustomPageSizeName = "gridCustomPageSize";
    protected void Page_Init(object sender, EventArgs e) {
        if(Session[GridCustomPageSizeName] != null) {
            grid.SettingsPager.PageSize = (int)Session[GridCustomPageSizeName];
        }
    }
    protected void grid_CustomCallback(object sender, ASPxGridViewCustomCallbackEventArgs e) {
        int newPageSize;
        if(!int.TryParse(e.Parameters, out newPageSize)) return;
        grid.SettingsPager.PageSize = newPageSize;
        Session[GridCustomPageSizeName] = newPageSize;
        grid.DataBind();
    }
    protected string WriteSelectedIndex(int pageSize) {
        return pageSize == grid.SettingsPager.PageSize ? "selected='selected'" : string.Empty;
    }
    protected string GetShowingOnPage() {
        int pageSize = grid.SettingsPager.PageSize;
        int startIndex = grid.PageIndex * pageSize + 1;
        int endIndex = (grid.PageIndex + 1) * pageSize;
        if(endIndex > grid.VisibleRowCount) {
            endIndex = grid.VisibleRowCount;
        }
        return string.Format("Showing {0}-{1} of {2}", startIndex, endIndex, grid.VisibleRowCount);
    }
}
aspx
<%-- BeginRegion TagPrefix and page properties --%>
<%@ Page Language="vb" AutoEventWireup="true" CodeFile="Default.aspx.vb" Inherits="Grid_ColumnResizing_OverflowHidden_DataItemTemplate" %>
<%@ Register Assembly="DevExpress.Web.v13.1" Namespace="DevExpress.Web.ASPxEditors"
    TagPrefix="dx" %>
<%@ Register Assembly="DevExpress.Web.v13.1" Namespace="DevExpress.Web.ASPxGridView" TagPrefix="dx" %>

<%-- EndRegion --%>

<!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>Create the custom pager in the status bar template</title>    
</head>
<body>
    <form id="form1" runat="server">

    <dx:ASPxGridView ID="grid" ClientInstanceName="grid" runat="server" DataSourceID="AccessDataSource1" KeyFieldName="CustomerID" Width="100%" OnCustomCallback="grid_CustomCallback">
        <%-- BeginRegion Grid Columns --%>
        <Columns>
            <dx:GridViewDataColumn FieldName="ContactName" VisibleIndex="0">
            </dx:GridViewDataColumn>
            <dx:GridViewDataColumn FieldName="CompanyName" VisibleIndex="1">
            </dx:GridViewDataColumn>
            <dx:GridViewDataColumn FieldName="City" VisibleIndex="2">
            </dx:GridViewDataColumn>
            <dx:GridViewDataColumn FieldName="Region" VisibleIndex="3">
            </dx:GridViewDataColumn>
            <dx:GridViewDataColumn FieldName="Country" VisibleIndex="4">
            </dx:GridViewDataColumn>
        </Columns>
        <%-- EndRegion --%>
        <Settings ShowStatusBar="Visible" />
        <SettingsPager Visible="false" />
        <Templates>
            <StatusBar>
            <div style="text-align:right;">
                Records per page: 
                <select onchange="window.grid.PerformCallback(this.value);" >
                    <option value="5" <%#WriteSelectedIndex(5)%> >5</option>
                    <option value="10"<%#WriteSelectedIndex(10)%> >10</option>
                    <option value="15" <%#WriteSelectedIndex(15)%> >15</option>
                    <option value="20" <%#WriteSelectedIndex(20)%> >20</option>
                    <option value="25" <%#WriteSelectedIndex(25)%> >25</option>
                </select> 
                <%#GetShowingOnPage()%> 
                 <a title="First" href="JavaScript:grid.GotoPage(0);">&lt;&lt;</a>   
                 <a title="Prev" href="JavaScript:grid.PrevPage();">&lt;</a>  
                Page <input type="text" onchange="if(!grid.InCallback()) grid.GotoPage(parseInt(this.value, 10) - 1)" onkeydown="if (event.keyCode == 13) { event.cancelBubble=true; event.returnValue = false; grid.GotoPage(parseInt(this.value, 10) - 1); return false; }" value="<%#grid.PageIndex + 1%>" style="width:20px" /> of <%#grid.PageCount%>  
                 <a title="Next" href="JavaScript:grid.NextPage();">&gt;</a>  
                 <a title="Last" href="JavaScript:grid.GotoPage(<%#grid.PageCount - 1%>);">&gt;&gt;</a>   
            </div>
            </StatusBar>
        </Templates>
    </dx:ASPxGridView>
    <%-- BeginRegion DataSource--%>
    <asp:AccessDataSource ID="AccessDataSource1" runat="server" DataFile="~/App_Data/nwind.mdb"
        SelectCommand="SELECT * FROM [Customers]" DeleteCommand="DELETE FROM [Customers] WHERE [CustomerID] = ?" InsertCommand="INSERT INTO [Customers] ([CustomerID], [CompanyName], [ContactName], [ContactTitle], [Address], [City], [Region], [PostalCode], [Country], [Phone], [Fax]) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)" UpdateCommand="UPDATE [Customers] SET [CompanyName] = ?, [ContactName] = ?, [ContactTitle] = ?, [Address] = ?, [City] = ?, [Region] = ?, [PostalCode] = ?, [Country] = ?, [Phone] = ?, [Fax] = ? WHERE [CustomerID] = ?">
    </asp:AccessDataSource>
    <%-- EndRegion --%>
    </form>
</body>
</html>
vb
Imports System
Imports System.Data
Imports System.Configuration
Imports DevExpress.Web.ASPxGridView

Partial Public Class Grid_ColumnResizing_OverflowHidden_DataItemTemplate
    Inherits System.Web.UI.Page

    Private Const GridCustomPageSizeName As String = "gridCustomPageSize"
    Protected Sub Page_Init(ByVal sender As Object, ByVal e As EventArgs)
        If Session(GridCustomPageSizeName) IsNot Nothing Then
            grid.SettingsPager.PageSize = DirectCast(Session(GridCustomPageSizeName), Integer)
        End If
    End Sub
    Protected Sub grid_CustomCallback(ByVal sender As Object, ByVal e As ASPxGridViewCustomCallbackEventArgs)
        Dim newPageSize As Integer = Nothing
        If Not Integer.TryParse(e.Parameters, newPageSize) Then
            Return
        End If
        grid.SettingsPager.PageSize = newPageSize
        Session(GridCustomPageSizeName) = newPageSize
        grid.DataBind()
    End Sub
    Protected Function WriteSelectedIndex(ByVal pageSize As Integer) As String
        Return If(pageSize = grid.SettingsPager.PageSize, "selected='selected'", String.Empty)
    End Function
    Protected Function GetShowingOnPage() As String
        Dim pageSize As Integer = grid.SettingsPager.PageSize
        Dim startIndex As Integer = grid.PageIndex * pageSize + 1
        Dim endIndex As Integer = (grid.PageIndex + 1) * pageSize
        If endIndex > grid.VisibleRowCount Then
            endIndex = grid.VisibleRowCount
        End If
        Return String.Format("Showing {0}-{1} of {2}", startIndex, endIndex, grid.VisibleRowCount)
    End Function
End Class

See Also

Online example: How to create a custom pager for the ASPxGridView with the 'Selecting a page size' feature

Grid View

ASPxClientGridView Class

ASPxClientGridView Members