Modificare la status bar dei collegamenti del DataGrid di ASP.NET

di Daniele Bochicchio, in ASP.NET, C#, DataGrid,

Pur non essendo particolarmente flessibile di sicuro il DataGrid è comodo da utilizzare ed offre tante funzionalità facilmente implementabili.
Una delle cose che potrebbe essere migliorata è l'area del pager, ovvero il posto in cui sono contenuti i link alle pagine successive, implementate attraverso LinkButton.
In questo esempio dunque sostituiremo nella barra di stato del browser qualcosa come:

javascript:__doPostBack('myDataGrid:_ctl9:_ctl1','')
con un più chiaro "Pagina 1".

Per farlo è sufficiente intercettare l'evento ItemCreated del DataGrid, verificare che il control creato sia il Pager e quindi fare un ciclo sui controls contenuti.
A questo punto si tratta di aggiungere due attributi per fare in modo che il testo cambi attraverso Javascript, che sono OnMouseOver quando si passa sopra e OnMouseOut quando si esce dall'area, che useremo per ripulire la status bar.

[code lang="aspx"]<%@ Page Language="C#"%>
<%@ Import Namespace="System.Data" %>
<%@ Import Namespace="System.Data.SqlClient" %>
<SCRIPT language="C#" runat="server">
// stringa di conn
string connstring = @"server=localhost;database=pubs;trusted_connection=true;";

void Page_Load () {
   // estrazione dati
   if (!IsPostBack)
    bindData() ;
}

// routine di estrazione dati
void bindData () {
   // effettuo il DataBinding sul control
    // connessione
    SqlConnection conn = new SqlConnection(connstring);

    // query
    SqlDataAdapter query = new SqlDataAdapter("SELECT * FROM sales", conn);

    // creo il dataset
    DataSet querydataset = new DataSet();
    query.Fill(querydataset);

   myDataGrid.DataSource = querydataset;
   myDataGrid.DataBind ( );
}

 private void myDataGrid_ItemCreated(object sender, DataGridItemEventArgs e)
{
 // solo se è il pager
 if (e.Item.ItemType == ListItemType.Pager) {
  // elenco tutti i controls all'interno
  TableCell pg = (TableCell) e.Item.Controls[0];

  for (int i = 0; i<pg.Controls.Count;i+=2) {
   // intercetto solo i LinkButton
   if (pg.Controls<i>.ToString().IndexOf("LinkButton") >=0) {
    LinkButton lb = (LinkButton) pg.Controls<i>;
    lb.Attributes.Add("onMouseOver", "window.status='Vai alla pagina " + lb.Text + "';return true;");
    lb.Attributes.Add("onMouseOut", "window.status='';return true;");
   }
  }
 }
}

private void myDataGrid_PageIndexChanged(object sender, DataGridPageChangedEventArgs e){

 // imposta il numero di pagina
 myDataGrid.CurrentPageIndex = e.NewPageIndex;

 // effettua di nuovo il binding
 bindData();
}

</SCRIPT>
<form runat="server">
<ASP:DataGrid id="myDataGrid" runat="server"
  CellPadding = "3"
  HeaderStyle-BackColor="#336699"
  HeaderStyle-Font-Size="Large"
  EditItemStyle-BackColor="yellow"
  ItemStyle-BackColor="lightsteelblue"
  AlternatingItemStyle-BackColor="lightgray"
  AutoGenerateColumns="true"
  onItemCreated="myDataGrid_ItemCreated"
  AllowPaging="True"
  OnPageIndexChanged="myDataGrid_PageIndexChanged"
  PageSize="5"
  PagerStyle-Mode="NumericPages"
  PagerStyle-Font-Bold="True"
  PagerStyle-ForeColor="Red"
  PagerStyle-HorizontalAlign="Center"
/>
</form>

L'esempio può essere sfruttato al meglio creando un Custom Control che erediti da DataGrid, in modo da rendere di più facile utilizzo questa versione modificata all'interno di più pagine o di più progetti.

Commenti

Visualizza/aggiungi commenti

| Condividi su: Twitter, Facebook, LinkedIn

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Approfondimenti

I più letti di oggi