How to replace [...] in DataGrid when doing custom paging?

D

Daniel Walzenbach

Hi,

I want to change paging of the DataGrid in that way that instead of [...]
the number will be shown. Does anybody know how this can be done?

Thank you!

Daniel
 
S

Steven Cheng[MSFT]

Hi Daniel,

Welcome to ASP.NET newsgroup. As for the modifying the ASP.NET DataGrid's
buildin pager style's question. I think we may start from the following
means:

The ASP.NET's Buildin pager is rendered in the Pager Section of the
datagrid, we can access that section through the ItemCreated event. The
Pager section is infact an TableCell , and all the number, [...] links are
all Linkbuttons in that TableCell. So if you want to do any modification or
customization, we should manually access that TableCell and modify it's
Controls colleciton. Here is a test page I've built, you can have a look:

=========aspx=============
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>custompager</title>
<meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
<meta name="CODE_LANGUAGE" Content="C#">
<meta name="vs_defaultClientScript" content="JavaScript">
<meta name="vs_targetSchema"
content="http://schemas.microsoft.com/intellisense/ie5">
</HEAD>
<body>
<form id="Form1" method="post" runat="server">
<asp:DataGrid id="dgPager" runat="server" AllowPaging="True"
PageSize="5" AutoGenerateColumns="False">
<Columns>
<asp:BoundColumn DataField="ID" HeaderText="ID"></asp:BoundColumn>
<asp:BoundColumn DataField="Name" HeaderText="Name"></asp:BoundColumn>
<asp:BoundColumn DataField="Email"
HeaderText="Email"></asp:BoundColumn>
</Columns>
<PagerStyle Mode="NumericPages"></PagerStyle>
</asp:DataGrid>
</form>
</body>
</HTML>

=======code behind=======

public class custompager : System.Web.UI.Page
{
protected System.Web.UI.WebControls.DataGrid dgPager;

private void Page_Load(object sender, System.EventArgs e)
{
if(!IsPostBack)
{
dgPager.DataSource = GetDataSource();
dgPager.DataBind();
}
}


private DataTable GetDataSource()
{
DataTable dt = new DataTable("Users");
dt.Columns.Add("ID", typeof(long));
dt.Columns.Add("Name");
dt.Columns.Add("Email");


for(int i=0;i<500;i++)
{
DataRow dr = dt.NewRow();
dr[0] = i;
dr[1] = "Name_" + i;
dr[2] = "Email_" + i;

dt.Rows.Add(dr);
}

return dt;
}

#region Web Form Designer generated code
override protected void OnInit(EventArgs e)
{
//
// CODEGEN: This call is required by the ASP.NET Web Form Designer.
//
InitializeComponent();
base.OnInit(e);
}

/// <summary>
/// Required method for Designer support - do not modify
/// the contents of this method with the code editor.
/// </summary>
private void InitializeComponent()
{
this.dgPager.ItemCreated += new
System.Web.UI.WebControls.DataGridItemEventHandler(this.dgPager_ItemCreated)
;
this.dgPager.PageIndexChanged += new
System.Web.UI.WebControls.DataGridPageChangedEventHandler(this.dgPager_PageI
ndexChanged);
this.Load += new System.EventHandler(this.Page_Load);

}
#endregion

private void dgPager_PageIndexChanged(object source,
System.Web.UI.WebControls.DataGridPageChangedEventArgs e)
{
dgPager.CurrentPageIndex = e.NewPageIndex;
dgPager.DataSource = GetDataSource();
dgPager.DataBind();
}

private void dgPager_ItemCreated(object sender,
System.Web.UI.WebControls.DataGridItemEventArgs e)
{
if(e.Item.ItemType == ListItemType.Pager)
{
LinkButton btnFirst = new LinkButton();
LinkButton btnLast = new LinkButton();

btnFirst.ID = "btnFirstPage";
btnFirst.Text = "First Page";

btnLast.ID = "btnLastPage";
btnLast.Text = "Last Page";


TableCell tc = e.Item.Controls[0] as TableCell;

if(tc != null)
{
tc.Controls.AddAt(0,btnFirst);
tc.Controls.AddAt(tc.Controls.Count, btnLast);
}
Response.Write("<br>" + e.Item.Controls[0].Controls.Count);
}
}
}

=================================

There are also many tech articles over other internet development community
discussing on the similiar problem. HTH.


Steven Cheng
Microsoft Online Support

Get Secure! www.microsoft.com/security
(This posting is provided "AS IS", with no warranties, and confers no
rights.)
 
D

Daniel Walzenbach

Steven,

I first want to thank you for your reply. Since I had some trouble getting
your code to run I translated it to vb.net (the .aspx page is still the same):

============code behind================
Public Class WebForm1
Inherits System.Web.UI.Page

#Region " Vom Web Form Designer generierter Code "

'Dieser Aufruf ist für den Web Form-Designer erforderlich.
<System.Diagnostics.DebuggerStepThrough()> Private Sub
InitializeComponent()

