GridView - Com pager avançado

<< Click to Display Table of Contents >>

Navigation:  ASP.NET > ASP Controls > GridView >

GridView - Com pager avançado

Previous pageReturn to chapter overviewNext page

Como vai ficar

 

gridpager

 


 

Primeiro passo: construir uma lib

 

Crie um novo projeto web em branco

E adicione 2 classes:

 

GridViewWithPager.cs

 

using System;

using System.Globalization;

using System.Reflection;

using System.Web.UI;

using System.Web.UI.HtmlControls;

using System.Web.UI.WebControls;

 

namespace GradePaginador

{

 public class GridViewWithPager: GridView

 {

         public bool UseCustomPager

         {

                 get { return (bool?) ViewState["UseCustomPager"?? false; }

                 set { ViewState["UseCustomPager"= value; }

         }

 

         protected override void InitializePager(GridViewRow row, int columnSpan, PagedDataSource pagedDataSource)

         {

                 if (UseCustomPager)

                         CreateCustomPager(row, columnSpan, pagedDataSource);

                 else

                         base.InitializePager(row, columnSpan, pagedDataSource);

         }

 

         protected virtual void CreateCustomPager(GridViewRow row, int columnSpan, PagedDataSource pagedDataSource)

         {

                 int pageCount = pagedDataSource.PageCount;

                 int pageIndex = pagedDataSource.CurrentPageIndex + 1;

                 int pageButtonCount = PagerSettings.PageButtonCount;

 

                 TableCell cell = new TableCell();

                 row.Cells.Add(cell);

                 if (columnSpan > 1) cell.ColumnSpan = columnSpan;

 

                 if (pageCount > 1)

                 {

                         HtmlGenericControl pager = new HtmlGenericControl("div");

                         pager.Attributes["class"= "pagination";

                         cell.Controls.Add(pager);

 

                         int min = pageIndex - pageButtonCount;

                         int max = pageIndex + pageButtonCount;

 

                         if (max > pageCount)

                                 min -= max - pageCount;

                         else if (min < 1)

                                 max += 1 - min;

 

                         // Create "previous" button

                         Control page = pageIndex > 1

                                                         ? BuildLinkButton(pageIndex - 2, PagerSettings.PreviousPageText, "Page""Prev")

                                                         : BuildSpan(PagerSettings.PreviousPageText, "disabled");

                         pager.Controls.Add(page);

 

                         // Create page buttons

                         bool needDiv = false;

                         for (int i = 1; i <= pageCount; i++)

                         {

                                 if (i <= 2 || i > pageCount - 2 || (min <= i && i <= max))

                                 {

                                         string text = i.ToString(NumberFormatInfo.InvariantInfo);

                                         page = i == pageIndex

                                                         ? BuildSpan(text, "current")

                                                         : BuildLinkButton(i - 1, text, "Page", text);

                                         pager.Controls.Add(page);

                                         needDiv = true;

                                 }

                                 else if (needDiv)

                                 {

                                         page = BuildSpan("&hellip;"null);

                                         pager.Controls.Add(page);

                                         needDiv = false;

                                 }

                         }

 

                         // Create "next" button

                         page = pageIndex < pageCount

                                         ? BuildLinkButton(pageIndex, PagerSettings.NextPageText, "Page""Next")

                                         : BuildSpan(PagerSettings.NextPageText, "disabled");

                         pager.Controls.Add(page);

                 }

         }

 

         private Control BuildLinkButton(int pageIndex, string text, string commandName, string commandArgument)

         {

                 PagerLinkButton link = new PagerLinkButton(this);

                 link.Text = text;

                 link.EnableCallback(ParentBuildCallbackArgument(pageIndex));

                 link.CommandName = commandName;

                 link.CommandArgument = commandArgument;

                 return link;

         }

 

         private Control BuildSpan(string text, string cssClass)

         {

                 HtmlGenericControl span = new HtmlGenericControl("span");

                 if (!String.IsNullOrEmpty(cssClass)) span.Attributes["class"= cssClass;

                 span.InnerHtml = text;

                 return span;

         }

 

         private string ParentBuildCallbackArgument(int pageIndex)

         {

                 MethodInfo m =

                         typeof (GridView).GetMethod("BuildCallbackArgument"BindingFlags.NonPublic | BindingFlags.Instance, null,

                                                     new Type[] {typeof (int)}, null);

                 return (string) m.Invoke(thisnew object[] {pageIndex});

         }

 }

}

 

PagerLinkButton.cs

 

using System;

using System.Web.UI;

using System.Web.UI.WebControls;

 

namespace GradePaginador

{

 public class PagerLinkButton : LinkButton

 {

         public PagerLinkButton(IPostBackContainer container)

         {

                 _container = container;

         }

 

         public void EnableCallback(string argument)

         {

                 _enableCallback = true;

                 _callbackArgument = argument;

         }

 

         public override bool CausesValidation

         {

                 get { return false; }

                 set { throw new ApplicationException("Cannot set validation on pager buttons"); }

         }

 

         protected override void Render(HtmlTextWriter writer)

         {

                 SetCallbackProperties();

                 base.Render(writer);

         }

 

         private void SetCallbackProperties()

         {

                 if (_enableCallback)

                 {

                         ICallbackContainer container = _container as ICallbackContainer;

                         if (container != null)

                         {

                                 string callbackScript = container.GetCallbackScript(this, _callbackArgument);

                                 if (!string.IsNullOrEmpty(callbackScript)) OnClientClick = callbackScript;

                         }

                 }

         }

 

         #region Private fields

 

         private readonly IPostBackContainer _container;

         private bool _enableCallback;

         private string _callbackArgument;

 

         #endregion

 }

}

 

Compile essa lib, vai gerar uma DLL.


 

Como usar

 

Clique com botão direito sobre o Toolbox na área General e clique "Choose Items..."

Na tela que aparece, clique em "Browse..." e abra a DLL gerada no passo anterior. Vai ficar como mostra a figura:

 

gridpager2

 

Ao pressionar OK, o componente aparece na Toolbox:

 

gridpager3

 

Usando no projeto

 

No seu projeto, abra seu aspx e arraste o componente, vai ficar algo como:

 

   <cc1:GridViewWithPager ID="GridViewWithPager1" runat="server">

  </cc1:GridViewWithPager>

 

Adicione esta informação:

 

 <cc1:GridViewWithPager UseCustomPager="true" ...

 

Daqui pra frente funciona como uma GridView normal. Adicione os campos, etc.

 

Formação CSS

 

Você pode personalizar as cores, fontes, etc, usando esse CSS:

 

  <style>

      div.pagination

       {

          padding: 3px;

          margin: 3px;

       }

      div.pagination a

       {

          padding: 2px 5px 2px 5px;

          margin: 2px;

          border: 1px solid #AAAADD;

          text-decoration: none; /* no underline */

          margin-left: 8px;

          margin-right: 8px;

          color: #000099;

       }

      div.pagination a:hover, div.pagination a:active

       {

          border: 1px solid #000099;

          color: #000;

       }

      div.pagination span.current

       {

          padding: 2px 5px 2px 5px;

          margin: 2px;

          border: 1px solid #000099;

          font-weight: bold;

          background-color: #000099;

          color: #FFF;

          margin-left: 8px;

          margin-right: 8px;

       }

      div.pagination span.disabled

       {

          padding: 2px 5px 2px 5px;

          margin: 2px;

          border: 1px solid #EEE;

          color: #DDD;

          margin-left: 8px;

          margin-right: 8px;

       }

  </style>

 

Fonte

 

http://kpumuk.info/asp-net/gridview-with-custom-digg-like-pager/