Custom DataGrid With Next,Previous,First,Last and Numeric paging Paging

Introduction

In one of my web project, the requirement was such that the pager should have Numeric paging as well as links for previous, next, first and last. The Datagrid did not directly support this type of layout, that why I have developed my custom datagrid which can be use throughout.

Background

Basic idea is very simple, create a custom control which is inherited by DataGrid and override ItemCreated event. Here we have to understand how Datagrid render controls for Pager. The DataGrid Render controld like this (LinkButton or label) (Literal control) (LinkButton or label) ... and so on Literal are used to put space between controls and Label are used to show disabled pager links.

We can get the calculate the total pages from the items in pager cell using formula

TotalPages = (e.Item.Cells[0].Controls.Count /2) +1

This count is useful for assigning the command argument for ImageButton for Last page. The onItemCreated event is written below.

Using the Code

Just add the MycustomDG.dll in VS.NET tool bar or add reference to MycustomDG.dll. Assign below mention properties

• ShowPreviousAndNextImage


• ShowFirstAndLastImage


• ImageFirst


• ImageLast


• ImagePrevious


• ImageNext

Code For OnItemCreated

protected override void OnItemCreated(DataGridItemEventArgs e)
{
   if(e.Item.ItemType == ListItemType.Pager)
   {
      int _TotalCount  = e.Item.Cells[0].Controls.Count;
      int _TotalPagers = (_TotalCount/ 2) +1;
      int _CurrentPage = this.CurrentPageIndex;
      if(_TotalCount > 1)
      {
         LinkButton btnPrev  = new LinkButton();
         LinkButton btnNext  = new LinkButton();
         LinkButton btnFirst = new LinkButton();
         LinkButton btnLast  = new LinkButton();

         if(_Show_Prev_Next_Image)
         {
            #region Next & previous
            if(_CurrentPage +1 <= _TotalPagers )
            {    // Enable Next
               string sImgNext ="<img alt='Next' border='0'
                                  src='"+ _ImgNext+"'>";
               btnNext.Text = sImgNext;
               btnNext.CommandArgument = (_CurrentPage+2).ToString();
               btnNext.CommandName = "Page";
               btnNext.Enabled = true;
            }
            else
            {    // disable next
               string sImgNext ="<img alt='Next' border='0'
                                  src='"+ _ImgNext+"'>";
               btnNext.Text = sImgNext;
               btnNext.Enabled = false;
            }

            if(_CurrentPage > 0)
            {    // enable Previous
               string sImgPre ="<img alt='Previous' border='0'
                                 src='"+ _ImgPrev+"'>";
               btnPrev.Text = sImgPre;
               btnPrev.CommandName = "Page";
               btnPrev.CommandArgument = (_CurrentPage).ToString();
               btnPrev.Enabled = true;
            }
            else
            {    // disable previous
               string sImgPre ="<img alt='Previous' border='0'
                                 src='"+ _ImgPrev+"'>";
               btnPrev.Text = sImgPre;
               btnPrev.Enabled = false;
            }
            #endregion
         }


         if(_Show_First_Last_Image)
         {
            #region First & last
            if(e.Item.Cells[0].Controls[_TotalCount -1].GetType() !=
               typeof(System.Web.UI.WebControls.Label))
            {
               string sImgNext ="<img alt='Last' border='0'
                                  src='"+ _ImageLast+"'>";
               btnLast.CommandArgument = _TotalPagers.ToString();
               btnLast.CommandName = "Page";
               btnLast.Text = sImgNext;
               btnLast.Enabled = true;
            }
            else
            {
               string sImgNext ="<img alt='Last' border='0'
                                  src='"+ _ImageLast+"'>";
               btnLast.Text = sImgNext;
               btnLast.Enabled = false;
            }


            if(e.Item.Cells[0].Controls[0].GetType() !=
               typeof(System.Web.UI.WebControls.Label))
            {
               string sImgPre ="<img alt='First' border='0'
                                 src='"+ _ImageFirst+"'>";
               btnFirst.CommandArgument = "1";
               btnFirst.CommandName = "Page";
               btnFirst.Text = sImgPre;
               btnFirst.Enabled = true;
            }
            else
            {
               string sImgPre ="<img alt='First' border='0'
                                 src='"+ _ImageFirst+"'>";
               btnFirst.Text = sImgPre;
               btnFirst.Enabled = false;
            }
            #endregion
         }


         e.Item.Cells[0].Controls.AddAt(0,btnPrev);
         e.Item.Cells[0].Controls.AddAt(e.Item.Cells[0].Controls.Count,
                                        btnNext);
         // Add These 2 Images at the First and last Position
         e.Item.Cells[0].Controls.AddAt(0,btnFirst);
         e.Item.Cells[0].Controls.AddAt(e.Item.Cells[0].Controls.Count,
                                        btnLast);
      }
   }
   base.OnItemCreated (e);
}

AJAX vs Postback

Ajax is a framework that uses Javascript, DOM model and synchronous request.
However the framework in not new. it was created in somewhere around 1998, but after Gmail start using it, every one start looking into it. The name AJAx is newly defined it was earlier known as "XMLHTTP".
However many of the ASP.NET compatible libraries and controls are developed like Michal-schewarz one and anthom.net, Magic library etc. Out of this i found Michael-Schwarz one is best. Because its light wait, unlike Anthom its only post a little data which is required and get the data which it suppose to be

Comparison

Anthom:

1. Programmer bo not need to write even a single line of code for invoking any server side function
2. It Provide many controls as dropdown list Lable datalist etc and all the event just like server control. and programmer need to do the same practice as he would be doing with normal ASP.NET control
3. For every button click or any of the event (if scriptCallback is set to true), the total content of view state is sent to server using XMLHTTP and the data for whole page is received. then at the client side the other control get refreshed.

Michael-Schewarz One

1. Only the part of the data you want to send to server is being sent, and respective response is received
2. Programmer have to write some line of code in order to Post and receive server response and to put response into desire HTML tag as "DIV"
3. It can handle session variables.