Datagrid Paging

collie · January 19th, 2004, 09:40 AM

Hi ALL,

Can someone please help ?
I have a dg with paging. I want the page numbers to be displayed as follows:
...,10,9,8,7,6,5,4,3,2,1 and not like it is now:
1,2,3,4,5,6,7,8,9,10,...

Any way of doing that?

Thanks

planoie · January 20th, 2004, 01:46 PM

I don't think there is a property that reverses the page order in the paging row of a datagrid. Isn't this counter intuitive anyway?

Peter
------------------------------------------------------
Work smarter, not harder.

katsarosj · January 20th, 2004, 02:10 PM

I agree with Peter. If you want to reverse it, why not just ORDER BY [columnname] DESC?

J

Imar · January 20th, 2004, 03:07 PM

Well, never say never.

Without getting into the discussion whether this is useful or not, it *can* be done. The "proof of concept" below will demonstrate that.

Basically, you'll need to follow these steps:

1. Hook up your DataGrid to an ItemCreated event that will fire for each item that has been created in the DataGrid, including the Pager bar.

2. Inside the ItemCreated event, examine the type of Item that has been created.

3. If it's the pager, get a reference to the entire Pager bar (it's an HTML TableCell)

4. Loop through the Controls collection of this TabelCell control, and extract each Child Control.

5. Add these Child Controls in reversed order to a new TableCell control (your new Pager bar) using the AddAt(0, MyControl) method of the new TableCell control.

6. Remove the original Pager bar from the DataGrid and replace it with your new Pager bar.

Lot's of explanation, relatively little code. Here's part of the ASPX Page:

Code:

<asp:DataGrid 
  id="myDataGrid"
  runat="server" 
  pagesize="5" 
  allowpaging="True" 
  autogeneratecolumns="True" 
  itemstyle-verticalalign="top" 
  showheader="False" 
  gridlines="None" 
  cellpadding="0" 
  width="98%" 
  OnItemCreated="ItemCreated"
  onpageindexchanged="PageIndexChanged" 
>
  <ItemStyle verticalalign="Top"></ItemStyle>
  <PagerStyle mode="NumericPages" horizontalalign="Right"
  forecolor="Black" backcolor="White"></PagerStyle>
</asp:DataGrid>

With the Grid in place, you'll need to add the following code to the main class in your Code Behind file. This example is in C# but it shouldn't be too difficult to translate it to VB.NET:

Code:

protected System.Web.UI.WebControls.DataGrid myDataGrid;

private void Page_Load(object sender, System.EventArgs e)
{
    if (!Page.IsPostBack)
    {
        LoadData();
    }
}

private void LoadData()
{
    // Dummy Data. Replace with your LoadData method
    ArrayList myList = new ArrayList(50);
    for (int i = 0; i < 50; i++)
    {
        myList.Add("Item " + i.ToString());
    }

    myDataGrid.DataSource = myList;
    myDataGrid.DataBind();

}

/// <summary>
/// Fires whenever the user requests a different "page" on the
/// DataGrid. It sets the CurrentPageIndex of the DataGrid to the 
/// newly requested Index and then reloads the Data Source.
/// </summary>
public void PageIndexChanged(object source, System.Web.UI.WebControls.DataGridPageChangedEventArgs e)
{
    myDataGrid.CurrentPageIndex = e.NewPageIndex;
    LoadData();
}

/// <summary>
/// Fires once for each item in the DataGrid control that has been 
/// created, including the Header, Footer, Items, Alternating 
/// Items, etc.
/// </summary>
public void ItemCreated(object sender, System.Web.UI.WebControls.DataGridItemEventArgs e)
{
    ListItemType elemType = e.Item.ItemType;
    if (elemType == ListItemType.Pager)
    {
        int LoopCount;
        TableCell pager = (TableCell) e.Item.Controls[0];

        TableCell newPager = new TableCell();

        for (LoopCount = 0; LoopCount <= pager.Controls.Count - 1; LoopCount++)
        {
            // Cast the item to a Control
            Control o = (Control) pager.Controls[LoopCount];
            // And add it to the pager
            newPager.Controls.AddAt(0, o);
        }
        // Remove the old Pager bar
        e.Item.Controls.RemoveAt(0);
        // And add the new one
        e.Item.Controls.AddAt(0, newPager);
    }
}