End Sub
Protected WithEvents dgPager As System.Web.UI.WebControls.DataGrid

'HINWEIS: Die folgende Platzhalterdeklaration ist für den Web
Form-Designer erforderlich.
'Nicht löschen oder verschieben.
Private designerPlaceholderDeclaration As System.Object

Private Sub Page_Init(ByVal sender As System.Object, ByVal e As
System.EventArgs) Handles MyBase.Init
'CODEGEN: Dieser Methodenaufruf ist für den Web Form-Designer
erforderlich
'Verwenden Sie nicht den Code-Editor zur Bearbeitung.
InitializeComponent()
End Sub

#End Region

Private Sub Page_Load(ByVal sender As System.Object, ByVal e As
System.EventArgs) Handles MyBase.Load

If Not IsPostBack Then

dgPager.DataSource = GetDataSource()
dgPager.DataBind()
End If

End Sub

Private Function GetDataSource() As System.Data.DataTable

Dim dt As System.Data.DataTable = New DataTable("Users")
dt.Columns.Add("ID", GetType(System.Int32))
dt.Columns.Add("Name")
dt.Columns.Add("Email")

For i As System.Int32 = 0 To 500

Dim dr As System.Data.DataRow = dt.NewRow()
dr(0) = i
dr(1) = "Name_" & i
dr(2) = "Email_" & i

dt.Rows.Add(dr)
Next

Return dt

End Function


Private Sub dgPager_PageIndexChanged(ByVal source As Object, ByVal e As
System.Web.UI.WebControls.DataGridPageChangedEventArgs) Handles
dgPager.PageIndexChanged
dgPager.CurrentPageIndex = e.NewPageIndex
dgPager.DataSource = GetDataSource()
dgPager.DataBind()
End Sub

Private Sub dgPager_ItemCreated(ByVal sender As Object, ByVal e As
System.Web.UI.WebControls.DataGridItemEventArgs) Handles dgPager.ItemCreated

If e.Item.ItemType = ListItemType.Pager Then

Dim btnFirst As System.Web.UI.WebControls.LinkButton = New
System.Web.UI.WebControls.LinkButton
Dim btnLast As System.Web.UI.WebControls.LinkButton = New
System.Web.UI.WebControls.LinkButton

btnFirst.ID = "btnFirstPage"
btnFirst.Text = "First Page"

btnLast.ID = "btnLastPage"
btnLast.Text = "Last Page"

Dim tc As System.Web.UI.WebControls.TableCell =
CType(e.Item.Controls(0), System.Web.UI.WebControls.TableCell)

If Not tc Is Nothing Then

tc.Controls.AddAt(0, btnFirst)
tc.Controls.AddAt(tc.Controls.Count, btnLast)

End If

Response.Write("<br>" & e.Item.Controls(0).Controls.Count)

End If

End Sub

End Class

' =================================

When I compile the code I get "First Page" and "Last Page" Buttons in
addition to the "..." buttons. Question now is if there is a clever way to
txtend the "..." buttons in a way that they would e.g. show the following:

[<< 10] [11] [12] [13] [14] [15] [16] [17] [18] [19] [20 >>]

Thank you!

Daniel




Steven Cheng said:
Hi Daniel,

Welcome to ASP.NET newsgroup. As for the modifying the ASP.NET DataGrid's
buildin pager style's question. I think we may start from the following
means:

The ASP.NET's Buildin pager is rendered in the Pager Section of the
datagrid, we can access that section through the ItemCreated event. The
Pager section is infact an TableCell , and all the number, [...] links are
all Linkbuttons in that TableCell. So if you want to do any modification or
customization, we should manually access that TableCell and modify it's
Controls colleciton. Here is a test page I've built, you can have a look:

=========aspx=============
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>custompager</title>
<meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
<meta name="CODE_LANGUAGE" Content="C#">
<meta name="vs_defaultClientScript" content="JavaScript">
<meta name="vs_targetSchema"
content="http://schemas.microsoft.com/intellisense/ie5">
</HEAD>
<body>
<form id="Form1" method="post" runat="server">
<asp:DataGrid id="dgPager" runat="server" AllowPaging="True"
PageSize="5" AutoGenerateColumns="False">
<Columns>
<asp:BoundColumn DataField="ID" HeaderText="ID"></asp:BoundColumn>
<asp:BoundColumn DataField="Name" HeaderText="Name"></asp:BoundColumn>
<asp:BoundColumn DataField="Email"
HeaderText="Email"></asp:BoundColumn>
</Columns>
<PagerStyle Mode="NumericPages"></PagerStyle>
</asp:DataGrid>
</form>
</body>
</HTML>

=======code behind=======

