Edit this page

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 section:

<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" />
protected void Page_Load(object sender, EventArgs e)
{
    if (!Page.IsPostBack)
    {
        BindToArrayList(RadLightBox1);
        BindToArray(RadLightBox2);
    }
}

private void BindToArray(RadLightBox lightBox)
{
    string[] itemsList = { "~/img/1.png", "~/img/2.png", "~/img/3.png" };
    lightBox.DataSource = itemsList;
    lightBox.DataBind();
}

private void BindToArrayList(RadLightBox lightBox)
{
    ArrayList itemsList = new ArrayList();
    itemsList.Add("~/img/4.png");
    itemsList.Add("~/img/5.png");
    itemsList.Add("~/img/6.png");
    lightBox.DataSource = itemsList;
    lightBox.DataBind();
}
Protected Sub Page_Load(sender As Object, e As EventArgs)
    If Not Page.IsPostBack Then
        BindToArrayList(RadLightBox1)
        BindToArray(RadLightBox2)
    End If
End Sub

Private Sub BindToArray(lightBox As RadLightBox)
    Dim itemsList As String() = {"~/img/1.png", "~/img/2.png", "~/img/3.png"}
    lightBox.DataSource = itemsList
    lightBox.DataBind()
End Sub

Private Sub BindToArrayList(lightBox As RadLightBox)
    Dim itemsList As New ArrayList()
    itemsList.Add("~/img/4.png")
    itemsList.Add("~/img/5.png")
    itemsList.Add("~/img/6.png")
    lightBox.DataSource = itemsList
    lightBox.DataBind()
End Sub

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 section:

<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;" />
protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        RadLightBox1.DataSource = GetFileInfoData();
        RadLightBox1.DataBind();
    }
}

private object GetFileInfoData()
{
    List<FileInfoData> fid = new List<FileInfoData>();
    foreach (string fileName in Directory.GetFiles(Server.MapPath("images")))
    { 
        fid.Add(new FileInfoData { 
            FileName = Path.GetFileNameWithoutExtension(fileName), 
            FilePath = "~\\" + fileName.Replace(Request.ServerVariables["APPL_PHYSICAL_PATH"], String.Empty),
            FileNameExt = Path.GetFileName(fileName)
        });
    }
    return fid;
}


public class FileInfoData
{
    public string FileName { get; set; }
    public string FilePath { get; set; }
    public string FileNameExt { get; set; }
}
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
    If Not IsPostBack Then
        RadLightBox1.DataSource = GetFileInfoData()
        RadLightBox1.DataBind()
    End If
End Sub

Private Function GetFileInfoData() As Object
    Dim fid As New List(Of FileInfoData)()
    For Each fileName As String In Directory.GetFiles(Server.MapPath("images"))
        fid.Add(New FileInfoData() With { _
            .FileName = Path.GetFileNameWithoutExtension(fileName), _
            .FilePath = "~\" + fileName.Replace(Request.ServerVariables("APPL_PHYSICAL_PATH"), [String].Empty), _
            .FileNameExt = Path.GetFileName(fileName) _
        })
    Next
    Return fid
End Function


Public Class FileInfoData
    Public Property FileName() As String
        Get
            Return m_FileName
        End Get
        Set(value As String)
            m_FileName = value
        End Set
    End Property
    Private m_FileName As String
    Public Property FilePath() As String
        Get
            Return m_FilePath
        End Get
        Set(value As String)
            m_FilePath = value
        End Set
    End Property
    Private m_FilePath As String
    Public Property FileNameExt() As String
        Get
            Return m_FileNameExt
        End Get
        Set(value As String)
            m_FileNameExt = value
        End Set
    End Property
    Private m_FileNameExt As String
End Class

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 section:

<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" />
protected void Page_Load(object sender, EventArgs e)
{
    if (!Page.IsPostBack)
    {
        BindToDataTable(RadLightBox1);
    }

}

