Una CheckBoxColumn per DataGrid con funzioni di selezione globale degli elementi

di Stefano Mostarda, in UserScript, ASP.NET, Custom Control,

Tutte le applicazioni per la consultazione della posta via browser hanno una caratteristica: una colonna con un CheckBox tramite cui selezionare le email da cancellare. Questa colonna ha nella riga di intestazione un altro CheckBox tramite il quale si possono selezionare o deselezionare tutti quelli presenti nella colonna.
Per fare questo si può utilizzare un custom control che eredita da DataGridColumn.

namespace SMControls
{
  ToolboxData("<{0}:checkboxcolumn runat=server></{0}:checkboxcolumn>")]
  public class CheckBoxColumn : DataGridColumn
  {
    public override void InitializeCell(TableCell cell, int columnIndex, ListItemType itemType) {
      base.InitializeCell (cell, columnIndex, itemType);

      if (!this.Owner.Page.IsClientScriptBlockRegistered("__CHECKBOXCOLUMN")){
        this.Owner.Page.RegisterClientScriptBlock("__CHECKBOXCOLUMN", 
          "<script>" +
          "function HeaderClick(ck, pattern){  " +
          "frm = document.forms[0];  " +
          "for (var i=0; i<frm.elements.length; i++){  " +
          "var e = frm.elements<i>;  " +
          "if (e.type == 'checkbox'){  " +
          "if (e.name.substring(e.name.length - pattern.length, e.name.length) == pattern){  " +
          "e.checked = ck.checked; " +
          "}}}}  " +
          "</script>");
      }

      if (itemType == ListItemType.Header){
        CheckBox ck = new CheckBox();
        ck.Attributes.Add("onclick", String.Format("HeaderClick(this, '{0}{1}');", this.Owner.ID, columnIndex));
        cell.Controls.Add(ck);
      }
      if ((itemType == ListItemType.Item) || (itemType == ListItemType.AlternatingItem)) {
        CheckBox ck = new CheckBox();
        ck.ID += this.Owner.ID + columnIndex;
        cell.Controls.Add(ck);
      }
    }
  }
}

Ai CheckBox che vengono creati nelle righe viene dato un id con un suffisso che possa identificarli come appartenenti ad una determinata colonna. All'evento client "onclick" del CheckBox nell'intestazione viene chiamato un metodo che accetta il checkbox ed il suffisso per i checkbox della colonna. Questo metodo si occuperà di selezionare o deselezionare i checkbox.

Ecco un semplice utilizzo del controllo appena creato:

[code lang="aspx"]<%@ Page language="c#" %>
<%@ Register tagprefix="sm" assembly="CheckBoxColumn" namespace="SMControls"%>
<script runat="server">
  void Page_Load(object sender, System.EventArgs e){
  System.IO.DirectoryInfo di = new System.IO.DirectoryInfo("c:\\");
  DataGrid1.DataSource = di.GetFiles();
  DataGrid1.DataBind();
}
</script>
<form id="Form1" method="post" runat="server">
<asp:datagrid id="DataGrid1" runat="server" autogeneratecolumns="False">
<columns>
  <sm:checkboxcolumn runat="server" />
  <sm:checkboxcolumn runat="server" />
  <asp:boundcolumn runat="server" datafield="name" />
</columns>
</asp:datagrid>

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