onclick for GridClientSelectColumn select-all checkbox

[Jeff]

I have a RadGrid with a GridClientSelectColumn. I need to enable and disable some buttons on the page, client-side, when certain rows are selected by clicking in the checkbox in each row's GridClientSelectColumn.  I added an onclick event to the checkboxes for the required rows and that's all working fine.

My problem is with the select/deselect all checkboxes in the header and footer of the column. Clicking these changes the selection state of all of the rows, and it doesn't fire the onclick event for each of the individual row checkboxes.  Which means I need to catch onclick on these, as well, and do some processing to decide whether the buttons should be enabled or disabled.

I didn't have any problem attaching a function to the onclick of the header checkbox:

protected void grd_ItemDataBound(object sender, GridItemEventArgs e)

{
if (e.Item is GridHeaderItem)
     {
    GridHeaderItem header = (GridHeaderItem)e.Item;

    TableCell selectBoxCell = header["ClientSelectColumn"];

    Control selectBoxControl = selectBoxCell.Controls[0];

    CheckBox selectBox = selectBoxControl as CheckBox;

    selectBox.Attributes["onclick"] = "return selectall_clicked(this);";

  }

}

The function is called, when the checkbox is clicked, and returns true, but none of the row checkboxes are changed. It looks like the selection of all of the individual rows is done in an onclick handler, and I'm replacing it, instead of extending it.

There's probably a real simple way to add another onclick handler without eliminating an existing one.  Any ideas?

[Princy]

Hello Jeff,

One suggestion is you can select/deselect all rows from client side in 'onclick' event of header CheckBox. The following code snippet shows how to select/deselect all rows from client side.

Java Script:

<script type="text/javascript">
    function selectall_clicked(header_checkbox) {
        var grid = $find("<%=RadGrid1.ClientID %>");
        var MasterTable = grid.get_masterTableView();
        if (header_checkbox.checked) {
            MasterTable.selectAllItems();
        }
        else {
            for (var i = 0; i < MasterTable.get_dataItems().length; i++) {
                MasterTable.get_dataItems()[i].set_selected(false);
            }
        }
   }
 </script>

Thanks,
Princy.

[Jeff]

So, instead of figuring out how to call Telerik's on-click, in addition to my own, I simply have mine do what Telerik's does?

In this case, it should work.  Thanks.

[Jeff Kershner]

I think this is the solution I need to implement, but my RadGridView is nested deep inside a bunch of controls.
How do I get access to the GridView that is inside the following controls:

RadAjaxPanel
RadTabStrip
RadTab
UserControl
RadPanelBar
RadPanelItem
GridView


I have been trying for hours this morning and I can't find a way to get this grid view.  In javascript, I was able to get the gridview by doing this:
header_checkbox.parentNode.parentNode.parentNode.parentNode.id = "UserControlsAccountintList_pnlMain_i1_i0_gvAccountingList"

But I can't call get_masterTableView () on that javascript object or on $find("UserControlsAccountintList_pnlMain_i1_i0_gvAccountingList");
.

Suggestions?

[Daniel]

Hello Jeff,

If you know the server ID of the control you could use our client side API to access the RadGrid object.
Example:

var gridServerId = "gvAccountingList";
var gridObject = $telerik.findControl(document, gridServerId);
...

For more information, please examine the following link:
Telerik static client library

Best regards,
Daniel
the Telerik team

[SUNIL]

I was able to make a minor change to the code you provided and it worked without having to do any special handling to check/uncheck rows through javaScript. Look at the last line, where I insert my custom onclick handler to fire just before existing handler defined by Telerik. You need to make sure that selectall_clicked(this) does not return any true or false as that is taken care by Telerik's existing onclick header.

protected void grd_ItemDataBound(object sender, GridItemEventArgs e)
{
if (e.Item is GridHeaderItem)
     {
    GridHeaderItem header = (GridHeaderItem)e.Item;
    TableCell selectBoxCell = header["ClientSelectColumn"];
    Control selectBoxControl = selectBoxCell.Controls[0];
    CheckBox selectBox = selectBoxControl as CheckBox;
    selectBox.Attributes["onclick"] = "selectall_clicked(this); " + selectBox.Attributes["onclick"];
  }
}