Edit this page

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 Properties Parameter Description
add() RadLightBoxItem Adds an item to the items collection.
clear() none Clears the items from the RadLightBoxItemCollection .
forEach() handler Iterates through the item collection.
getItem() int Gets an item from the item collection corresponding to the index specified by the parameter.
get_count() none Returns the number of items.
insert() int, RadLightBoxItem Inserts an item into the items collection at the position specified by the first (index) parameter.
indexOf() RadLightBoxItem Gets the index of an item.
remove() RadLightBoxItem Removes a child item from the Items collection.
removeAt() int Removes the item at the specified index.
toArray() none Converts 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.

Properties Parameter Description
get_description() none Gets the description of the item.
get_height() none Gets the height of the item.
get_imageUrl() none Gets the image URL of the item.
get_navigateUrl() none Gets the navigate URL of the item.
get_targetControlID() none Gets the id of the control that triggers the RadLightBox .
get_title() none Gets the title of the item.
get_width() none Gets the width of the item.
set_description() string Sets the description of the item.
set_height() int Sets the height of the item.
set_imageUrl() string Sets the image URL of the item.
set_navigateUrl() string Sets the navigate URL of the item.
set_targetControlID() string Sets the id of the control that triggers the RadLightBox.
set_title() string Sets the title of the item.
set_width() int Sets the width of the item.

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

<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