cest
Top achievements
Rank 1
Iron
Rank 1
Iron
Having issues trying to get multiple textboxes to populate a single rad window depending on which submit button is clicked. I am trying to eventually output from rad window as it will post with what ever information I pull output onto window and then the start button will then timestamp. I am mainly just doing this piece by pice and want to just output something. This is the code that I have so far.
Imports Telerik.Web.UI
Partial Class TestPage
Inherits System.Web.UI.Page
Protected Sub Start_RadButton1_Click(ByVal sender As Object, ByVal e As EventArgs) Handles Start_RadButton1.Click
ShowRadWindowWithContent(RadTextBox7.Text)
End Sub
Protected Sub Start_RadButton2_Click(ByVal sender As Object, ByVal e As EventArgs) Handles Start_RadButton2.Click
ShowRadWindowWithContent(RadTextBox8.Text)
End Sub
Private Sub ShowRadWindowWithContent(ByVal content As String)
' Encode content to be safely used in JavaScript
Dim encodedContent As String = HttpUtility.JavaScriptStringEncode(content)
' Register JavaScript to update and show the RadWindow
Dim script As String = "function openRadWindow() { " _
& " var radWindow = $find('" & RadWindow2.ClientID & "'); " _
& " if (radWindow) { " _
& " var contentLabel = radWindow.get_contentElement().querySelector('#DynamicLabel'); " _
& " if (contentLabel) { " _
& " contentLabel.innerHTML = '" & encodedContent & "'; " _
& " } " _
& " radWindow.show(); " _
& " } " _
& "} openRadWindow();"
RadScriptManager.RegisterStartupScript(Me, Me.GetType(), "ShowRadWindow", script, True)
End Sub
End Class<%@ Page Language="vb" AutoEventWireup="false" CodeFile="TestPage.aspx.vb" Inherits="TestPage" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Dynamic RadWindow Example</title>
</head>
<body>
<form id="form1" runat="server">
<telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
<telerik:RadWindow ID="RadWindow2" runat="server" Modal="True" Skin="Metro" Visible="false">
<ContentTemplate>
<div class="content-container">
<div class="rad-label">
<telerik:RadLabel Text="Start Task?" runat="server" style="color: azure" />
</div>
<div id="contentContainer">
<telerik:RadLabel ID="DynamicLabel" runat="server" />
</div>
<div class="button-container">
<asp:Button ID="Button1" runat="server" Text="Start" />
<asp:Button ID="Button2" runat="server" Text="Cancel" />
</div>
</div>
</ContentTemplate>
</telerik:RadWindow>
<telerik:LayoutRow>
<Columns>
<telerik:LayoutColumn Span="3" SpanXs="0" SpanSm="0">
<div class="col">
<label>Test: </label>
</div>
</telerik:LayoutColumn>
<telerik:LayoutColumn Span="8" SpanXs="12" SpanSm="12">
<telerik:RadTextBox ID="RadTextBox7" RunAt="server"/>
<telerik:RadButton ID="Start_RadButton1" runat="server" Text="Start" OnClick="Start_RadButton1_Click" />
</telerik:LayoutColumn>
</Columns>
</telerik:LayoutRow>
<telerik:LayoutRow>
<Columns>
<telerik:LayoutColumn Span="3" SpanXs="0" SpanSm="0">
<div class="col">
<label>TimeStamp: </label>
</div>
</telerik:LayoutColumn>
<telerik:LayoutColumn Span="8" SpanXs="12" SpanSm="12">
<telerik:RadTextBox ID="RadTextBox8" RunAt="server"/>
<telerik:RadButton ID="Start_RadButton2" runat="server" Text="Start" OnClick="Start_RadButton2_Click" />
<telerik:RadButton ID="RadButton22" runat="server" Text="Completed"/>
</telerik:LayoutColumn>
</Columns>
</telerik:LayoutRow>
</form>
</body>
</html>1 Answer, 1 is accepted
0
Hi Christopher,
To address the issue of populating the RadWindow based on which submit button is clicked, you need to:
- Ajaxify the textboxes and buttons since otherwise the page will postback and RadWindow will not be available on the page, e.g. wrap RadPageLayout inside <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server"> tags:
<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server"> <telerik:RadPageLayout ID="PageLayout1" runat="server"> <telerik:LayoutRow> <Columns> <telerik:LayoutColumn Span="3" SpanXs="0" SpanSm="0"> <div class="col"> <label>Test: </label> </div> </telerik:LayoutColumn> <telerik:LayoutColumn Span="8" SpanXs="12" SpanSm="12"> <telerik:RadTextBox ID="RadTextBox7" runat="server" /> <telerik:RadButton ID="Start_RadButton1" runat="server" Text="Start" OnClick="Start_RadButton1_Click" /> </telerik:LayoutColumn> </Columns> </telerik:LayoutRow> <telerik:LayoutRow> <Columns> <telerik:LayoutColumn Span="3" SpanXs="0" SpanSm="0"> <div class="col"> <label>TimeStamp: </label> </div> </telerik:LayoutColumn> <telerik:LayoutColumn Span="8" SpanXs="12" SpanSm="12"> <telerik:RadTextBox ID="RadTextBox8" runat="server" /> <telerik:RadButton ID="Start_RadButton2" runat="server" Text="Start" OnClick="Start_RadButton2_Click" /> <telerik:RadButton ID="RadButton22" runat="server" Text="Completed" /> </telerik:LayoutColumn> </Columns> </telerik:LayoutRow> </telerik:RadPageLayout> </telerik:RadAjaxPanel> - Remove the Visible="false" property from RadWindow declaration:
<telerik:RadWindow ID="RadWindow2" runat="server" Modal="true" Skin="Metro" > <ContentTemplate> <div class="content-container"> <div class="rad-label"> <telerik:RadLabel Text="Start Task?" runat="server" Style="color: azure" /> </div> <div id="contentContainer"> <telerik:RadLabel ID="DynamicLabel" runat="server" /> </div> <div class="button-container"> <asp:Button ID="Button1" runat="server" Text="Start" /> <asp:Button ID="Button2" runat="server" Text="Cancel" /> </div> </div> </ContentTemplate> </telerik:RadWindow> - Modify the JavaScript code to show the Window before the code which tries to access its content element:
Private Sub ShowRadWindowWithContent(ByVal content As String) ' Encode content to be safely used in JavaScript Dim encodedContent As String = HttpUtility.JavaScriptStringEncode(content) ' Register JavaScript to update and show the RadWindow Dim script As String = "function openRadWindow() { " _ & " var radWindow = $find('" & RadWindow2.ClientID & "'); " _ & " if (radWindow) { " _ & " radWindow.show();" _ & " var contentLabel = radWindow.get_contentElement().querySelector('#RadWindow2_C_DynamicLabel'); " _ & " if (contentLabel) { " _ & " contentLabel.innerHTML = '" & encodedContent & "'; " _ & " } " _ & " } " _ & "} openRadWindow();" RadScriptManager.RegisterStartupScript(Me, Me.GetType(), "ShowRadWindow", script, True) End Sub - Also the querySelector should refer to the "#RadWindow2_C_DynamicLabel' ID, since the Label is placed in a naming container.
Here are my test pages:
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default2.aspx.vb" Inherits="Default2" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>RadWindow</title>
</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:RadWindow ID="RadWindow2" runat="server" Modal="true" Skin="Metro" >
<ContentTemplate>
<div class="content-container">
<div class="rad-label">
<telerik:RadLabel Text="Start Task?" runat="server" Style="color: azure" />
</div>
<div id="contentContainer">
<telerik:RadLabel ID="DynamicLabel" runat="server" />
</div>
<div class="button-container">
<asp:Button ID="Button1" runat="server" Text="Start" />
<asp:Button ID="Button2" runat="server" Text="Cancel" />
</div>
</div>
</ContentTemplate>
</telerik:RadWindow>
<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server">
<telerik:RadPageLayout ID="PageLayout1" runat="server">
<telerik:LayoutRow>
<Columns>
<telerik:LayoutColumn Span="3" SpanXs="0" SpanSm="0">
<div class="col">
<label>Test: </label>
</div>
</telerik:LayoutColumn>
<telerik:LayoutColumn Span="8" SpanXs="12" SpanSm="12">
<telerik:RadTextBox ID="RadTextBox7" runat="server" />
<telerik:RadButton ID="Start_RadButton1" runat="server" Text="Start" OnClick="Start_RadButton1_Click" />
</telerik:LayoutColumn>
</Columns>
</telerik:LayoutRow>
<telerik:LayoutRow>
<Columns>
<telerik:LayoutColumn Span="3" SpanXs="0" SpanSm="0">
<div class="col">
<label>TimeStamp: </label>
</div>
</telerik:LayoutColumn>
<telerik:LayoutColumn Span="8" SpanXs="12" SpanSm="12">
<telerik:RadTextBox ID="RadTextBox8" runat="server" />
<telerik:RadButton ID="Start_RadButton2" runat="server" Text="Start" OnClick="Start_RadButton2_Click" />
<telerik:RadButton ID="RadButton22" runat="server" Text="Completed" />
</telerik:LayoutColumn>
</Columns>
</telerik:LayoutRow>
</telerik:RadPageLayout>
</telerik:RadAjaxPanel>
</form>
</body>
</html>
Imports System.Data
Imports Telerik.Web.UI
Imports System.IO
Partial Class Default2
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
End Sub
Protected Sub Start_RadButton1_Click(ByVal sender As Object, ByVal e As EventArgs) Handles Start_RadButton1.Click
ShowRadWindowWithContent(RadTextBox7.Text)
End Sub
Protected Sub Start_RadButton2_Click(ByVal sender As Object, ByVal e As EventArgs) Handles Start_RadButton2.Click
ShowRadWindowWithContent(RadTextBox8.Text)
End Sub
Private Sub ShowRadWindowWithContent(ByVal content As String)
' Encode content to be safely used in JavaScript
Dim encodedContent As String = HttpUtility.JavaScriptStringEncode(content)
' Register JavaScript to update and show the RadWindow
Dim script As String = "function openRadWindow() { " _
& " var radWindow = $find('" & RadWindow2.ClientID & "'); " _
& " if (radWindow) { " _
& " radWindow.show();" _
& " var contentLabel = radWindow.get_contentElement().querySelector('#RadWindow2_C_DynamicLabel'); " _
& " if (contentLabel) { " _
& " contentLabel.innerHTML = '" & encodedContent & "'; " _
& " } " _
& " } " _
& "} openRadWindow();"
RadScriptManager.RegisterStartupScript(Me, Me.GetType(), "ShowRadWindow", script, True)
End Sub
End Class
I hope this will help you achieve your goal.
Regards,
Rumen
Progress Telerik
Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Telerik family, check out our getting started resources!