onclick for GridClientSelectColumn select-all checkbox

6 posts, 1 answers
  1. Jeff
    Jeff avatar
    100 posts
    Member since:
    Apr 2008

    Posted 04 Jan 2011 Link to this post

    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?
  2. Answer
    Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 05 Jan 2011 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Jeff
    Jeff avatar
    100 posts
    Member since:
    Apr 2008

    Posted 05 Jan 2011 Link to this post

    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.
  5. Jeff Kershner
    Jeff Kershner avatar
    62 posts
    Member since:
    Aug 2009

    Posted 18 Jul 2012 Link to this post

    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?
  6. Daniel
    Admin
    Daniel avatar
    4943 posts

    Posted 23 Jul 2012 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  7. Sunil
    Sunil avatar
    230 posts
    Member since:
    Jan 2004

    Posted 23 Aug 2012 Link to this post

    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"];
      }
    }
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017