New to Telerik UI for ASP.NET AJAXStart a free 30-day trial

Adding LightBox Items on Client

This help article describes scenarios for adding items to a RadLightBox control. Sometimes you may need to add items to a RadLightBox control dynamically after you have already bound it to a collection of images.Or, perhaps you do not know the exact images that the control will display at the initial load of the page, and you’ll let a customer choose themlater from a list.

RadLightBox allows you to create and add items to the RadLightBoxItemsCollection by using the client API. To do this, first you have to create an item of type Telerik.Web.UI.LightBoxItem.When you have created the item, you can use the item’s API to set properties like ImageUrl, NavigateUrl,Description, Title, TargetControlID, Width and Height. Example 1 demonstrates how to set some of these properties for a RadLightBox.

RadLigthBoxItemCollection

The get_items() method of the RadLightBox object returns a RadLightBoxItemCollection object. The RadLightBoxItemCollection provides the methods andproperties described in Table 1.

Table 1: List of methods and properties that you can use to manipulate the collection of items.

Methods and PropertiesParameterDescription
add()RadLightBoxItemAdds an item to the items collection.
clear()noneClears the items from the RadLightBoxItemCollection .
forEach()handlerIterates through the item collection.
getItem()intGets an item from the item collection corresponding to the index specified by the parameter.
get_count()noneReturns the number of items.
insert()int, RadLightBoxItemInserts an item into the items collection at the position specified by the first (index) parameter.
indexOf()RadLightBoxItemGets the index of an item.
remove()RadLightBoxItemRemoves a child item from the Items collection.
removeAt()intRemoves the item at the specified index.
toArray()noneConverts the LightBox items to an array.

RadLightBoxItem

The getItem() method of the RadLightBoxItemCollection object returns a RadLightBoxItem object. The RadLightBoxItem provides the properties described in Table 2.

Table 2: List of properties by which you can manipulate a single item.

PropertiesParameterDescription
get_description()noneGets the description of the item.
get_height()noneGets the height of the item.
get_imageUrl()noneGets the image URL of the item.
get_navigateUrl()noneGets the navigate URL of the item.
get_targetControlID()noneGets the id of the control that triggers the RadLightBox .
get_title()noneGets the title of the item.
get_width()noneGets the width of the item.
set_description()stringSets the description of the item.
set_height()intSets the height of the item.
set_imageUrl()stringSets the image URL of the item.
set_navigateUrl()stringSets the navigate URL of the item.
set_targetControlID()stringSets the id of the control that triggers the RadLightBox.
set_title()stringSets the title of the item.
set_width()intSets the width of the item.

Example 1 demonstrates how to add an item on a button click.

ASPNET
<script type="text/javascript">
	function AddLightBoxItem()
	{
		var lightBox = $find('<%= RadLightBox1.ClientID %>');
		var lightBoxItem = new Telerik.Web.UI.LightBoxItem;
		lightBoxItem.set_imageUrl("../images/thumbnail/2.png");
		lightBoxItem.set_description("Description of the second item");
		lightBoxItem.set_title("Title of the second item");
		var lightBoxItemCollection = lightBox.get_items();
		lightBoxItemCollection.add(lightBoxItem);
	}

	function OpenLightBox()
	{
		var lightBox = $find('<%= RadLightBox1.ClientID %>');
		lightBox.show();
	}
</script>

<asp:Button Text="Add item" ID="Button1" OnClientClick="AddLightBoxItem(); return false;" runat="server" />
<asp:Button Text="Open LightBox" ID="Button2" OnClientClick="OpenLightBox(); return false;" runat="server" />
<telerik:RadLightBox RenderMode="Lightweight" Id="RadLightBox1" runat="server">
	<Items>
		<telerik:RadLightBoxItem Description="Description of the first item" ImageUrl="../images/thumbnail/1.png" Title="Title of the first item"></telerik:RadLightBoxItem>
	</Items>
</telerik:RadLightBox>
	

See Also