New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Client-side Binding

In this demo you can see how the RadLightBox is bound to a RadClientDataSource.

You can data bind RadLightBox on the client to a RadClientDataSource control since Q2 2014. This functionality is provided out of the box through the ClientDataSourceID property.

The seamless integration between these two controls allows a fully codeless approach.

You should only set the ClientDataSourceID and specify the LightBox DataFileds:

  • DataImageUrlField
  • DataImageUrlField
  • DataTitleField
  • DataTargetControlIDField
  • DefaultCS.aspx
  • styles.css
<%@ Page Title="" Language="C#"  %>

<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="styles.css" type="text/css" rel="stylesheet" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container">
        <telerik:RadListView ID="RadListView1" runat="server" ItemPlaceholderID="ItemPlaceHolder" ClientDataSourceID="RadClientDataSource1">
            <LayoutTemplate>
                <ul id="ItemPlaceHolder" runat="server" class="lbdemoWrapper">
                    <li></li>
                </ul>
            </LayoutTemplate>
            <ClientSettings>
                <DataBinding>
                    <ItemTemplate>
                    <li class="lbdemoItemWrapper">
                        <img id="#= ControlID #" src="#= ThumbnailUrl #" alt="#= Title #" />
                    </li>
                    </ItemTemplate>
                </DataBinding>
            </ClientSettings>
        </telerik:RadListView>
        <telerik:RadLightBox RenderMode="Lightweight" runat="server" ID="RadLightBox1" Height="500px" Width="800px" Modal="true" ShowLoadingPanel="false" ZIndex="100000"
            ClientDataSourceID="RadClientDataSource1"
            DataImageUrlField="ImageUrl" DataDescriptionField="Description" DataTitleField="Title" DataTargetControlIDField="ControlID">
            <ClientSettings>
                <AnimationSettings ShowAnimation="Resize" HideAnimation="Resize" NextAnimation="CollapsingHorizontalStripes" PrevAnimation="CollapsingHorizontalStripes" />
            </ClientSettings>
        </telerik:RadLightBox>
        <telerik:RadClientDataSource runat="server" ID="RadClientDataSource1">
            <DataSource>
                <WebServiceDataSourceSettings>
                    <Select Url="LBImageService.asmx/GetImages" RequestType="Post" DataType="JSON" ContentType="application/json" />
                </WebServiceDataSourceSettings>
            </DataSource>
            <Schema DataName="d">
            </Schema>
        </telerik:RadClientDataSource>
    </div>

    </form>
</body>
</html>

Support & Learning Resources

Find Assistance