ComboBox / Add/Remove/Disable Items

RadComboBox for ASP.NET AJAX provides a client-side API for adding/deleting/updating of items.

This example shows how to add/remove and disable items. The example also shows that all of the above changes are persisted after postback. Upon clicking the PostBack button and firing a postback on the page, all the changes that have been made to the combobox remain.

To add an item simply type the text into the TextBox field and click the "Add New Item" button. The item will appear at the top of the list and will be shown in the combobox' input field. The follwoing It code is used to add an item:

function AddNewItem()


{


     //get the client-side combobox instance


     var combo = $find('<%=RadComboBox1.ClientID%>'); 


     //or simply $find('RadComboBox1'); if you know the exact ClientID
of the combobox


     //create a new combobox item and set its text


     var comboItem = new Telerik.Web.UI.RadComboBoxItem();


     var inputtext = document.getElementById("TextBox1");


     comboItem.set_text(inputtext);


     //the method below indicates that client-changes are to be made


     combo.trackChanges();


     //add the newly created item to the Items collection of the combobox


     combo.get_items().add(comboItem); 


     //select the newly added item


     comboItem.select();


     //the methods below submits the client changes to the server
so that these changes are persisted after postback


     combo.commitChanges();


}

To remove an item you can simply call the remove(item) method. A RadComboBoxItem is passed to this method:

combo.trackChanges();


combo.get_items().remove(comboItem);


combo.commitChanges();

To disable an item you should call the disable() method. No parameters are passed to this method:

combo.trackChanges();
comboItem.disable();
combo.commitChanges();

Client side changes are available on the server side after postback. You can use the ClientChanges property to access them:

foreach (ClientOperation<RadComboBoxItem> operation in RadComboBox1.ClientChanges)
{
	RadComboBoxItem item = operation.Item;

	switch (operation.Type)
	{
		case ClientOperationType.Insert:
			break;
		case ClientOperationType.Remove:
			break;
		case ClientOperationType.Update:
			UpdateClientOperation<RadComboBoxItem> update = operation as UpdateClientOperation<RadComboBoxItem>;
			break;
		case ClientOperationType.Clear:
			break;
	}	
}