Radcombobox with EnableCheckAllItemsCheckBox

[David]

I tried to set up Radcombobox with "check all" option which as  the demo did in the below link:

http://demos.telerik.com/aspnet-ajax/combobox/examples/functionality/checkboxes/defaultcs.aspx


However, even I set EnableCheckAllItemsCheckBox="true" , the check all option doesn't show at all.  Finally I copied the exact code  from the demo to my test page, the "check all" option still doesn't appear. another interesting thing is that I can't find the EnableCheckAllItemsCheckBox property in the properties window of visual studio. 


Anything I did wrong? plus, how can I get " x item checked" information working in the Radcombobox if the concatenated string length of options being selected is longer than the width of combobox?  as the pic I attached in the image.
 

any suggestions I would be really appreciated. 

Thanks. 

[Jayesh Goyani]

Hello,

If you not get this type of property then take latest version of telerik and check.
or.
Upgrade your project.

let me know if any concern.


Thanks,
Jayesh Goyani

[Amjad]

Hello;

i have the same problem here and am using 2011 Q2 telerik controls
is this feature available for this version

Thanks

[Jayesh Goyani]

Hello Amjad,

Yes it is available.

Thanks,
Jayesh Goyani

[Amjad]

then am having the same problem as they do

Any idea?

[Princy]

Hello,

EnableCheckAllItemsCheckBox property is added in Q2 2011 SP1 (version 2011.2.915). One suggestion is you can upgrade your telerik control's version.

Thanks,
Princy.

[Laura]

Hello,

is it possible to implement a button or radio buttons to check/uncheck all items of a RadComboBox? Instead of using the functionality EnableCheckAllItemsCheckBox i want to place an extra button besides the ComboBox to check/uncheck all elements of it.

Thanks

[Princy]

Hi Laura,

Here is the sample code that I tried to check/uncheck all items in a RadComboBox OnClientClick event of a Button.

JS:

<script type="text/javascript" >
    function OnClientClick()
     {
        var Combo = $find("<%=RadComboBox1.ClientID %>");
        var items = Combo.get_items();
        var checked = 1;
        for (var i = 0; i < Combo.get_items().get_count(); i++)
         {
            if (!items._array[i].get_checked())
            {
                checked = 0;
                break;
            }
         }
        if (checked==0)
         {
            for (var x = 0; x < Combo.get_items().get_count(); x++)
            {
                items._array[x].check();
            }
         }
        else
         {
            for (var x = 0; x < Combo.get_items().get_count(); x++)
            {
                items._array[x].uncheck();
            }
         }
     }
</script>

 
Hope this helps.

Thanks,
Princy.

[Laura]

Hi Princy,

thanks, your solution is working fine, but if there are many elements in a RadComboBox it takes a lot of time to check/uncheck all. 
So I tried it like this:

<asp:CheckBox runat="server" ID="cb_Checkbox1" Enabled="true" OnClick="onchkStatusAllClick_Checkbox1(this)" />

...

<script type="text/javascript">

 function onchkStatusAllClick_Checkbox1(parentChk) {

                var combo = $find("<%= cbo_RadComboBox1.ClientID %>");
                items = combo.get_items();
                var count = items.get_count();

                if (parentChk.checked == true) {

                    for (var itemIndex = 0; itemIndex < count; itemIndex++) {
                        var item = items.getItem(itemIndex); var chk = getItemCheckBox(item);
                        if (chk != null) { chk.checked = true; }
                    }
                    combo.set_text("All items checked");
                           combo.get_checkedItems().length = count;
                }

                if (parentChk.checked == false) {

                    for (var itemIndex = 0; itemIndex < count; itemIndex++) {
                        var item = items.getItem(itemIndex); var chk = getItemCheckBox(item);
                        if (chk != null) { chk.checked = false; }
                    }
                    combo.set_text("Choose an item");
                           combo.get_checkedItems().length = 0;
                }

            }

 function getItemCheckBox(item) {

                //Get the 'div' representing the current RadComboBox Item.
                var itemDiv = item.get_element();

                //Get the collection of all 'input' elements in the 'div' (which are contained in the Item).
                var inputs = itemDiv.getElementsByTagName("input");

                for (var inputIndex = 0; inputIndex < inputs.length; inputIndex++) {

                    var input = inputs[inputIndex];

                    //Check the type of the current 'input' element.
                    if (input.type == "checkbox") {
                        return input;
                    }
                }
            }

