Client side programming

3 posts, 0 answers
  1. Pablo Tola
    Pablo Tola avatar
    43 posts
    Member since:
    Nov 2007

    Posted 31 Jan 2011 Link to this post

    I'm using the radbutton as replacement for radio and checkboxes on a web kiosk application.
    I need to do a lot of client side functionallity with them but the documentation is not that good.
    I need to be able to get the count of the selected checkboxes, I need to know if there is at least one radiobutton or checkbox selected, I need to be able to uncheck checkboxes if you click an specific one (mutually exclusive), etc.
    All this is easily achievable using jQuery and standard radio and checkbox controls.
    Could you point me in the right direction on how to achieve this using the radbutton.
    I'm using custom toggle by the way.

    Thanks,

    Pablo Tola.
  2. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 01 Feb 2011 Link to this post

    Hi Pablo,

    There is no built-in client-side functionality, that will enable you to get the count of all selected checkboxes on the page, or determine whether at least one radio is checked, but it can be achieved with the existing client-side API of the RadButton control.
    My suggestion is to keep a global array of all checkboxes and radio buttons on the page, and use this array to perform the needed operations. I have created an example that stores all the checked checkboxes and radios in two separate arrays. The arrays are populated on the load event of every button, and the buttons are removed/added when the checkbox, or button changes its changed state. You can find the code pasted below.
    If you want a mutually exclusive checkboxes, I would suggest using RadButton with ToggleType="Radio" and ButtonType="ToggleButton", and adding two ToggleStates with the CssClasses for the Radio button set as PrimaryIconCssClass. An example is provided below.

    <%@ 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>
        <style type="text/css">
            .rbToggleCheckboxChecked
            {
                background-position: -4px -40px !important;
            }
            .rbToggleCheckbox
            {
                background-position: -4px 0 !important;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <script type="text/javascript">
            var $T = Telerik.Web.UI;
     
            //Checkboxes
            var checkBoxes = {};
            var allCheckBoxes = [];
            var checkedCheckBoxes = [];
     
            //Radios
            var radios = [];
            var checkedRadios = [];
     
            function OnClientLoad(button, args)
            {
                var toggleType = button.get_toggleType();
                if (toggleType == $T.ButtonToggleType.CheckBox)
                {
                    var cbGroup = button.get_commandArgument();
                    if (cbGroup)
                    {
                        if (!checkBoxes[cbGroup])
                            checkBoxes[cbGroup] = [];
                        Array.add(checkBoxes[cbGroup], button);
                    }
                    Array.add(allCheckBoxes, button);
                    if (button.get_checked())
                    {
                        Array.add(checkedCheckBoxes, button);
                    }
                }
                else if (toggleType == $T.ButtonToggleType.Radio)
                {
                    Array.add(radios, button);
                    if (button.get_checked())
                    {
                        Array.add(checkedRadios, button);
                    }
                }
            }
     
            function CheckedChanged(button, args)
            {
                var toggleType = button.get_toggleType();
                if (toggleType == $T.ButtonToggleType.CheckBox)
                {
                    if (button.get_checked())
                    {
                        Array.add(checkedCheckBoxes, button);
                    }
                    else
                    {
                        Array.remove(checkedCheckBoxes, button);
                    }
                }
                else if (toggleType == $T.ButtonToggleType.Radio)
                {
                    if (button.get_checked())
                    {
                        Array.add(checkedRadios, button);
                    }
                    else
                    {
                        Array.remove(checkedRadios, button);
                    }
                }
            }
     
            //Get a list of all the radios belonging to a same group -- GroupName
            //     Telerik.Web.UI.RadButtonRadioButtons[button.get_uniqueGroupName()]
        </script>
        <div>
            <telerik:RadButton ID="RadButton2" runat="server" Text="CheckBox1" ToggleType="CheckBox"
                AutoPostBack="false" ButtonType="ToggleButton" CommandArgument="Group1" OnClientLoad="OnClientLoad"
                OnClientCheckedChanged="CheckedChanged">
            </telerik:RadButton>
            <br />
            <telerik:RadButton ID="RadButton3" runat="server" Text="CheckBox2" ToggleType="CheckBox"
                AutoPostBack="false" ButtonType="ToggleButton" CommandArgument="Group1" OnClientLoad="OnClientLoad"
                OnClientCheckedChanged="CheckedChanged">
            </telerik:RadButton>
            <br />
            <telerik:RadButton ID="RadButton1" runat="server" Text="CheckBox3" ToggleType="CheckBox"
                AutoPostBack="false" ButtonType="ToggleButton" CommandArgument="Group1" OnClientLoad="OnClientLoad"
                OnClientCheckedChanged="CheckedChanged">
            </telerik:RadButton>
            <br />
            <br />
            <br />
            <telerik:RadButton ID="RadButton4" runat="server" Text="Radio looking like Checkbox"
                ToggleType="Radio" AutoPostBack="false" ButtonType="ToggleButton" OnClientLoad="OnClientLoad"
                GroupName="RadioGroup" OnClientCheckedChanged="CheckedChanged">
                <ToggleStates>
                    <telerik:RadButtonToggleState PrimaryIconCssClass="rbToggleCheckboxChecked" />
                    <telerik:RadButtonToggleState PrimaryIconCssClass="rbToggleCheckbox" />
                </ToggleStates>
            </telerik:RadButton>
            <br />
            <telerik:RadButton ID="RadButton5" runat="server" Text="Radio looking like Checkbox"
                ToggleType="Radio" AutoPostBack="false" ButtonType="ToggleButton" OnClientLoad="OnClientLoad"
                GroupName="RadioGroup" OnClientCheckedChanged="CheckedChanged">
                <ToggleStates>
                    <telerik:RadButtonToggleState PrimaryIconCssClass="rbToggleCheckboxChecked" />
                    <telerik:RadButtonToggleState PrimaryIconCssClass="rbToggleCheckbox" />
                </ToggleStates>
            </telerik:RadButton>
        </div>
        </form>
    </body>
    </html>

    Let us know if you have other questions. We will be glad to help you.

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Pablo Tola
    Pablo Tola avatar
    43 posts
    Member since:
    Nov 2007

    Posted 01 Feb 2011 Link to this post

    too complicated, I took another route:

    var checked = $(".RadButton").filter(function (index) {

     

     

        return $find(this.id).get_checked();
        }).length;

    Thanks.

     

Back to Top