How to select/deselect all RadButtons (as checkbox) into a radgrid with javascript

[Martin]

Hi, i have a RadGrid with checkbox like this

<telerik:GridTemplateColumn UniqueName="Assigned" >
                            <ItemTemplate>

                                <telerik:RadButton ID="checkAssigned" runat="server" ToggleType="CheckBox" ButtonType="ToggleButton" AutoPostBack="false" Skin="Forest" EnableEmbeddedSkins="true" EnableEmbeddedBaseStylesheet="true" >
                                    <ToggleStates>
                                        <telerik:RadButtonToggleState PrimaryIconCssClass="rbToggleCheckboxChecked" Selected="true" />
                                        <telerik:RadButtonToggleState PrimaryIconCssClass="rbToggleCheckbox" />
                                    </ToggleStates>
                                </telerik:RadButton>
                            </ItemTemplate>
                            <ItemStyle Width="50px" />
                        </telerik:GridTemplateColumn>

I need a javascript function to select/deselect all the checkboxes in the grid. How can I do this?
Thanks

[Gimmik]

Hi Martin,

Does it have to be a client-side javascript function? The most straightforward way to do this is with a server-side method that will update all the check boxes when you check a box in the header. If you fully leverage the power of AJAX you would only need a partial post-back which would be much more efficient if there is anything else on the page.

Here's an example of to setup the header row with the checkbox.

<MasterTableView AutoGenerateColumns="true">
    <Columns>
        <telerik:GridTemplateColumn UniqueName="CheckBoxTemplateColumn" Display="true">
            <ItemTemplate>
                <asp:CheckBox ID="CheckBox1" runat="server" OnCheckedChanged="ToggleRowSelection"
                    AutoPostBack="True" />
            </ItemTemplate>
            <HeaderTemplate>
                <asp:CheckBox ID="headerChkbox" runat="server" OnCheckedChanged="ToggleSelectedState"
                    AutoPostBack="True" />
            </HeaderTemplate>
        </telerik:GridTemplateColumn>
    </Columns>
</MasterTableView>

Here's the server-side methods.

    protected void ToggleRowSelection(object sender, EventArgs e)
    {
        ((sender as CheckBox).NamingContainer as GridItem).Selected = (sender as CheckBox).Checked;
        bool checkHeader = true;
        foreach (GridDataItem dataItem in RadGrid1.MasterTableView.Items)
        {
            if (!(dataItem.FindControl("CheckBox1") as CheckBox).Checked)
            {
                checkHeader = false;
                break;
            }
        }
        GridHeaderItem headerItem = RadGrid1.MasterTableView.GetItems(GridItemType.Header)[0] as GridHeaderItem;
        (headerItem.FindControl("headerChkbox") as CheckBox).Checked = checkHeader;
    }


    protected void ToggleSelectedState(object sender, EventArgs e)
    {
        CheckBox headerCheckBox = (sender as CheckBox);
        foreach (GridDataItem dataItem in RadGrid1.MasterTableView.Items)
        {
            (dataItem.FindControl("CheckBox1") as CheckBox).Checked = headerCheckBox.Checked;
            dataItem.Selected = headerCheckBox.Checked;
        }
    }

Hope this helps!
-Gimmik

[Martin]

Yes, It has to be using javascript, the idea is to loop over the checkboxes in the grid and use .set_checked() method to set the checked value.

[Gimmik]

Hi Martin,

In that case - Here's demo on client side row selection:
http://demos.telerik.com/aspnet-ajax/grid/examples/client/selecting/defaultcs.aspx

If that's what you need here's the document that shows you how to implement it. Otherwise I can show you how to do it fully manual with an explicit JavaScript function:
http://www.telerik.com/help/aspnet-ajax/grid-selecting-multiple-rows-client-side.html

Hope this helps!
-Gimmik

[Pero]

Hi Martin,

The easiest way to check/uncheck all the RadButton's in the grid, is to handle the load (OnClientLoad property) client-side event of the button, and populate a global array of buttons. For your convenience I have created a sample project that implements this idea. Here is its full source code:
ASPX

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript">
        var buttons = [];
        function ButtonLoad(sender, args)
        {
            Array.add(buttons, sender);
        }
        var checked = true;
        function Check()
        {
            var length = buttons.length;
            for (var i = 0; i < length; i++)
            {
                buttons[i].set_checked(checked);
            }
            checked = !checked;
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <div>
        <input type="button" onclick="Check(); return false;" value="Check Buttons" />
    </div>
    <telerik:RadGrid ID="RadGrid1" runat="server">
        <MasterTableView AutoGenerateColumns="true">
            <Columns>
                <telerik:GridTemplateColumn UniqueName="Assigned">
                    <ItemTemplate>
                        <telerik:RadButton ID="checkAssigned" runat="server" ToggleType="CheckBox" ButtonType="ToggleButton"
                            OnClientLoad="ButtonLoad" Skin="Forest" AutoPostBack="false">
                        </telerik:RadButton>
                    </ItemTemplate>
                    <ItemStyle Width="50px" />
                </telerik:GridTemplateColumn>
            </Columns>
        </MasterTableView>
    </telerik:RadGrid>
    </form>
</body>
</html>

CS

using System;

public partial class Default_Button : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        RadGrid1.DataSource = new string[] { "1", "2", "3", "4", "2", "3", "4", "2", "3", "4", "2", "3", "4", "2", "3", "4" };
        RadGrid1.DataBind();
    }
}

Greetings,
Pero
the Telerik team

[Martin]

Thanks, works great