The current implementation behaves a little odd. For instance, the non-breaking space between each LinkButton has disappeared. However, with a little bit of tweaking, I think you can get this to work the way you initially intended.

If you have any questions, or need help converting / getting this code to work, feel free to post a question here.

Cheers,

Imar

(Edited the article, updated the Comments for the ItemCreated event)
---------------------------------------
Imar Spaanjaars
Everyone is unique, except for me.

collie · January 21st, 2004, 03:44 AM

Thanks. :)
I will try it and let you know if i succeeded or if there is something I don't understand.

collie · January 21st, 2004, 06:48 AM

Hi,

I tried the code and I get the following error:

Specified argument was out of the range of valid values. Parameter name: index
Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.

Exception Details: System.ArgumentOutOfRangeException: Specified argument was out of the range of valid values. Parameter name: index

Source Error:

Line 123:
Line 124: For LoopCount = 0 To pager.Controls.Count - 1
Line 125: Dim o As Control = CType(pager.Controls(LoopCount), Control)
Line 126:
Line 127: newPager.Controls.AddAt(0, o)

Source File: d:\site\BackOffice\paging.aspx.vb Line: 125

The code in vb:
Sub fillTable()
        sid = "43fdgr6"
        U_ID = txtSearch.Text
        cmd = oConn.CreateCommand
        cmd.CommandText = "SELECT * from USERS WHERE U_ID like '%'+@U_ID+'%' ORDER BY U_ID DESC"
        cmd.Parameters.Add("@U_ID", U_ID)
        cmd.Parameters.Add("@sid", sid)
        Dim da As New SqlDataAdapter(cmd)
        Dim dt As New DataTable("ads")
        da.Fill(dt)
        DataGrid1.DataSource = dt
        DataGrid1.DataBind()

    End Sub
Sub doPaging(ByVal s As Object, ByVal e As DataGridPageChangedEventArgs) Handles DataGrid1.PageIndexChanged
        DataGrid1.CurrentPageIndex = e.NewPageIndex

        fillTable()
    End Sub

Private Sub btnMsg_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnMsg.Click
        Response.Redirect("edituser.aspx?sid=" & sid)

    End Sub
Private Sub DataGrid1_ItemCommand(ByVal source As Object, ByVal e As System.Web.UI.WebControls.DataGridCommandEventArgs ) Handles DataGrid1.ItemCommand

        If e.Item.ItemIndex >= 0 Then
            Dim userCell As TableCell = e.Item.Cells(0)
            Dim user As String = userCell.Text

            If e.CommandSource.commandname = "Update" Then

   Response.Redirect("editUser.aspx?u_id=" & user & "&sid=" & sid)

            End If

If e.CommandSource.commandname = "ShowAll" Then
Response.Redirect("Usermsg.aspx?u_id=" & user & "&sid=" & sid)
            End If
        End If
    End Sub

Public Sub ItemCreated(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.DataGridItemEventArgs)
  Dim elemType As ListItemType = e.Item.ItemType

Dim LoopCount As Integer
Dim pager As TableCell = CType(e.Item.Controls(0), TableCell)

Dim newPager As New TableCell
For LoopCount = 0 To pager.Controls.Count - 1
  Dim o As Control = CType(pager.Controls(LoopCount), Control)

newPager.Controls.AddAt(0, o)
    Next LoopCount

        e.Item.Controls.RemoveAt(0)

        e.Item.Controls.AddAt(0, newPager)

    End Sub 'ItemCreated

End Class

Imar · January 21st, 2004, 07:01 AM

It looks like you're not checking the right type of the item that has been created in ItemCreated. The ItemCreated will fire for any item, like the Header, Items, Alternating items etc.
The code should just deal with the item when it is a Pager. Here's the original code in C#:

Code:

