Telerik Combobox Check All items

Question

I'm using C#, Asp.Net 4.0 and Telerik and I'm trying to interact with a RadComboBox.

I'm populating it with an entity data source like this :

<RadComboBox ID="cbMyCombo" runat="server" AutoPostBack="true" CheckBoxes="true" DataSourceID="edsMySource" DataTextField="Name" DataValueField="Number">

Now, it's populated properly from the database but all my items are unchecked... I tried unsuccessfully to check them by adding the following property "CheckBoxes=true" but it's not working...

I tried to change it in the code behind like this :

protected override void OnLoad(EventArgs e)
{
  base.OnLoad(e);

  for (int i = 0; i < cbMyCombo.Items.Count; i++)
    {
      cbMyCombo.Items[i].Checked = true;
    }
  }
}

Nice try, no cigar...

I have the feeling that I'm doing it at the wrong moment in the page life cycle but I don't know how to make it properly...

Solution 1

Try this

Add an OnItemDataBound event to your RadCombobox

like this

protected void RadComboBox1_ItemDataBound(object o, RadComboBoxItemEventArgs e) 
{ 
    e.Item.Checked = true;
}

Solution 2

There is another way to handle this scenario. If all you want is - all the items in the combo box to be checked - then you can do so on the client side too. RadControls have rich client side API support so you can play around with the control from client side itself.

I tried a samll example to illustrate this scenario. I have the following radcomboboix defined on the page:

<telerik:RadComboBox runat="server" CheckBoxes="true" OnClientLoad="clientLoadHandler"
        ID="radCombo"></telerik:RadComboBox>

I have named the combobox, set the CheckBoxes to true and I have added a client side event handler OnClientLoad. In this example i am binding the data source from the server as below:

 List<string> colors = new List<string>
        {
            "Violet",
            "Indigo",
            "Blue",
            "Green",
            "Yellow",
            "Orange",
            "Red"
        };
        radCombo.DataSource = colors;
        radCombo.DataBind();

Here is the javascript function:

function clientLoadHandler(sender) {
            var combo = sender;
            var items = combo.get_items();
            var itemCount = items.get_count()
            for (var counter = 0; counter < itemCount; counter++) {
                var item = items.getItem(counter);
                item.set_checked(true)
            }
        }

As you can see, the sender parameter of the function is the combobox. I gets items out of the combobox and loop through each item and set its checked property using the set_checked(boolean) function.

hope you find this info useful. Do let me know what you think about this solution.

Lohith (Tech Evangelist, Telerik India)

Comments

[Andy M]

I just discovered this yes ! Thanks a lot for your answer !

[Andy M]

Since the first answer looks cleaner, I'll go with it, but I appreciate the answer and this solution ! Will give it a go for learning purpose ! Thanks for your answer !

[Andy M]

In my case I spotted a problem with your solution... 1) The page loads and checks all the items, everything all right. 2) I uncheck a few items and validates which reloads a panel and my combobox... 3) After reloading, the page displays the correct data depending on my previous selection but in my combobox, all the items are checked again... It's due to the fact that my combobox is directly within the same panel as the rest of my page and therefore, it gets reloaded as well...

[kashyapa]

you are right. in the page reload it will try to recheck all the items again. but depending on your business logic you can always tweak the code to handle already checked or unchecked ones :). i just wanted to let you know that client apis are also available for the radcontrols and they come in handy at times.

[Andy M]

I took note of your example and will surely be helpful soon :) thanks for your help !