public class custompager : System.Web.UI.Page
{
protected System.Web.UI.WebControls.DataGrid dgPager;

private void Page_Load(object sender, System.EventArgs e)
{
if(!IsPostBack)
{
dgPager.DataSource = GetDataSource();
dgPager.DataBind();
}
}


private DataTable GetDataSource()
{
DataTable dt = new DataTable("Users");
dt.Columns.Add("ID", typeof(long));
dt.Columns.Add("Name");
dt.Columns.Add("Email");


for(int i=0;i<500;i++)
{
DataRow dr = dt.NewRow();
dr[0] = i;
dr[1] = "Name_" + i;
dr[2] = "Email_" + i;

dt.Rows.Add(dr);
}

return dt;
}

#region Web Form Designer generated code
override protected void OnInit(EventArgs e)
{
//
// CODEGEN: This call is required by the ASP.NET Web Form Designer.
//
InitializeComponent();
base.OnInit(e);
}

/// <summary>
/// Required method for Designer support - do not modify
/// the contents of this method with the code editor.
/// </summary>
private void InitializeComponent()
{
this.dgPager.ItemCreated += new
System.Web.UI.WebControls.DataGridItemEventHandler(this.dgPager_ItemCreated)
;
this.dgPager.PageIndexChanged += new
System.Web.UI.WebControls.DataGridPageChangedEventHandler(this.dgPager_PageI
ndexChanged);
this.Load += new System.EventHandler(this.Page_Load);

}
#endregion

private void dgPager_PageIndexChanged(object source,
System.Web.UI.WebControls.DataGridPageChangedEventArgs e)
{
dgPager.CurrentPageIndex = e.NewPageIndex;
dgPager.DataSource = GetDataSource();
dgPager.DataBind();
}

private void dgPager_ItemCreated(object sender,
System.Web.UI.WebControls.DataGridItemEventArgs e)
{
if(e.Item.ItemType == ListItemType.Pager)
{
LinkButton btnFirst = new LinkButton();
LinkButton btnLast = new LinkButton();

btnFirst.ID = "btnFirstPage";
btnFirst.Text = "First Page";

btnLast.ID = "btnLastPage";
btnLast.Text = "Last Page";


TableCell tc = e.Item.Controls[0] as TableCell;

if(tc != null)
{
tc.Controls.AddAt(0,btnFirst);
tc.Controls.AddAt(tc.Controls.Count, btnLast);
}
Response.Write("<br>" + e.Item.Controls[0].Controls.Count);
}
}
}

=================================

There are also many tech articles over other internet development community
discussing on the similiar problem. HTH.


Steven Cheng
Microsoft Online Support

Get Secure! www.microsoft.com/security
(This posting is provided "AS IS", with no warranties, and confers no
rights.)
 
S

Steven Cheng[MSFT]

Hi Daniel,

Thanks for your followup. Yes, the sample code I provided in the former
message just added two addiontal LinkButtons in the Grid's Pager. In fact,
it just demonstrate how to access the DataGrid's Pager section so as to do
some customzation. As for manually expand those ........ links, I don't
think there has any simple means, if you do need to remove them or manually
display all the existing page indexes, we may need to manually remove those
exisint items and add our own linkbuttons. Or otherwise, we just completely
remove all the existing controls in the Pager TablCell and replace them
with our own paging UI .

How do you think?

Please feel free to post here if you have any questions.

Thanks & Regards,

Steven Cheng
Microsoft Online Support

Get Secure! www.microsoft.com/security
(This posting is provided "AS IS", with no warranties, and confers no
rights.)
 
D

Daniel Walzenbach

Hi Steven,

my problem simply is that I don’t like the approach to get a bunch of data
(e.g. 100000 rows) bind them to a grid which display some rows (e.g. 20 rows)
and throws away the rest. I therefore wrote a sp which returns only the data
I need. For this to work the sp has to know which page will be displayed.
Question is now how to translate […] to the page number?

Best regards,

Daniel
 
S

Steven Cheng[MSFT]

Hi Daniel,

Thanks for your followup.
"approach to get a bunch of data
(e.g. 100000 rows) bind them to a grid which display some rows (e.g. 20
rows)
and throws away the rest. I therefore wrote a sp which returns only the
data
I need. "

Do you means that you will only return the data of one page everytime? If
so, I suggest that you use Custom Paging and also customzie the Pager UI
Section. As mentioned in the following msdn reference:

http://msdn.microsoft.com/library/en-us/vbcon/html/vbtskSpecifyingPagingBeha
viorInDataGridWebControl.asp?frame=true

That means we only retrieve one page's records each time and bind to the
datagrid. Also, all the numeric linkbuttons are provided by ourselves.
Then, we can provide a single eventhandler for those numeric buttons in
that button, we retrieve the specified page's records and rebind the
datagrid with the new page's records.

The buildin's pager UI is not very flexible and if using default page, we
must provide all the data records and let the datagrid calculate the pages
for us.

Thanks,


Steven Cheng
Microsoft Online Support

Get Secure! www.microsoft.com/security
(This posting is provided "AS IS", with no warranties, and confers no
rights.)
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,888
Messages
2,569,965
Members
46,294
Latest member
HollieYork

Latest Threads

Top