Select All items in checkbox in combobox

[Manish]

Hi,
I have checkboxes in rad combobox.
My first checkbox has the value All.
What I want is, I would like to select checkboxes for all when 'All' is selected,and if any one checkbox is deselected, then the check of 'All' should be deselected.

Below is the aspx code of rad combobox.
I want to achieve this through javascript.

<

radC:RadComboBox runat="server" ID="RadComboBox1" AllowCustomText="True" HighlightTemplatedItems="True"

 

 

Skin="WebBlue" SkinsPath="~/RadControls/ComboBox/Skins" UseEmbeddedScripts="False"

 

 

OnClientDropDownOpening="OnClientDropDownOpening" OnClientDropDownClosing="OnClientDropDownClosing"

 

 

OnClientSelectedIndexChanging="onSelectedIndexChanging" OnClientBlur="OnClientBlur"

 

 

DropDownWidth="140px" Height="110px" Width="120px">

 

 

<ItemTemplate>

 

 

<asp:CheckBox runat="server" ID="chk" onclick="checkboxClick();" Text='<%# DataBinder.Eval(Container, "Text") %>' />

 

 

</ItemTemplate>

 

 

<Items>

 

 

<radC:RadComboBoxItem Text="All" Value="0" ID="chbSelectAll" onclick="javascript:SelectAll();" runat="server" />

 

 

<radC:RadComboBoxItem Text="Unassigned" Value="1" runat="server" />

 

 

<radC:RadComboBoxItem Text="Assigned" Value="2" runat="server" />

 

 

<radC:RadComboBoxItem Text="Reassigned" Value="4" runat="server" />

 

 

<radC:RadComboBoxItem Text="Posted" Value="5" runat="server" />

 

 

</Items>

 

 

</radC:RadComboBox>

Moderators/Admin please help.

 

[Yana]

Hi Manish,

Please check this code library which demonstrates how to achieve the needed functionality.

Kind regards,
Yana
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Manish]

Hi Yana,
The project you referred was in .NET 3.5 VS 2008.
I am using .NET 2.0 VS 2005.
Also, i am unsing Radcontrols version RadControlsQ1 2007. and not 2008.
So, can u please post the code over here, or could you refer me to some other test project so that I can look into.

Thanks and Regards,
Manish Thapar

[Paul]

Hi Manish,

We suggest you upgrade to the latest versions of the used controls.

Sincerely yours,
Paul
the Telerik team

Instantly find answers to your questions on the newTelerik Support Portal.
Check out the tipsfor optimizing your support resource searches.

[Manish]

We cannot upgrade to the latest version as the licensed copy of Radcontrol 2007 is purchased by client.Client is not ready to upgrade it. So, please provide me a solution for this. Do i need to extra javascript for it? if yes, then what is the javascript?

[Yana]

Hi Manish,

Please find attached a simple page demonstrating the needed approach. Download it and give it a try.

Greetings,
Yana
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Manish]

Hi Yana, Thanks very much for your help.
In your example, for the function checkboxClick(), I added a few more lines of code which solved my purpose completely.
Below is the code.



function checkboxClick(checkbox)
        {
            var combo = <%=RadComboBox1.ClientID %>;
            if(checkbox.nextSibling.innerText == "All")
            {               
                for(var i=1; i<combo.Items.length; i++)
                {
                    var item = combo.Items[i];
                    document.getElementById(item.ClientID).childNodes[0].childNodes[0].checked = checkbox.checked;
                }
            }
            else
            {               
                document.getElementById(combo.Items[0].ClientID).childNodes[0].childNodes[0].checked = false;
                var count = 1;
                for(var i=1; i<combo.Items.length; i++)
                {
                    var item = combo.Items[i];
                    if(document.getElementById(item.ClientID).childNodes[0].childNodes[0].checked)
                    {
                        count = count + 1;
                    }
                }
                if(count==combo.Items.length)
                {
                    document.getElementById(combo.Items[0].ClientID).childNodes[0].childNodes[0].checked = true;
                }
            }
        }

