Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

Client side programming

2 Answers 189 Views
Button
This is a migrated thread and some comments may be shown as answers.
Pablo Tola
Top achievements
Rank 2
Pablo Tola asked on 31 Jan 2011, 06:15 PM
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 Answers, 1 is accepted

Sort by
0
Pero
Telerik team
answered on 01 Feb 2011, 03:13 PM
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.
0
Pablo Tola
Top achievements
Rank 2
answered on 01 Feb 2011, 03:35 PM
too complicated, I took another route:

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

 

 

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

Thanks.

 

Tags
Button
Asked by
Pablo Tola
Top achievements
Rank 2
Answers by
Pero
Telerik team
Pablo Tola
Top achievements
Rank 2
Share this question
or