RadGrid client side CheckAll for multiple dynamic columns

[Rowland]

Hello,

I'm using RadGrid Q1 2011 (2011.1.519.40) with several bound columns and then dynamically added check box columns that I add at run time and set in RadGrid1_ItemCreated on bind.  These are templated columns with checkbox headers and the columns using the typical:

GridTemplateColumn templateColumn = new GridTemplateColumn();
templateColumn.HeaderTemplate = new MyHeaderTemplate(sHeader, i);
templateColumn.HeaderText = sHeader;
templateColumn.ItemTemplate = new MyCheckboxTemplate(sHeader, i);
this.RadGrid1.Columns.Add(templateColumn);

 inside of a loop.  The classes are typical InstantiateIn classes only the header has a label with a date.  The checkbox template is just that, a checkbox in every column of every row.  

For reference:

public MyCheckboxTemplate(string cName, int j)
{
    colname = cName;
    index = j;
}
public void InstantiateIn(System.Web.UI.Control container)
{
    CheckBox cb = new CheckBox();
    cb.ID = colname + "_" + index;
    cb.Visible = true;
    cb.Enabled = true;
    container.Controls.Add(cb);
}

MyHeaderTemplate :

public MyHeaderTemplate(string cName, int j)
{
   colname = cName;
   index = j;
}
public void InstantiateIn(System.Web.UI.Control container)
{

    Label lblHeader = new Label();
    lblHeader.ID = colname;
    lblHeader.Text = colname;
    CheckBox cb = new CheckBox();
    cb.Attributes.Add("onClick", "CheckAll(event);");
    cb.ID = colname + "_" + index;
    cb.Visible = true;
    cb.Enabled = true;
    container.Controls.Add(cb);
    container.Controls.Add(lblHeader);

}

I've been banging my head trying to create a straight forward CheckAll client side javascript that will detect which header was clicked and check all the checkboxes in that column if they aren't checked and vice versa.  I've found many examples of how to do this with static columns but can't quite seem to get the JS correct for dynamic columns.  There could be anywhere between 1-180.

Thanks in advance for any help!

[Rowland]

There has to be an easy way to do on the client side using js when there is more that one column.

Anyone?

[Genti]

Hi Rowland,

Thank you for contacting us.

I am attaching a solution which illustrates how you can achieve what you desire.

Here are some notes on the solution:
-First of all, the solution relies on templateColumn.UniqueName to be set server side so that we can identify columns by their unique name.
-Than, we handle the grid created client side event of the grid.
-There, we add handlers for the header checkboxes(so that they update the item checkboxes)
-Also, we add handlers for the item checkboxes to update the header checkbox status(i.e if all item checkboxes get selected then the corresponding header checkbox should be selected)


Hope this helps.


Best wishes,
Genti
the Telerik team