Thanks again for your help.
Manish Thapar

[Megan Vee]

Yana -
I am unable to get the OnClient event to compile.
The checkbox only has the OnCheckChanged event - which doesn't fire  at the right time.

Any pointers?

Thanks, Megan

[Megan Vee]

Is there a way to code the select all, not select all functionality in the code behind instead of java? Eventually, I'm going to take this concept to a webpart and I'm not sure the javascript portion will work...

Thanks, Megan

[Manish]

Hi,
Following is the code snippet for entire functionality.
Hope this will help.

//Events to handle combobox behaviour
       function OnClientDropDownClosing(sender, eventArgs)
        {
            return ( supressDropDownClosing);
        }

        function OnClientSelectedIndexChanging(sender, eventArgs)
        {
            return ( ! supressDropDownClosing);
        }

        function OnClientDropDownOpening(sender, eventArgs)
        {
            supressDropDownClosing = true;
        }
      //Events to handle combobox behaviour

      //OnClick() checkbox
      function checkboxClick(checkbox)
        {
            var combo = <%=RadComboBox1.ClientID %>;
            if(checkbox.nextSibling.innerText == "All")
            {
                for(var i=1; i<combo.Items.length; i++)
                {
                    var item = combo.Items[i];
                    document.getElementById(item.ClientID).childNodes[0].childNodes[0].checked = checkbox.checked;
                }
            }
            else
            {
                document.getElementById(combo.Items[0].ClientID).childNodes[0].childNodes[0].checked = false;
                var count = 1;
                for(var i=1; i<combo.Items.length; i++)
                {
                    var item = combo.Items[i];
                    if(document.getElementById(item.ClientID).childNodes[0].childNodes[0].checked)
                    {
                        count = count + 1;
                    }
                }
                if(count==combo.Items.length)
                {
                    document.getElementById(combo.Items[0].ClientID).childNodes[0].childNodes[0].checked = true;
                }
            }
            collectSelectedItems();
        }
        //OnClick() checkbox


        function StopPropagation(e)
        {
            //cancel bubbling
            e.cancelBubble = true;
            if (e.stopPropagation)
            {
                e.stopPropagation();
            }
        }

        function getItemCheckBox(item)
        {
            //Get the 'div' representing the current RadComboBox Item.
            var itemDiv = document.getElementById(item.ClientID);

            //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;
                }
            }

            return null;
        }

        //To get selected items
        function collectSelectedItems()
        {
            var combo = <%= RadComboBox1.ClientID %>;

            var items = combo.Items;

            var selectedItemsTexts = "";
            var selectedItemsValues = "";

            var itemsCount = items.length;


            for (var itemIndex = 0; itemIndex < itemsCount; itemIndex++)
            {
                var item = items[itemIndex];

                var checkbox = getItemCheckBox(item);

                //Check whether the Item's CheckBox) is checked.
                if (checkbox.checked)
                {
                    selectedItemsTexts += item.Text + ", ";
                    selectedItemsValues += item.Value + ", ";

                }
            }
            var Allindex=/0/;
            var SearchAll=selectedItemsValues.search(Allindex);
            if(SearchAll !=-1)
            {
                selectedItemsTexts = "All";
            }
            else
            {
                selectedItemsTexts = selectedItemsTexts.substring(0, selectedItemsTexts.length - 2);
                selectedItemsValues = selectedItemsValues.substring(0, selectedItemsValues.length - 2);
            }

            //Set the text of the RadComboBox with the texts of the selected Items, separated by ','.
            combo.SetText(selectedItemsTexts);

            //Set the comboValue hidden field value with values of the selected Items, separated by ','.
            document.getElementById('<%=comboValue.ClientID %>').value = selectedItemsValues;
            document.getElementById('<%=comboText.ClientID %>').value = selectedItemsTexts;

            //Clear the selection that RadComboBox has made internally.
            if (selectedItemsValues == "")
            {
                combo.ClearSelection();
            }
        }
        //To get selected items