Data Binding
RadLightBox fully supports binding to various data sources:
Databinding Properties and Methods
The following properties and methods are used when binding RadLightBox to a data source:
-
DataSource property - set to an instance of your data source. This is mandatory when bindingRadLightBox at runtime.
-
DataSourceID property - set to the ID of your data source. This is mandatory when binding RadLightBox declaratively.
-
DataTitleField property - field name from the data source to bind to the Title property.
-
DataDescriptionField property - field name from the data source to bind to the Description property.
-
DataBind method - must be called after the aforementioned properties are set, when binding at runtime.This method is mandatory for binding at runtime
-
DataImageUrlField property - field name from the data source to bind to the ImageUrl property.
-
DataNavigateUrlField property - field name from the data source to bind to the NavigateUrl property.
Binding to Array or ArrayList
RadLightBox can be bound either to Array or ArrayList.The following example shows how to bind RadLightBox objects to both Array and ArrayList, at runtime. The declaration ofRadLightBox object includes no DataSourceID property or
<script type="text/javascript">
function button1Click()
{
var lightBox1 = $find('<%= RadLightBox1.ClientID %>');
lightBox1.show();
}
function button2Click()
{
var lightBox2 = $find('<%= RadLightBox2.ClientID %>');
lightBox2.show();
}
</script>
<telerik:radlightbox id="RadLightBox1" runat="server"></telerik:radlightbox>
<telerik:radlightbox id="RadLightBox2" runat="server"></telerik:radlightbox>
<asp:Button ID="Button1" OnClientClick="button1Click(); return false;" runat="server"
Text="Open RadLightBox1" />
<asp:Button ID="Button2" OnClientClick="button2Click(); return false;" runat="server"
Text="Open RadLightBox2" />
Binding to Folder
RadLightBox can be bound to folder and display all images contained in it.The following example shows how to bind RadLightBox objects to a folder, at runtime. The declaration ofRadLightBox object includes no DataSourceID property or
<telerik:RadCodeBlock runat="server">
<script type="text/javascript">
function OpenLightBox() {
$find("<%=RadLightBox1.ClientID %>").show();
}
</script>
</telerik:RadCodeBlock>
<telerik:RadLightBox RenderMode="Lightweight" ID="RadLightBox1" runat="server" SelectMethod="GetPictures" DataImageUrlField="Path">
</telerik:RadLightBox>
<asp:Button ID="Button8" runat="server" Text="Show LightBox" OnClientClick="OpenLightBox(); return false;" />
Binding to DataTable, DataSet, and DataView
RadLightBox can be bound to a DataTable, DataSet,and DataView. The following example shows binding to a DataTable object. The declaration ofRadLightBox object includes no DataSourceID property or
<script type="text/javascript">
function button1Click()
{
var lightBox1 = $find('<%= RadLightBox1.ClientID %>');
lightBox1.show();
}
</script>
<telerik:radlightbox id="RadLightBox1" runat="server"></telerik:radlightbox>
<asp:Button ID="Button3" OnClientClick="button1Click(); return false;" runat="server"
Text="Open RadLightBox1" />
RadLightBox supports binding to all ASP.NET DataSource components, including:
-
AccessDataSource
-
SqlDataSource
-
XmlDataSource
-
ObjectDataSource
-
SiteMapDataSource
-
LinqDataSource
-
EntityDataSource
To bind to a DataSource component, all you need to do is set the DataSourceID property of RadLightBox to the ID of the DataSource component. You should also set the DataImageUrl,DataTitleField and DataDescriptionField properties of RadLightBox to map the ImageUrl, Title and Description properties of the items to therespective columns / fields from the data source.
SqlDataSource
<script type="text/javascript">
function button1Click()
{
var lightBox1 = $find('<%= RadLightBox1.ClientID %>');
lightBox1.show();
}
</script>
<telerik:radlightbox id="RadLigthBox1" runat="server" datasourceid="SqlDataSource1"
dataimageurlfield="ImageUrl" datatitlefield="Title" datadescriptionfield="Description"></telerik:radlightbox>
<asp:Button ID="Button4" OnClientClick="button1Click(); return false;" runat="server"
Text="Open RadLightBox1" />
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:LightBoxConnectionString %>"
SelectCommand="SELECT * FROM [Portfolio]"></asp:SqlDataSource>
XmlDataSource
<script type="text/javascript">
function button1Click()
{
var lightBox1 = $find('<%= RadLightBox1.ClientID %>');
lightBox1.show();
}
</script>
<telerik:radlightbox id="RadLigthBox1" runat="server" datasourceid=" XmlDataSource1"
dataimageurlfield="ImageUrl" datatitlefield="Title" datadescriptionfield="Description"></telerik:radlightbox>
<asp:Button ID="Button5" OnClientClick="button1Click(); return false;" runat="server"
Text="Open RadLightBox1" />
<asp:XmlDataSource ID="XmlDataSource1" runat="server" DataFile="~/ContentFile.xml">
</asp:XmlDataSource>
ObjectDataSource
<script type="text/javascript">
function button1Click()
{
var lightBox1 = $find('<%= RadLightBox1.ClientID %>');
lightBox1.show();
}
</script>
<telerik:radlightbox id="RadLigthBox1" runat="server" datasourceid=" ObjectDataSource1"
dataimageurlfield="ImageUrl" datatitlefield="Title" datadescriptionfield="Description"></telerik:radlightbox>
<asp:Button ID="Button6" OnClientClick="button1Click(); return false;" runat="server"
Text="Open RadLightBox1" />
<asp:ObjectDataSource ID="ObjectDataSource1" TypeName="LightBoxObjectData" SelectMethod="GetItems"
runat="server"></asp:ObjectDataSource>
public LightBoxObjectData() { }
public static List<LightBoxDataItem> GetItems()
{
List<LightBoxDataItem> itemsList = new List<LightBoxDataItem>();
itemsList.Add(new LightBoxDataItem("Title1", "~/img/1.png", "Description1"));
itemsList.Add(new LightBoxDataItem("Title2", "~/img/2.png", "Description2"));
itemsList.Add(new LightBoxDataItem("Title3", "~/img/3.png", "Description3"));
return itemsList;
}
public class LightBoxDataItem
{
private string _title;
private string _imageUrl;
private string _description;
public string Title
{
get
{
return _title;
}
set
{
_title = value;
}
}
public string ImageUrl
{
get
{
return _imageUrl;
}
set
{
_imageUrl = value;
}
}
public string Description
{
get
{
return _description;
}
set
{
_description = value;
}
}
public LightBoxDataItem(string title, string imageUrl, string description)
{
_title = title;
_imageUrl = imageUrl;
_description = description;
}
}
RadLightBox supports ModelBinding:
To bind the databound RadLightBox via ModelBinding you need to set only the SelectMethod property to the name of the public method placed into the page's code-behind file. When you run the page, the control will call the above method and automatically retrieve the data and render it.
<telerik:RadCodeBlock runat="server">
<script type="text/javascript">
function OpenLightBox()
{
$find("<%=RadLightBox1.ClientID %>").show();
}
</script>
</telerik:RadCodeBlock>
<telerik:RadLightBox RenderMode="Lightweight" ID="RadLightBox1" runat="server" SelectMethod="GetPictures" DataImageUrlField="Path">
</telerik:RadLightBox>
<asp:Button ID="Button7" runat="server" Text="Show LightBox" OnClientClick="OpenLightBox(); return false;" />