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

Templates

How to Create Your First Project

VideoImage In this video series brought to you by the Telerik UI for ASP.NET AJAX Team at Progress, you will learn a few tips for debugging ASP.NET applications using the Visual Studio tools and .NET Framework.

Was this video helpful?

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>
<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 video series brought to you by the Telerik UI for ASP.NET AJAX Team at Progress, you will learn a few tips for debugging ASP.NET applications using the Visual Studio tools and .NET Framework.
            </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="560px" Height="320px">
                    <ItemTemplate>
                        <div>
                            <iframe width="560" height="315" src="https://www.youtube.com/embed/9jRGEgaE8Pg" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                        </div>
                    </ItemTemplate>
                </telerik:RadLightBoxItem>
            </Items>
        </telerik:RadLightBox>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance