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

[Solved] Buttons in RadWindow cause unwanted postback

3 Answers 277 Views

Window

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

ChuckRock asked on 18 Dec 2013, 11:25 PM

Hi,

I have a run-time generated RadWindow that has a variety of controls in it. The RadWindow opens correctly when triggered, but when one of the buttons in the RadWindow is pressed, it causes postback, which wipes out the RadWindow.

How can I get client side Javascript to work without posting back to server?

Below is the EditText sub that is called when a button is pressed that should open the RadWindow with the RadEditor in it. When either the Save or Add button is pressed, the RadWindow disappears, and it doesn't look like it hits the Javascript functions.

Below that is the html for the page including some rudimentary javascript functions at the bottom I am trying to use to test this.

Thanks so much for looking at this!

aspx.vb

Private Sub EditText(ByVal sender As Object, ByVal e As System.EventArgs)

Dim buttonId As String

Dim x As Integer

Dim AN As Integer

If C.UserSelectedAssessmentType = "CREATE" Then

AN = C.UserSelectedAssessmentCount

Else

AN = C.UserSelectedAssessment

End If

buttonId = DirectCast(sender, RadButton).ID

x = Mid(buttonId & " ", 8, 2)

EditingStatement = x

w1.ContentContainer.Controls.Add(New LiteralControl("<div><table style=""width:725px""><tr><td>"))

editL1.Text = "Use this editor"

w1.ContentContainer.Controls.Add(editL1)

w1.ContentContainer.Controls.Add(New LiteralControl("</td><td style=""text-align:right"">"))

editSave.AutoPostBack = False

editSave.CausesValidation = False

editSave.OnClientClicked = "EditClickSave"

editSave.ID = "editSave"

editSave.Text = "Save"

editSave.Width = 128

w1.ContentContainer.Controls.Add(editSave)

' AddHandler editSave.Click, AddressOf Me.SaveEdit

w1.ContentContainer.Controls.Add(New LiteralControl("</td></tr></table>"))

popupEditor.ID = "Editor1"

popupEditor.Width = 725

popupEditor.Height = 350

popupEditor.EditModes = EditModes.Design

w1.ContentContainer.Controls.Add(popupEditor)

editL2.Text = "Choose Item"

w1.ContentContainer.Controls.Add(editL2)

w1.ContentContainer.Controls.Add(New LiteralControl("<br />"))

editCombo.ID = "editFindings"

editCombo.Width = 410

w1.ContentContainer.Controls.Add(editCombo)

editAdd.AutoPostBack = False

editAdd.CausesValidation = False

editAdd.OnClientClicked = "EditClickAdd"

editAdd.ID = "editAdd"

editAdd.Text = "Add"

editAdd.Width = 128

w1.ContentContainer.Controls.Add(editAdd)

' AddHandler editAdd.Click, AddressOf Me.AddToEdit

w1.ContentContainer.Controls.Add(New LiteralControl("<br /></div>"))

w1.VisibleOnPageLoad = True

w1.Modal = True

w1.Height = 550

w1.Width = 800

' w1.OnClientClose = "onClientClose"

w1.Modal = True

RadMultiPage1.PageViews(0).Controls.Add(w1)

popupEditor.EnsureToolsFileLoaded()

End Sub

aspx

<%@ Page Title="" Language="VB" MasterPageFile="~/Master.master" AutoEventWireup="false" CodeFile="E14.aspx.vb" Inherits="Main" ValidateRequest="false" %>

<%@ MasterType VirtualPath="~/Master.master" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">

</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">

</asp:Content>

<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder2" Runat="Server">

<table id="footerTable">

<tr>

<td class="cl"> </td>

<td style="text-align:center" class="cc">

<span class="style2">Edit Assessment</span> <br/>

<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>

<br/>

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

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="cReassessIn">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="Panel1" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="Timer1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="lRefresh" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<asp:Label ID="TopHeader" runat="server" Font-Italic="True" Width="100%"></asp:Label>

<br/>

<asp:Panel ID="Panel1" runat="server" BorderStyle="Ridge" BorderWidth="3px" Width="95%" HorizontalAlign="Left" DefaultButton="bStore">

<telerik:radtabstrip id="RadTabStrip1" runat="server" width="100%" Skin="Outlook" AutoPostBack="True">

<Tabs>

<telerik:RadTab ID="Tab1" runat="server" Text="1" Visible="False"></telerik:RadTab>

<telerik:RadTab ID="Tab2" runat="server" Text="2" Visible="False"></telerik:RadTab>

</Tabs>

</telerik:radtabstrip>

<hr/>

