LightBox - Templates

How to Create Your First Project

VideoImage In this 5-minutes video you will learn how to use Telerik Controls for ASP.NET AJAX and Telerik's Visual Studio Extensions to quickly create a form for entering profile-like user information.

Was this video helpful?

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

Telerik RadLightBox's templates are useful when you want to extend the capability of the control. You can embed any content inside a RadLightBox template, including HTML markup, iframes, ASP.NET server controls. You could use ItemTemplate to customize the look of the item zone and use DescriptionTemplate to customize the look of the description zone.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
  • styles.css
<%@ Page Language="c#" CodeFile="DefaultCS.aspx.cs" AutoEventWireup="true" Inherits="Telerik.LightBoxExamplesCS.Examples.Templates.DefaultCS" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<!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" />
    <script type="text/javascript" src="scripts.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <script type="text/javascript">
            Sys.Application.add_load(function () {
                demo.vLightBox = $find("<%=OpenVideoLightBox.ClientID %>");
                demo.cLightBox = $find("<%=CodeLightBox.ClientID %>");
                demo.fLightBox = $find("<%=FeedbackLightBox.ClientID %>");
                demo.initialize();
            });
        </script>
    </telerik:RadCodeBlock>
    <div class="demo-container size-medium">
        <div class="description_wrapper">
            <h2>How to Create Your First Project</h2>
            <asp:Image ImageUrl="~/LightBox/Examples/Templates/images/thumbnail.jpg" ID="VideoImage" AlternateText="VideoImage" runat="server" onclick="demo.openVideLightBox(); return false;" />
            <span class="description">In this 5-minutes video you will learn how to use Telerik Controls for ASP.NET AJAX and Telerik's Visual Studio Extensions to quickly create 
            a form for entering profile-like user information.
            </span>
            <telerik:RadButton RenderMode="Lightweight" ID="CodeButton" OnClientClicked="demo.openCodeLightBox" AutoPostBack="false" Text="Get the Source Code" Skin="Silk"
                CssClass="rbPrimaryButton" runat="server" />
        </div>
        <div class="bottomWrapper">
            <p>Was this video helpful?</p>
            <telerik:RadButton RenderMode="Lightweight" ID="FeedbackButton" OnClientClicked="demo.openFeedbackLightBox" AutoPostBack="false" Text="Share Your Feedback"
                Skin="Silk" runat="server" />
        </div>
        <telerik:RadLightBox RenderMode="Lightweight" ID="FeedbackLightBox" runat="server" Width="400px" Height="350px" CssClass="lb_feedback" Modal="true" ZIndex="100000">
            <ClientSettings>
                <AnimationSettings HideAnimation="Resize" NextAnimation="Fade" PrevAnimation="Fade" ShowAnimation="Resize" />
            </ClientSettings>
            <Items>
                <telerik:RadLightBoxItem>
                    <ItemTemplate>
                        <asp:Label ID="FormTitle" runat="server" Text="SHARE YOUR FEEDBACK" CssClass="feedback_header"></asp:Label>
                        <br />
                        <asp:Label Text="FirstName:" ID="FirstNameLabel" runat="server" CssClass="feedback_label" />
                        <telerik:RadTextBox RenderMode="Lightweight" runat="server" ID="FirstNameTextBox" Width="245px" />
                        <br />
                        <asp:Label Text="LastName:" ID="LastNameLabel" runat="server" CssClass="feedback_label" />
                        <telerik:RadTextBox RenderMode="Lightweight" runat="server" ID="LastNameTextBox" Width="245px" />
                        <br />
                        <asp:Label Text="Email:" ID="EmailLabel" runat="server" CssClass="feedback_label" />
                        <telerik:RadTextBox RenderMode="Lightweight" runat="server" ID="EmailTextBox" Width="245px" />
                        <br />
                        <asp:Label Text="Comments:" ID="CommentsLabel" runat="server" CssClass="feedback_label" />
                        <telerik:RadTextBox RenderMode="Lightweight" ID="RadTextBox1" runat="server" Resize="None" TextMode="MultiLine" Width="245px" Height="100px"></telerik:RadTextBox>
                        <br />
                        <telerik:RadButton RenderMode="Lightweight" ID="RadButton1" Text="Submit Feedback" runat="server" Skin="Silk" CssClass="submit_feedback_btn rbPrimaryButton"></telerik:RadButton>
                    </ItemTemplate>
                </telerik:RadLightBoxItem>
            </Items>
        </telerik:RadLightBox>
        <telerik:RadLightBox RenderMode="Lightweight" ID="CodeLightBox" runat="server" Width="1000px" Height="720px" CssClass="lb_code" ItemsCounterFormatString="Code page {0} of {1}" Modal="true" ZIndex="100000">
            <ClientSettings>
                <AnimationSettings HideAnimation="Resize" NextAnimation="Fade" PrevAnimation="Fade" ShowAnimation="Resize" />
            </ClientSettings>
            <Items>
                <telerik:RadLightBoxItem>
                    <ItemTemplate>
                        <div style="height: 700px; overflow: auto; width: 860px; margin-left: 70px; position: relative;">
                            <pre runat="server" id="code1" class="brush: xml" onprerender="code1_PreRender"></pre>
                        </div>
                    </ItemTemplate>
                </telerik:RadLightBoxItem>
                <telerik:RadLightBoxItem>
                    <ItemTemplate>
                        <div style="height: 700px; overflow: auto; width: 860px; margin-left: 70px; position: relative;">
                            <pre runat="server" id="code2" class="brush: csharp" onprerender="code2_PreRender"></pre>
                        </div>
                    </ItemTemplate>
                </telerik:RadLightBoxItem>
            </Items>
        </telerik:RadLightBox>
        <telerik:RadLightBox RenderMode="Lightweight" ID="OpenVideoLightBox" runat="server" Modal="true" ZIndex="100000">
            <ClientSettings>
                <AnimationSettings HideAnimation="Resize" NextAnimation="Fade" PrevAnimation="Fade" ShowAnimation="Resize" />
            </ClientSettings>
            <Items>
                <telerik:RadLightBoxItem Width="680px" Height="440px">
                    <ItemTemplate>
                        <div style="width: 640px; height: 480px;">
                            <object type="application/x-shockwave-flash" style="width: 640px; height: 480px;" data="http://www.youtube.com/v/j8VZ4aK8caw?color2=FBE9EC&amp;version=3">
                                <param name="movie" value="http://www.youtube.com/v/j8VZ4aK8caw?color2=FBE9EC&amp;version=3" />
                                <param name="allowFullScreen" value="true" />
                                <param name="allowscriptaccess" value="always" />
                            </object>
                        </div>
                    </ItemTemplate>
                </telerik:RadLightBoxItem>
            </Items>
        </telerik:RadLightBox>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance

Help Us Improve

Was this example helpful?