Buttons in RadWindow cause unwanted postback

4 posts, 0 answers
  1. ChuckRock
    ChuckRock avatar
    38 posts
    Member since:
    Jul 2006

    Posted 18 Dec 2013 Link to this post

    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>
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 18 Dec 2013 Link to this post

    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,
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. ChuckRock
    ChuckRock avatar
    38 posts
    Member since:
    Jul 2006

    Posted 19 Dec 2013 Link to this post

    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

  5. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 20 Dec 2013 Link to this post

    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.
Back to Top