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;
}
}