This is a migrated thread and some comments may be shown as answers.

Show lightbox code behind

4 Answers 215 Views

LightBox

This is a migrated thread and some comments may be shown as answers.

4 Answers, 1 is accepted

answered on 07 Nov 2014, 10:10 PM

It has been many months since this question from Troy, but we had the same need and came up with a working solution. The solution to the problem entails a combination of AJAX and JavaScript. All necessary code is in the default.aspx and default.aspx.vb files.

default.aspx

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

<telerik:RadStyleSheetManager id="RadStyleSheetManager1" runat="server" />

</head>

<body>

<form id="form1" runat="server">

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">

<Scripts>

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />

</Scripts>

</telerik:RadScriptManager>

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

<script type="text/javascript">

var lightBox;

var lightBoxVisible = false;

function OpenLightBox() {

lightBoxVisible = true;

lightBox = $find('<%=RadLightBox1.ClientID%>');

lightBox.show();

}

$telerik.$(document).ready(function () {

if (lightBoxVisible === true) {

lightBox = $find('<%=RadLightBox1.ClientID%>');

lightBox.show();

}

});

</script>

</telerik:RadCodeBlock>

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" >

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="RadButton1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadLightBox1" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<telerik:RadLightBox ID="RadLightBox1" runat="server" Modal="true" ShowMaximizeButton="false" ShowNextButton="false" ShowPrevButton="false" >

<ClientSettings>

<AnimationSettings HideAnimation="Resize" ShowAnimation="Resize" />

</ClientSettings>

<Items>

<telerik:RadLightBoxItem>

<ItemTemplate>

<telerik:RadTextBox ID="RadTextBox1" runat="server" TextMode="MultiLine" Width="300px" Height="80px" ReadOnly="true" />

</ItemTemplate>

</telerik:RadLightBoxItem>

</Items>

</telerik:RadLightBox>

<div>

<telerik:RadButton ID="RadButton1" runat="server" Text="Cause Callback" />

</div>

</form>

</body>

</html>

default.aspx.vb

Imports Telerik.Web.UI

Partial Class _Default

Inherits System.Web.UI.Page

Protected Sub Page_Init(sender As Object, e As System.EventArgs) Handles Me.Init

' needed to load scripts each callback/postback

AddHandler Me.PreRender, AddressOf RegisterScript

End Sub

Private _functions As New List(Of String)

' add functions to list to be sent back to the page

Public Sub RegisterCustomScript(script As String)

' ensure script ends with ;

If Not script.EndsWith(";") Then

script &= ";"

End If

' don't register duplicate scripts

If Not _functions.Contains(script) Then _functions.Add(script)

End Sub

' load Javascript functions into callback/postback code

Protected Sub RegisterScript(sender As Object, e As EventArgs)

If _functions.Count > 0 Then

ScriptManager.RegisterStartupScript(Me.Page, GetType(Page), "myScripts", "function f(){" & String.Format("{0}", String.Join(" ", _functions)) & "; Sys.Application.remove_load(f);} Sys.Application.add_load(f);", True)

End If

End Sub

Protected Sub RadButton1_Click(sender As Object, e As EventArgs) Handles RadButton1.Click

' find textbox in the RadLightBox

Dim RadTextboxControl As RadTextBox = RadLightBox1.FindControl("RadTextBox1")

' add misc. data to the textbox to show we were here

RadTextboxControl.Text &= Now().ToString & vbCrLf

' cause the RadLightBox to show after callback

RegisterCustomScript("OpenLightBox();")

End Sub

End Class

answered on 25 Jun 2020, 03:19 PM

I know this is an old post but I'm working on a similar scenario right now that I have working and hopes it helps someone else. Note: There is only one Postbank page on my scenario. If yours have multiple postbacks you should adjust the pre-render code. I use a hidden field that will tell me if I should show the lightBox or not.

I have a datatable with images filepaths. If the record count = 1 then load the lightbox with the image on page load.

on the lightbox pre-render method I have:

Dim dt As DataTable = PssedDatatable
If dt.Rows.Count = 1 Then

hdnLightBoxFlag.Value = "1"
CType(RadLightBox1.FindControl("iFrameShow"), HtmlIframe).Src = dt.Rows(0).Item("FileName")
End If

and on my page I have:

function OpenLightBox() {
var lightflag = document.getElementById("hdnLightBoxFlag");
if (lightflag.value == "1") {
var lightBox = $find('<%= RadLightBox1.ClientID %>');
lightBox.show();
}

finally I call the function from the body onload section

<form id="form1" runat="server">
<asp:HiddenField ID="hdnLightBoxFlag" Value="0" runat="server" />

...

answered on 30 Jun 2020, 12:20 PM

Hi Carlos,

Thank you for sharing your experience with the community that is one way to do it. Could you also share the complete code? For instance, the Control with ID "iFrameShow" is not shown, and folks may not understand where this comes from.

Also, if attaching the onload event to the body element, it will make this script fire every time the page loads. In case Lightbox needs to be shown conditionally when the user interacts with the Web Components such as clicking on a button, Ken's example shows the optimal approach. Generally speaking, RegisterStartupScript is the recommended approach for executing Scripts from the server.

Kind regards,
Attila Antal
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.