<telerik:RadMultiPage ID="RadMultiPage1" runat="server" Width="100%" SelectedIndex="0">

<telerik:RadPageView ID="PageView1" runat="server">

</telerik:RadPageView>

<telerik:RadPageView ID="PageView2" runat="server" Width="100%">

</telerik:RadPageView>

</telerik:RadMultiPage>

<br/>

<hr/>

<table style="width:100%">

<tr>

<td style="vertical-align:top">

<telerik:RadComboBox ID="cAssessmentFinal" runat="server" Width="410px">

<Items>

<telerik:RadComboBoxItem runat="server" Text="Exceeds" Value="0" />

<telerik:RadComboBoxItem runat="server" Text="Meets" Value="1" />

</Items>

</telerik:RadComboBox>

</td>

</tr>

</table>

</asp:Panel>

<asp:Label ID="lRefresh" runat="server" Font-Bold="True"></asp:Label>

<asp:Label ID="lTO" runat="server" Width="140px"></asp:Label>

<asp:Panel ID="Panel2" runat="server">

<asp:Timer ID="Timer1" runat="server" Interval="120000" OnTick="Timer1_Tick"/>

<telerik:RadWindowManager ID="RadWindowManager1" runat="server" OnClientClose = "CommentsListPopUpRadWindow_OnClose">

</telerik:RadWindowManager>

</asp:Panel>

</td>

<td class="cr"> </td>

</tr>

</table>

<asp:PlaceHolder runat="server">

<script type="text/javascript">

function EditClickAdd() {

var editor = $find("<%=popupEditor.ClientID%>");

editor.pasteHtml("This is a test");

}

function EditClickSave() {

var editor = $find("<%=popupEditor.ClientID%>");

editor.pasteHtml("This is a test");

document.getElementById("Label1").value = editor.getselectionhtml + "asdf";

}

</script>

</asp:PlaceHolder>

</asp:Content>

3 Answers, 1 is accepted

answered on 19 Dec 2013, 04:22 AM

Hi,

Please have a look into the sample code snippet to achieve your scenario.

ASPX:

<telerik:RadButton ID="RadButton1" runat="server" Text="OpenWindow" OnClick="RadButton1_Click">

</telerik:RadButton>

<telerik:RadWindowManager ID="RadWindowManager1" runat="server" VisibleOnPageLoad="true">

</telerik:RadWindowManager>

VB:

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

Dim Button1 As New Telerik.Web.UI.RadButton()

Button1.Text = "Demo"

Button1.AutoPostBack = False

Button1.OnClientClicked = "ClientClicked"

Dim window As New Telerik.Web.UI.RadWindow()

window.VisibleOnPageLoad = True

window.ContentContainer.Controls.Add(Button1)

RadWindowManager1.Windows.Add(window)

End Sub

JS:

<script type="text/javascript">

function ClientClicked(sender, args) {

alert("fired");

}

</script>

Let me know if you have any concern.
Thanks,
Princy,

answered on 19 Dec 2013, 06:26 PM

Princy,

Thanks for looking at this for me.

I have isolated the issues I am having and have included the aspx and aspx.vb below so you could recreate this if you want to.

The first issue is when the RadWindow is drawing the RadEditor; none of the controls are visible; just the content section of the editor.

Secondly, in the RadWindow, whenever you click on either button, the expected result is not achieved. The javascript doesn't seem to be behaving as expected in relation to working with the RadEditor contents. The buttons just cause the RadWindow to close instead of performing their expected functions.

Any help you could provide would be GREATLY appreciated!

Editor.aspx

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

<!DOCTYPE html>

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

<head runat="server">

<title>Editor</title>

</head>

<body>

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

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

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

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="Button1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="Panel1" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<asp:Button ID="Button1" runat="server" Text="Button" />

<br />

<asp:Label ID="Label1" runat="server"></asp:Label>

<asp:Panel ID="Panel1" runat="server" BorderStyle="Ridge" BorderWidth="3px" Width="95%" HorizontalAlign="Left" DefaultButton="Button1">

<telerik:RadMultiPage ID="RadMultiPage1" runat="server" Width="100%" SelectedIndex="0">

<telerik:RadPageView ID="PageView1" runat="server"></telerik:RadPageView>

<telerik:RadPageView ID="PageView2" runat="server" Width="100%"></telerik:RadPageView>

</telerik:RadMultiPage>

</asp:Panel>

<asp:PlaceHolder runat="server">

<script type="text/javascript">

function EditClickAdd(sender, args) {

var editor = $find("<%=popupEditor.ClientID%>");

alert('Got Here 1.1');

editor.pasteHtml('This is a test');

alert('Got Here 1.2');

}

