The latest addition to Telerik’s ASP.NET control suite is the LightBox popup control. The lightbox controls are usually pure client-side widgets, but not this one. This blog post will walk you through the key features of Telerik’s control.
 
Aside from the pure client-side functionalities the ASP.NET LightBox also offers support for templates, which allow the control to hold different type of content like images, iFrames, HTML code, ASP.NET server controls and so on.

As a server control it also offers databinding capabilities. You can bind the control to different datasource controls like (but not limited to) SqlDataSource, LinqDataSource, EntityDataSource, and ObjectDataSource.

RadLightBox databinding scheme

Features like automatic resizing, keyboard navigation, paging and modality are built-in and are ready to use straight out of the box.

There are two types of animation supported for the first version – Resize and Fade. The control allows that you set a different animation for each action – Open/Hide/Next/Prev.

LadyBug

Server-side Data-binding

LightBox can be populated through datasource control with just a few lines of markup. Here is a simple example:

<telerik:RadLightBox ID="RadLightBox1" runat="server" DataSourceID="SqlDataSource1"
    DataImageUrlField="ImageUrl"
    DataTitleField="ImageName"
    DataDescriptionField="ImageInfo">
</telerik:RadLightBox>

Of course, you could also bind LightBox in code-behind in the same way as with the other controls from the RadControls suite.
More information about the data-binding capabilities is available in our online documentation.

 

The Items Collection

Similar to other controls from the RadControls suite, LightBox has an Items collection. You can manage the collection in different ways:

  • In control declaration
  • Code-behind (C#/VB.NET)
  • Using client-side API (Javascript)

Below you can find a simple example of how you can create a new item and then add it to the collection.

RadLightBoxItem newItem = new RadLightBoxItem();
newItem.Description = "My Description";
newItem.Title = "My Title";
newItem.NavigateUrl = "http://myurl.url";
newItem.Width = Unit.Pixel(400);
newItem.Height = Unit.Pixel(300);
RadLightBox1.Items.Add(newItem);

You can easily setup a relation between a given trigger control and an item from the Items collection. For that purpose you have to set the ID of the desired control to TargetControlID property of the corresponding item. If it is a clientID then you need to  set IsClientID to true.

 

The Expected Question

I’m sure when you first read about the LightBox features you will make a direct parallel to the Telerik’s ASP.NET Window control. So, are these two controls interchangeable? Yes and no. There is an important keyword in the name of the LightBox – “Light”. It is designed to be simple and fast so it is not a Window replacement.

The Wrap Up

We’d like to hear your opinion on the LightBox control. Do you have any suggestions for the future versions? Or maybe you would like something to be improved? Please don’t hesitate to share your feedback in the comments section below.


About the Author

Daniel Peichev

is Software Developer at one of Telerik's ASP.NET AJAX teams, where he primarily works on exporting functionality for RadGrid and RadTreeList. Daniel is interested in ASP.NET, Javascript, CSS and the cutting edge Microsoft technologies and products.

Related Posts

Comments

Comments are disabled in preview mode.