LightBox - Data Binding

Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

This example demonstrates how to bind RadLightBox to Entity Framework data. 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 the respective columns / fields from the data source.

  • DefaultCS.aspx
  • styles.css
<%@ Page Language="c#"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="styles.css" rel="stylesheet" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <script type="text/javascript">
        function OpenRadLigthBox(index) {
            var lightBox = $find('<%= RadLightBox1.ClientID %>');
            lightBox.set_currentItemIndex(index);
            lightBox.show();
        }
    </script>
    <div class="demo-container no-bg">
        <telerik:RadLightBox RenderMode="Lightweight" ID="RadLightBox1" runat="server" DataImageUrlField="ImageUrl" DataDescriptionField="ImageDescription" TabIndex="101" ZIndex="100000"
            DataTitleField="ImageTitle" DataSourceID="SqlDataSource1" Modal="true" AppendDataBoundItems="true">
            <ClientSettings AllowKeyboardNavigation="true" NavigationMode="Zone">
                <AnimationSettings HideAnimation="Resize" NextAnimation="Resize" PrevAnimation="Resize" ShowAnimation="Resize" />
            </ClientSettings>
        </telerik:RadLightBox>
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:TelerikConnectionString %>"
            ProviderName="System.Data.SqlClient" SelectCommand="SELECT * FROM FurnitureDesign"></asp:SqlDataSource>
        <div>
            <asp:Image ID="Logo" runat="server" ImageUrl="~/LightBox/Examples/Data-Binding/images/logo.png" AlternateText="Logo" CssClass="furniture_logo" />
            <div class="image_holder">
                <div class="column">
                    <a href="#" onclick="OpenRadLigthBox(0); return false;" class="single_image">
                        <asp:Image ID="LeatherCouch" AlternateText="Leather Couch" runat="server" CssClass="gray" ImageUrl="~/LightBox/Examples/Data-Binding/images/thumbnail/leather_couch.png" />
                        <span class="product_info">
                            <span class="product">leather couch</span>
                            <span class="price">$ 2370</span>
                        </span>
                    </a>
                    <a href="#" onclick="OpenRadLigthBox(1); return false;" class="single_image">
                        <asp:Image ID="BackSeatChair" AlternateText="Back Seat Chair" runat="server" CssClass="gray" ImageUrl="~/LightBox/Examples/Data-Binding/images/thumbnail/back_seat_chair.png" />
                        <span class="product_info">
                            <span class="product">back seat chair</span>
                            <span class="price">$ 370</span>
                        </span>
                    </a>
                    <a href="#" onclick="OpenRadLigthBox(2); return false;" class="single_image">
                        <asp:Image ID="LeatherSemisofal" AlternateText="Leather Semisofal" runat="server" CssClass="gray" ImageUrl="~/LightBox/Examples/Data-Binding/images/thumbnail/leather_semisofa.png" />
                        <span class="product_info">
                            <span class="product">leather semisofa</span>
                            <span class="price">$ 2120</span>
                        </span>
                    </a>
                </div>
                <div class="column">
                    <a href="#" onclick="OpenRadLigthBox(3); return false;" class="single_image">
                        <asp:Image ID="Lounger" AlternateText="Lounger" runat="server" CssClass="gray" ImageUrl="~/LightBox/Examples/Data-Binding/images/thumbnail/lounger.png" />
                        <span class="product_info">
                            <span class="product">lounger</span>
                            <span class="price">$ 830</span>
                        </span>
                    </a>
                    <a href="#" onclick="OpenRadLigthBox(4); return false;" class="single_image">
                        <asp:Image ID="DeluxeSofa" AlternateText="Deluxe Sofa" runat="server" CssClass="gray" ImageUrl="~/LightBox/Examples/Data-Binding/images/thumbnail/deluxe_sofa.png" />
                        <span class="product_info">
                            <span class="product">deluxe sofa</span>
                            <span class="price">$ 1860</span>
                        </span>
                    </a>
                    <a href="#" onclick="OpenRadLigthBox(5); return false;" class="single_image">
                        <asp:Image ID="RattanWavelyLounger" AlternateText="Rattan Wavely Lounger" runat="server" CssClass="gray" ImageUrl="~/LightBox/Examples/Data-Binding/images/thumbnail/rattan_wavely_lounger.png" />
                        <span class="product_info">
                            <span class="product">rattan wavely lounger</span>
                            <span class="price">$ 710</span>
                        </span>
                    </a>
                </div>
                <div class="column">
                    <a href="#" onclick="OpenRadLigthBox(6); return false;" class="single_image">
                        <asp:Image ID="GraphiteChair" AlternateText="Graphite Chair" runat="server" CssClass="gray" ImageUrl="~/LightBox/Examples/Data-Binding/images/thumbnail/graphite_chair.png" />
                        <span class="product_info">
                            <span class="product">graphite chair</span>
                            <span class="price">$ 420</span>
                        </span>
                    </a>
                    <a href="#" onclick="OpenRadLigthBox(7); return false;" class="single_image">
                        <asp:Image ID="RattanLounger" AlternateText="Rattan Lounger" runat="server" CssClass="gray" ImageUrl="~/LightBox/Examples/Data-Binding/images/thumbnail/rattan_lounger.png" />
                        <span class="product_info">
                            <span class="product">rattan lounger</span>
                            <span class="price">$ 530</span>
                        </span>
                    </a>
                    <a href="#" onclick="OpenRadLigthBox(8); return false;" class="single_image">
                        <asp:Image ID="RedLeatherArmchair" AlternateText="Red Leather Armchair" runat="server" CssClass="gray" ImageUrl="~/LightBox/Examples/Data-Binding/images/thumbnail/red_leather_armchair.png" />
                        <span class="product_info">
                            <span class="product">red leather armchair</span>
                            <span class="price">$ 830</span>
                        </span>
                    </a>
                </div>
            </div>
        </div>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance

Help Us Improve

Was this example helpful?