function EditClickSave(sender, args) {

var editor = $find("<%=popupEditor.ClientID%>");

alert('Got Here 2.1');

editor.pasteHtml('This is a test');

alert('Got Here 2.2');

document.getElementById('Label1').value = editor.getselectionhtml;

alert('Got Here 2.3');

}

</script>

</asp:PlaceHolder>

</form>

</body>

</html>

Editor.aspx.vb

Imports Microsoft.VisualBasic

Imports System

Imports System.Web

Imports System.Web.UI

Imports System.Text

Imports System.Web.Configuration

Imports Telerik.Web.UI

Partial Class MNavigator_Editor

Inherits System.Web.UI.Page

Public aEditButton(100) As RadButton

Dim w1 As New RadWindow

Dim editL1 As New Label

Dim editSave As New RadButton

Public popupEditor As New RadEditor

Public EditedText As String

Dim editCombo As New RadComboBox

Dim editAdd As New RadButton

Dim editL2 As New Label

Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load

Dim x As Integer = 0

Do While x < 10 ' Create 10 buttons, and link to EditText for handler

aEditButton(x) = New RadButton

aEditButton(x).Text = "Edit"

aEditButton(x).ID = "EButton" & x

AddHandler aEditButton(x).Click, AddressOf Me.EditText

RadMultiPage1.PageViews(0).Controls.Add(New LiteralControl("<table><tr><td>"))

RadMultiPage1.PageViews(0).Controls.Add(aEditButton(x))

RadMultiPage1.PageViews(0).Controls.Add(New LiteralControl("</td></tr></table>"))

RadAjaxManager1.AjaxSettings.AddAjaxSetting(aEditButton(x), Panel1)

x += 1

Loop

End Sub

Private Sub EditText(ByVal sender As Object, ByVal e As System.EventArgs)

Dim buttonId As String

Dim x As Integer

' Build editor window

buttonId = DirectCast(sender, RadButton).ID

x = Mid(buttonId & " ", 8, 2)

w1.ContentContainer.Controls.Add(New LiteralControl("<div><table style=""width:725px""><tr><td>"))

editL1.Text = "Use this editor"

w1.ContentContainer.Controls.Add(editL1)

w1.ContentContainer.Controls.Add(New LiteralControl("</td><td style=""text-align:right"">"))

editSave.AutoPostBack = False

editSave.CausesValidation = False

editSave.OnClientClicked = "EditClickSave"

editSave.ID = "editSave"

editSave.Text = "Save"

editSave.Width = 128

w1.ContentContainer.Controls.Add(editSave)

' AddHandler editSave.Click, AddressOf Me.SaveEdit

w1.ContentContainer.Controls.Add(New LiteralControl("</td></tr></table>"))

popupEditor.ID = "Editor1"

popupEditor.Width = 725

popupEditor.Height = 350

popupEditor.EditModes = EditModes.Design

w1.ContentContainer.Controls.Add(popupEditor)

editL2.Text = "Choose Item to add"

w1.ContentContainer.Controls.Add(editL2)

w1.ContentContainer.Controls.Add(New LiteralControl("<br />"))

editCombo.ID = "editFindings"

editCombo.Width = 410

w1.ContentContainer.Controls.Add(editCombo)

editAdd.AutoPostBack = False

editAdd.CausesValidation = False

editAdd.OnClientClicked = "EditClickAdd"

editAdd.ID = "editAdd"

editAdd.Text = "Add"

editAdd.Width = 128

w1.ContentContainer.Controls.Add(editAdd)

' AddHandler editAdd.Click, AddressOf Me.AddToEdit

w1.ContentContainer.Controls.Add(New LiteralControl("<br /></div>"))

w1.VisibleOnPageLoad = True

w1.Modal = True

w1.Height = 550

w1.Width = 800

w1.Modal = True

RadMultiPage1.PageViews(0).Controls.Add(w1)

popupEditor.EnsureToolsFileLoaded()

LoadExistingText(x, popupEditor)

LoadChoices(editCombo)

End Sub

Private Sub LoadExistingText(ByVal x As Integer, ByRef e1 As RadEditor)

e1.Content = "This is a test for button " & x & "<br /> 1...2...3..."

End Sub

Private Sub LoadChoices(ByRef rcb As RadComboBox)

rcb.Items.Add(New RadComboBoxItem("Item 1", "Item 1"))

rcb.Items.Add(New RadComboBoxItem("Item 2", "Item 2"))

rcb.Items.Add(New RadComboBoxItem("Item 3", "Item 3"))

rcb.Items.Add(New RadComboBoxItem("Item 4", "Item 4"))

End Sub

End Class