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

    Hello,

    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.

    Regards,
    Oren
  2. Yana
    Admin
    Yana avatar
    4554 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">
        <Items>
            <telerik:RadListBoxItem Text="RadListBoxItem1" />
            <telerik:RadListBoxItem Text="RadListBoxItem2" />
            <telerik:RadListBoxItem Text="RadListBoxItem3" />
            <telerik:RadListBoxItem Text="RadListBoxItem4" />
            <telerik:RadListBoxItem Text="RadListBoxItem5" />
        </Items>
        <HeaderTemplate>
            <input id="checkButton" type="button" value="checkAll" onclick="checkItems(this)"
                ischecked="false" />
        </HeaderTemplate>
    </telerik:RadListBox>

    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;
            else
                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";
     
        }
    </script>


    All the best,
    Yana
    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. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top