It works very fast setting all checkboxes in the RadComboBox to true or false. But it seems that the items are not being checked even though the checkboxes are checked.
Therefore I tried to set the length of the checked items array to 0 if all items are unchecked. Similarly I wanted to set the length of the array to the number of all elements if all items are checked. In this way it is not working.

Is there another way to check/uncheck all items that works faster or a possibility to set the number of checked items?

[Princy]

Hi Laura,

Only checking the CheckBox of the RadComboBoxItem does not check the item of the RadComboBox. Try the following javascript to check/uncheck the RadComboBoxItem.

JS:

<script type="text/javascript">
 function onchkStatusAllClick_Checkbox1(parentChk)
  {
        var combo = $find("<%= RadComboBox1.ClientID %>");
        items = combo.get_items();
        var count = items.get_count();
        if (parentChk.checked == true)
        {
           for (var itemIndex = 0; itemIndex < count; itemIndex++)
           {
                var item = items.getItem(itemIndex);
                if (item != null) { item.check(); }
           }
            combo.set_text("All items checked");
            combo.get_checkedItems().length = count;
        }
       if (parentChk.checked == false)
       {
         for (var itemIndex = 0; itemIndex < count; itemIndex++)
         {
           var item = items.getItem(itemIndex);
           if (item != null) { item.uncheck(); }
         }
            combo.set_text("Choose an item");
            combo.get_checkedItems().length = 0;
       }
  }
</script>

Hope this helps.

Regards,
Princy.

[Wellington]

Hi Guys,
I know this post is old but follows my solution to this problem.

Instead of using "onclick" i have used "OnClientItemChecked",  to capture action  of the checkbox.
Follows solution created via JavaScript:

<script type="text/javascript">
    function onchkStatusAllClick_Checkbox1(sender, eventArgs) {
        var combo = $find("<%= RCLinhaNegocio.ClientID %>");
        var parentChk = eventArgs.get_item();
        if (combo != null) {
            items = combo.get_items();
            var count = items.get_count();
            if (parentChk.get_text() == "Todos") {
                if (parentChk.get_checked() == true) {
                    for (var itemIndex = 0; itemIndex < count; itemIndex++) {
                        var item = items.getItem(itemIndex);
                        if (item != null) { item.check(); }
                    }
                    combo.set_text("All items checked");
                    combo.get_checkedItems().length = count;
                }
                if (parentChk.get_checked() == false) {
                    for (var itemIndex = 0; itemIndex < count; itemIndex++) {
                        var item = items.getItem(itemIndex);
                        if (item != null) { item.uncheck(); }
                    }
                    combo.set_text("Choose an item");
                    combo.get_checkedItems().length = 0;
                }
            }
            else {
                if (parentChk.get_checked() == true) {
                    items = combo.get_items();
                    var count = items.get_count();
                    for (var itemIndex = 1; itemIndex < count; itemIndex++) {
                        var item = items.getItem(itemIndex);
                        if (item != null) { if (!item.get_checked()) return; }
                    }
                                  
                    item = items.getItem(0);
                    if (item != null) { item.check(); }
                }
                if (parentChk.get_checked() == false) {                    
                    var item = items.getItem(0);
                    if (item != null) { item.uncheck(); }
                }
            }
        }
    }

</script>

[Wellington]

Complementing ...
In the passage we define the combo can use "var combo = sender;" Instead of 'var combo = $ find ("<% = RCLinhaNegocio.ClientID%>");'

[Boyan Dimitrov]

Hello,

Thank you for sharing your solution with our community.

Regards,
Boyan Dimitrov
Telerik