#683 - Customizzare il pager del DataGrid

Utilizzare la paginazione con le griglie di dati rappresenta spesso una scelta obbligata, data la numerosità delle informazioni da visualizzare e il poco spazio a disposizione sull'interfaccia utente. Per fortuna il controllo DataGrid prevede in maniera nativa alcuni meccanismi per gestire la paginazione senza scrivere troppo codice.
Esistono due modalità di rappresentazione del Pager, ovvero di quella sezione del controllo che permette di selezionare le opzioni di navigazione sulla griglia. Le due modalità sono: NextPrev, ovvero pulsanti avanti e indietro, e NumericPages, ovvero elenco numerico delle pagine.

Per estendere le possibilità offerte dalle due modalità menzionate, è possibile intercettare l'evento ItemCreated della DataGrid e aggiungere eventuali controlli a runtime. Il trucco sta nel rappresentare il Pager come una TableCell (tramite un cast) e ad essa aggiungere dinamicamente i controlli necessari per la customizzazione.

L'esempio proposto mostra come aggiungere ad un Pager di tipo NextPrev l'etichetta "Pagina [i] di [n]" e i pulsanti di navigazione che permettono di aprire la prima e l'ultima pagina.

<script runat="server" language="C#">

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

private void BindData()
{
  // Ottieni i dati

  [...]

  // Data binding della griglia

  this.dgrAspitalia.DataSource = ds;
  this.dgrAspitalia.DataBind();
}

// Personalizza il pager

private void GridItemCreated(object sender, DataGridItemEventArgs e)
{
  // Pager

  if(e.Item.ItemType == ListItemType.Pager)
  {
    TableCell td = ((TableCell)e.Item.Controls[0]);

    // Numero di pagina

    Label lblPage = new Label();
    lblPage.Width = Unit.Pixel(150);
    lblPage.Height = Unit.Pixel(18);
    lblPage.Text =
      "Pagina " +
      (this.dgrAspitalia.CurrentPageIndex + 1) +
      " di " + this.dgrAspitalia.PageCount +
      "   ";
    td.Controls.AddAt(0, lblPage);

    // Prima pagina

    LinkButton lnkFirst = new LinkButton();
    lnkFirst.Text = "<<";
    if(this.dgrAspitalia.CurrentPageIndex == 0)
      lnkFirst.Enabled = false;
    lnkFirst.Click += new EventHandler(this.FirstClick);
    td.Controls.AddAt(1, lnkFirst);

    // Ultima pagina

    LinkButton lnkLast = new LinkButton();
    lnkLast.Text = ">>";
    if(this.dgrAspitalia.CurrentPageIndex == this.dgrAspitalia.PageCount-1)
      lnkLast.Enabled = false;
    lnkLast.Click += new EventHandler(this.LastClick);
    td.Controls.AddAt(5, lnkLast);

    // Pagina precedente

    if(this.dgrAspitalia.CurrentPageIndex == 0)
      ((Label)td.Controls[2]).Enabled = false;

    // Pagina successiva

    if(this.dgrAspitalia.CurrentPageIndex == this.dgrAspitalia.PageCount-1)
      ((Label)td.Controls[4]).Enabled = false;

    // Separatori

    Literal litSeparator1 = new Literal();
    litSeparator1.Text = " ";
    td.Controls.AddAt(2, litSeparator1);
    Literal litSeparator2 = new Literal();
    litSeparator2.Text = " ";
    td.Controls.AddAt(6, litSeparator2);
  }
}

// Vai alla prima pagina

private void FirstClick(object sender, EventArgs e)
{
  this.dgrAspitalia.CurrentPageIndex = 0;
  BindData();
}

// Vai all'ultima pagina

private void LastClick(object sender, EventArgs e)
{
  this.dgrAspitalia.CurrentPageIndex = this.dgrAspitalia.PageCount-1;
  BindData();
}

// Cambia pagina

private void PageClick(object sender, DataGridPageChangedEventArgs e)
{
  this.dgrAspitalia.CurrentPageIndex = e.NewPageIndex;
  BindData();
}

</script>

<asp:DataGrid ID="dgrAspitalia" Runat="server" AutoGenerateColumns="False"
  CellPadding="5" CellSpacing="0" BorderWidth="1" AllowPaging="True"
  PageSize="5" OnItemCreated="GridItemCreated" OnPageIndexChanged="PageClick">
  <HeaderStyle Font-Bold="True"></HeaderStyle>
  <PagerStyle Position="Bottom" Mode="NextPrev" PrevPageText="<"
    NextPageText=">" HorizontalAlign="Right"></PagerStyle>
  <Columns>
    <asp:BoundColumn DataField="Field1" HeaderText="Field1"></asp:BoundColumn>
    <asp:BoundColumn DataField="Field2" HeaderText="Field2"></asp:BoundColumn>
    <asp:BoundColumn DataField="Field3" HeaderText="Field3"></asp:BoundColumn>
    <asp:BoundColumn DataField="Field4" HeaderText="Field4"></asp:BoundColumn>
  </Columns>
</asp:DataGrid>


Approfondimenti

Commenti

Esprimi il tuo giudizio su questo script:

Per procedere devi essere autenticato.

Aggiungi un nuovo commento »»»
Per inserire un commento, devi registrarti alla nostra community.




IN EVIDENZA
MISC