ListItemType elemType = e.Item.ItemType;
    if (elemType == ListItemType.Pager)
    {
        int LoopCount;

In VB, you should do something like this:

Code:

Dim elemType As ListItemType = e.Item.ItemType
If elemType = ListItemType.Pager Then
  ' Do processing of Pager bar here
End If

Alternatively, and much cleaner if you're doing other stuff for Items, Alternating items etc in ItemCreated as well is to use a switch / Select Case construct:

Code:

Dim elemType As ListItemType = e.Item.ItemType
Select Case elemType
  Case ListItemType.Item, ListItemType.AlternatingItem
    ' Deal with Items gere
  Case ListItemType.Footer
    ' Deal with the Footer here
  Case ListItemType.Pager
    ' Stuff for your Pager goes here.
End Select

HtH,

Imar

---------------------------------------
Imar Spaanjaars
Everyone is unique, except for me.

collie · January 21st, 2004, 07:23 AM

Hi,

I added If elemType = ListItemType.Pager Then but i still get the same error.
You mentioned that maybe i am doing something with the header or footer but i don't think that i am. Here is my datagrid:
<asp:datagrid id="DataGrid1" runat="server" BorderStyle="Ridge" Width="100%" CellSpacing="1" GridLines="None" Height="100%" CellPadding="3" OnPageIndexChanged="doPaging" AllowPaging="True" PagerStyle-HorizontalAlign="Center" OnItemCreated="ItemCreated"
BorderColor="White" BorderWidth="2px" BackColor="White" AutoGenerateColumns="False" HorizontalAlign="Right" itemstyle-verticalalign="top" CssClass="GridWidth">

<SelectedItemStyle Font-Bold="True" ForeColor="White" BackColor="#9471DE"></SelectedItemStyle>

<ItemStyle ForeColor="Black" BackColor="#DEDFDE"></ItemStyle>

<HeaderStyle Font-Bold="True" ForeColor="#E7E7FF" BackColor="#4A3C8C"></HeaderStyle>
<FooterStyle ForeColor="Black" BackColor="#C6C3C6"></FooterStyle>
<Columns>
                                    <asp:BoundColumn DataField="U_ID" HeaderText="USERNAME"></asp:BoundColumn>
                                    <asp:TemplateColumn HeaderText="NAME">

</asp:TemplateColumn>
<asp:BoundColumn DataField="u_password" HeaderText="PASSWORD"></asp:BoundColumn>
<asp:ButtonColumn Text="LIST" ButtonType="PushButton" HeaderText="LIST OF MSGS" CommandName="ShowAll" ></asp:ButtonColumn>
<asp:ButtonColumn Text="UPDATE USER" ButtonType="PushButton" HeaderText="UPDATE USER" CommandName="Update"></asp:ButtonColumn>
</Columns>
<ItemStyle VerticalAlign=Top></ItemStyle>
  <PagerStyle mode="NumericPages"
  forecolor="Black" backcolor="White" ></PagerStyle>
</asp:datagrid>

Imar · January 21st, 2004, 07:34 AM

I just mentioned Item and AlternatingItem in case you were using them. If you are using them, a Select Case looks cleaner to me. However, using a simple If works equally well.

Can you post the entire code for the ItemCreated event?

What happens when you debug the page? Does ItemCreated run for each item? To what kind of object does e.Item.ItemType evaluate?

Cheers,

Imar

---------------------------------------
Imar Spaanjaars
Everyone is unique, except for me.

collie · January 21st, 2004, 07:56 AM

Thanks for the quick responses.

The code:
Public Sub ItemCreated(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.DataGridItemEventArgs)

        Dim elemType As ListItemType = e.Item.ItemType

            If elemType = ListItemType.Pager Then

                Dim LoopCount As Integer
                Dim pager As TableCell = CType(e.Item.Controls(0), TableCell)

                Dim newPager As New TableCell

                For LoopCount = 0 To pager.Controls.Count - 1
                    Dim o As Control = CType(pager.Controls(LoopCount), Control)

                    newPager.Controls.AddAt(0, o)
                Next LoopCount

                e.Item.Controls.RemoveAt(0)

                e.Item.Controls.AddAt(0, newPager)

            End If

    End Sub 'ItemCreated

When i debug the application and put the cursor over the line:
' Dim elemType As ListItemType = e.Item.ItemType' I get Header
When i move to the next line and place the cursor again over elemType i get pager.
It goes into the loop and return 0,1,2 before it throws the error. I mean when i place my cursor over LOOPCOUNT in the row
' Dim o As Control = CType(pager.Controls(LoopCount), Control)' it gives me 0 then 1 then 2.