This is a migrated thread and some comments may be shown as answers.

Client Side from a button in the footer/header

1 Answer 78 Views
ListBox
This is a migrated thread and some comments may be shown as answers.
Udi
Top achievements
Rank 1
Udi asked on 15 Oct 2010, 08:16 AM
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

1 Answer, 1 is accepted

Sort by
0
Yana
Telerik team
answered on 19 Oct 2010, 03:36 PM
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
Tags
ListBox
Asked by
Udi
Top achievements
Rank 1
Answers by
Yana
Telerik team
Share this question
or