Client Side from a button in the footer/header

2 posts, 0 answers
  1. Oren
    Oren avatar
    36 posts
    Member since:
    Sep 2010

    Posted 15 Oct 2010 Link to this post


    1. I have a listbox with checkboxes items.
        lets say i have added a header template and inside i put a button and call it "CheckAll".
        From the client side (JS) i would like to click on the button and then to check all the items, another click on the same button will uncheck all the items.
    It is very important to me do it from a button in the header of the listbox and not from a checkbox named "All" like in your demo
    whether it's a problem to do it from a button in the header, how to do it from a button out of the listbox controll?

    JS examples will be appreciate.

  2. Yana
    Yana avatar
    4547 posts

    Posted 19 Oct 2010 Link to this post

    Hello Oren,

    Please use the following code to add check/uncheck button in header template:

    <telerik:RadListBox ID="RadListBox1" runat="server" CheckBoxes="true" OnClientItemChecked="onItemChecked">
            <telerik:RadListBoxItem Text="RadListBoxItem1" />
            <telerik:RadListBoxItem Text="RadListBoxItem2" />
            <telerik:RadListBoxItem Text="RadListBoxItem3" />
            <telerik:RadListBoxItem Text="RadListBoxItem4" />
            <telerik:RadListBoxItem Text="RadListBoxItem5" />
            <input id="checkButton" type="button" value="checkAll" onclick="checkItems(this)"
                ischecked="false" />

    and also the following javascript:

    <script type="text/javascript">
        function checkItems(button) {
            var isChecked = button.attributes["isChecked"].value;
            var checked;
            if (isChecked == "false")
                checked = true;
                checked = false;
            button.attributes["isChecked"].value = checked.toString();
            var listBox = $find("<%=RadListBox1.ClientID %>");
            var items = listBox.get_items();
            items.forEach(function(itm) { itm.set_checked(checked); });
        function onItemChecked(sender, e) {
            var button = $get("checkButton");
            if (sender.get_checkedItems().length == sender.get_items().get_count())
                button.attributes["isChecked"].value = "true";
            if (e.get_item().get_checked() == false)
                button.attributes["isChecked"].value = "false";

    All the best,
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. DevCraft R3 2016 release webinar banner
Back to Top