ItemTemplate demo

[Fit2Page]

Hi,

Would it be possible to page in the LightBox without refreshing the whole page in this demo:

 

https://demos.telerik.com/aspnet-ajax/lightbox/examples/templates/defaultvb.aspx?show-source=true

 

Every time I click Next, the page is refreshed...

 

Marc

[Attila Antal]

Hi Marc,

If you enable AJAX for RadLightBox, it will not refresh the entire page. I've isolated the sample from the Demo you've pointed out and enabled AJAX for it. Check out the following short video for demonstration: RadLightBox with AJAX enabled

I would like to note that having templates will always result in PostBacks which is described in the Lifecycle and Loading Content article, but you may enable AJAX to only do partial postbacks.

Here is the sample code snippet I've used for the Video demo:

ASPX - Markup

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
    <script type="text/javascript">
        function openCodeLightBox(sender, args) {
            let lightBox = $find("<%=RadLightBox1.ClientID %>");
            lightBox.show();
        }
    </script>
</telerik:RadCodeBlock>
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="RadLightBox1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="RadLightBox1" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>
<telerik:RadLabel ID="RadLabel1" runat="server"></telerik:RadLabel>
<div class="container">
    <telerik:RadButton ID="RadButton1" runat="server" Text="Do PostBack without AJAX" CssClass="rbPrimaryButton"></telerik:RadButton>
    <telerik:RadButton RenderMode="Lightweight" ID="CodeButton" OnClientClicked="openCodeLightBox" AutoPostBack="false" Text="Open Lightbox" CssClass="rbPrimaryButton" runat="server" />
    <telerik:RadLightBox ID="RadLightBox1" runat="server" Width="1024px" Height="400px">
        <Items>
            <telerik:RadLightBoxItem>
                <ItemTemplate>
                    <div class="content">
                        <pre runat="server" id="code1" class="brush: xml" onprerender="code1_PreRender"></pre>
                    </div>
                </ItemTemplate>
            </telerik:RadLightBoxItem>
            <telerik:RadLightBoxItem>
                <ItemTemplate>
                    <div class="content">
                        <pre runat="server" id="code2" class="brush: csharp" onprerender="code2_PreRender"></pre>
                    </div>
                </ItemTemplate>
            </telerik:RadLightBoxItem>
        </Items>
    </telerik:RadLightBox>

C# - Code behind

protected void Page_Load(object sender, EventArgs e)
{
    RadLabel1.Text = string.Format("Update Time on Page Load: <b>{0}</b>", DateTime.Now.TimeOfDay.ToString());
}

protected void code1_PreRender(object sender, EventArgs e)
{
    StringBuilder sb = new StringBuilder();
    using (StreamReader sr = new StreamReader(Server.MapPath("resources/ExampleAspx.txt")))
    {
        String line = sr.ReadToEnd();
        sb.AppendLine(line);
    }
        (sender as System.Web.UI.HtmlControls.HtmlGenericControl).InnerText = sb.ToString();
}

protected void code2_PreRender(object sender, EventArgs e)
{
    StringBuilder sb = new StringBuilder();
    using (StreamReader sr = new StreamReader(Server.MapPath("resources/ExampleCS.txt")))
    {
        String line = sr.ReadToEnd();
        sb.AppendLine(line);
    }
        (sender as System.Web.UI.HtmlControls.HtmlGenericControl).InnerText = sb.ToString();
}

Resources can be downloaded from the attachments.

I hope this will be helpful.

Kind regards,
Attila Antal
Progress Telerik