Edit this page

Working at Client-side

RadListBox provides a client-side API for adding, deleting and updating items.

Adding Items

To add an item, use the RadListBoxItemCollection.add method. If you want the change to the listbox items to persist after a postback, you must wrap the call to the add method between a call to the radListBox.trackChanges() method and a call to the radListBox.commitChanges() method:

<input type="button" value="Add" onclick="AddNewItem()" />
<script type="text/javascript">
    function AddNewItem() {
       var lb = $find("<%= RadListBox1.ClientID %>");        
       var item = new Telerik.Web.UI.RadListBoxItem();
       item.set_text("New Item");
       lb.trackChanges();
       lb.get_items().add(item);
       item.select();
       lb.commitChanges();
    }
</script>           

Removing items

Use the remove method of the RadListBoxItemCollection object to remove items:

<input type="button" value="Remove" onclick="RemoveItem()" />
<script type="text/javascript">
   function RemoveItem() {
       var lb = $find("<%= RadListBox1.ClientID %>");
       var item = lb.get_selectedItem();
       lb.trackChanges();
       lb.get_items().remove(item);
       lb.commitChanges();
   }
</script>       

Enabling and Disabling items

Use the disable() and enable() methods of the RadListBoxItem object to disable or enable items:

<input type="button" value="Disable on the client" onclick="DisableItem()" />
<script type="text/javascript">
   function DisableItem() {
       var lb = $find("<%= RadListBox1.ClientID %>");
       var item = lb.get_selectedItem();
       lb.trackChanges();
       item.disable();
       lb.commitChanges();
   }
</script>           

Checking and Unchecking items

Use the check() and uncheck() methods of the RadListBoxItem object:

<input type="button" value="Check on the client" onclick="CheckItem()" />
<script type="text/javascript">
   function CheckItem() {
       var lb = $find("<%= RadListBox1.ClientID %>");
       var item = lb.get_selectedItem();
       item.check();
   }
</script> 

See Also