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

Select All items in checkbox in combobox

9 Answers 591 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
Manish
Top achievements
Rank 1
Manish asked on 23 Jun 2009, 12:49 PM

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.

 

9 Answers, 1 is accepted

Sort by
0
Yana
Telerik team
answered on 23 Jun 2009, 01:43 PM
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.
0
Manish
Top achievements
Rank 1
answered on 23 Jun 2009, 02:25 PM
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
0
Paul
Telerik team
answered on 26 Jun 2009, 12:49 PM
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.
0
Manish
Top achievements
Rank 1
answered on 26 Jun 2009, 01:20 PM
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?
0
Accepted
Yana
Telerik team
answered on 30 Jun 2009, 08:44 AM
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.
0
Manish
Top achievements
Rank 1
answered on 30 Jun 2009, 09:13 AM
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
0
Megan Vee
Top achievements
Rank 1
answered on 03 May 2010, 06:41 PM
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
0
Megan Vee
Top achievements
Rank 1
answered on 04 May 2010, 12:05 AM
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
0
Manish
Top achievements
Rank 1
answered on 05 May 2010, 10:20 AM
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                   
 
Tags
ComboBox
Asked by
Manish
Top achievements
Rank 1
Answers by
Yana
Telerik team
Manish
Top achievements
Rank 1
Paul
Telerik team
Megan Vee
Top achievements
Rank 1
Share this question
or