Web.UI ASP.NET Grid: Synchronize Checkbox States with Row Selection

Posted Mon Jun 15, 2009 @ 5:00 PM

One can use the Grid's itemBeforeCheckChange and itemBeforeSelect client events to synchronize the state of checkboxes and row selection. Some extra logic is required since checkbox clicks also trigger row selection. I use the load client event is used to initially set all checked rows as selected. The code here I used on the Grid Editing - Client Mode example, after adding DataField "Discontinued" as a boolean ColumnType="CheckBox" GridColumn.

ASPX:
<ComponentArt:Grid id="Grid1" ...>
  <Columns>
    <ComponentArt:GridColumn DataField="Discontinued" ColumnType="CheckBox" />
....
  <ClientEvents>
    <itemBeforeCheckChange eventhandler="Grid1_onItemBeforeCheckChange" />
    <itemBeforeSelect eventhandler="Grid1_onItemBeforeSelect" />
    <load eventhandler="Grid1_onLoad" />

JS:
var checkboxClick = false;
var rowClick = true;
function Grid1_onItemBeforeCheckChange(sender, e)
{
  checkboxClick = true;
}
function Grid1_onItemBeforeSelect(sender, e)
{
  if (checkboxClick)
  {
    checkboxClick = false;
    e.set_cancel(true);
    if (e.get_item().getMember('Discontinued').get_value())
    {
      rowClick = false;
      sender.select(e.get_item(), true)
    }
    else
    {
      rowClick = true;
      sender.unSelect(e.get_item());
    }
  }
  else
  {
    if (rowClick)
    {
      rowClick = false;
      e.set_cancel(true);
      // 6 is the column index of DataField "Discontinued"
      e.get_item().setValue(6, !e.get_item().getMember('Discontinued').get_value());
      sender.select(e.get_item(), true)
    }
    rowClick = true;
  }
}
function Grid1_onLoad(sender, e)
{
  var table = sender.get_table();
  sender.beginUpdate();
  for (i=0;i<table.getRowCount();i++)
  {
    if (table.getRow(i).getMember('Discontinued').get_value())
    {
      rowClick = false;
      sender.select(table.getRow(i), true);
    }
  }
  sender.endUpdate();
}

If you want selection to ONLY be done via the checkboxes, then modify the Grid1_onItemBeforeSelect client event handler to cancel user clicks.
JS:
function Grid1_onItemBeforeSelect(sender, e)
{
  if (checkboxClick)
  {
    checkboxClick = false;
    e.set_cancel(true);
    if (e.get_item().getMember('Discontinued').get_value())
    {
      rowClick = false;
      sender.select(e.get_item(), true)
    }
    else
    {
      rowClick = true;
      sender.unSelect(e.get_item());
    }
  }
  else
  {
    if (rowClick)
    {
      e.set_cancel(true);
    }
    rowClick = true;
  }
}

 

Posted to Hwan Hong by hwan

Posted on Mon Jun 15, 2009 @ 5:00 PM

Filed under: , , ,

Comments

Posted on Mon Jun 15, 2009 @ 5:00 PM

Need to uncheck checkboxes in all child rows on item collapse of parent row...

Thanks

Carl

Anonymous comments are not allowed. Click here to log in or create an account.