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

6 posts, 1 answers
  1. Martin
    Martin avatar
    13 posts
    Member since:
    Nov 2010

    Posted 16 May 2011 Link to this post

    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
  2. Gimmik
    Gimmik avatar
    170 posts
    Member since:
    May 2011

    Posted 16 May 2011 Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Martin
    Martin avatar
    13 posts
    Member since:
    Nov 2010

    Posted 16 May 2011 Link to this post

    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.
  5. Gimmik
    Gimmik avatar
    170 posts
    Member since:
    May 2011

    Posted 16 May 2011 Link to this post

    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
  6. Answer
    Pero
    Admin
    Pero avatar
    1156 posts

    Posted 18 May 2011 Link to this post

    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">
    <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

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  7. Martin
    Martin avatar
    13 posts
    Member since:
    Nov 2010

    Posted 18 May 2011 Link to this post

    Thanks, works great
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017