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

Buttons in RadWindow cause unwanted postback

3 Answers 151 Views
Window
This is a migrated thread and some comments may be shown as answers.
ChuckRock
Top achievements
Rank 1
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

Sort by
0
Princy
Top achievements
Rank 2
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,
0
ChuckRock
Top achievements
Rank 1
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>
<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

0
Princy
Top achievements
Rank 2
answered on 20 Dec 2013, 09:20 AM
Hi,

Please try the following JavaScript which works fine at my end.

JavaScript:
function EditClickSave(sender, args) {
        alert('Got Here 2.1');
        //paste the html to radeditor
        sender._element.parentElement.children.ctl02_C_Editor1.control.pasteHtml("This is a test");
}

Hope this will helps you.
Thanks,
Princy.
Tags
Window
Asked by
ChuckRock
Top achievements
Rank 1
Answers by
Princy
Top achievements
Rank 2
ChuckRock
Top achievements
Rank 1
Share this question
or