private void BindToDataTable(RadLightBox lightBox)
{

    SqlConnection con = new SqlConnection("Data Source=LOCAL;Initial Catalog=Combo;Integrated Security=True");

    SqlDataAdapter adapter = new SqlDataAdapter("SELECT [Title], [Description], [ImageUrl] FROM [Portfolio]", con);
    DataTable links = new DataTable();

    adapter.Fill(links);

    lightBox.DataImageUrlField = "ImageUrl";
    lightBox.DataTitleField = "Title";
    lightBox.DataDescriptionField = "Description";
    lightBox.DataSource = links;
    lightBox.DataBind();
}

Protected Sub Page_Load(sender As Object, e As EventArgs)
    If Not Page.IsPostBack Then
        BindToDataTable(RadLightBox1)
    End If

End Sub

Private Sub BindToDataTable(lightBox As RadLightBox)

    Dim con As New SqlConnection("Data Source=LOCAL;Initial Catalog=Combo;Integrated Security=True")

    Dim adapter As New SqlDataAdapter("SELECT [Title], [Description], [ImageUrl] FROM [Portfolio]", con)
    Dim links As New DataTable()

    adapter.Fill(links)

    lightBox.DataImageUrlField = "ImageUrl"
    lightBox.DataTitleField = "Title"
    lightBox.DataDescriptionField = "Description"
    lightBox.DataSource = links
    lightBox.DataBind()
End Sub

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;
    }
}

Public Sub New()
End Sub
Public Shared Function GetItems() As List(Of LightBoxDataItem)
    Dim itemsList As New List(Of 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
End Function
Public Class LightBoxDataItem
    Private _title As String
    Private _imageUrl As String
    Private _description As String

    Public Property Title() As String
        Get
            Return _title
        End Get
        Set(value As String)
            _title = value
        End Set
    End Property

    Public Property ImageUrl() As String
        Get
            Return _imageUrl
        End Get
        Set(value As String)
            _imageUrl = value
        End Set
    End Property

    Public Property Description() As String
        Get
            Return _description
        End Get
        Set(value As String)
            _description = value
        End Set
    End Property
    Public Sub New(title As String, imageUrl As String, description As String)
        _title = title
        _imageUrl = imageUrl
        _description = description
    End Sub
End Class

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;" />
public IQueryable<MyPicture> GetPictures()
{
    return new MyPicture().GetPictures();
}

public class MyPicture
{
    public int ID { get; set; }
    public string Path { get; set; }

    public IQueryable<MyPicture> GetPictures()
    {
        List<MyPicture> collection = new List<MyPicture>();

        collection.Add(new MyPicture() { ID = 1, Path = "~/Images/1.png" });
        collection.Add(new MyPicture() { ID = 2, Path = "~/Images/2.png" });
        collection.Add(new MyPicture() { ID = 3, Path = "~/Images/3.png" });
        collection.Add(new MyPicture() { ID = 4, Path = "~/Images/4.png" });
        collection.Add(new MyPicture() { ID = 5, Path = "~/Images/5.png" });

        return collection.AsQueryable();
    }
}
Public Function GetPictures() As IQueryable(Of MyPicture)
    Return New MyPicture().GetPictures()
End Function

Public Class MyPicture
    Public Property ID() As Integer
        Get
            Return m_ID
        End Get
        Set(value As Integer)
            m_ID = Value
        End Set
    End Property
    Private m_ID As Integer
    Public Property Path() As String
        Get
            Return m_Path
        End Get
        Set(value As String)
            m_Path = Value
        End Set
    End Property
    Private m_Path As String

    Public Function GetPictures() As IQueryable(Of MyPicture)
        Dim collection As New List(Of MyPicture)()

        collection.Add(New MyPicture() With { _
            .ID = 1, _
            .Path = "~/Images/1.png" _
        })
        collection.Add(New MyPicture() With { _
            .ID = 2, _
            .Path = "~/Images/2.png" _
        })
        collection.Add(New MyPicture() With { _
            .ID = 3, _
            .Path = "~/Images/3.png" _
        })
        collection.Add(New MyPicture() With { _
            .ID = 4, _
            .Path = "~/Images/4.png" _
        })
        collection.Add(New MyPicture() With { _
            .ID = 5, _
            .Path = "~/Images/5.png" _
        })

        Return collection.AsQueryable()
    End Function
End Class