Open RadWindow when click on RadButton

9 posts, 1 answers
  1. Sonia
    Sonia avatar
    90 posts
    Member since:
    Mar 2012

    Posted 04 Oct 2013 Link to this post

    I am trying to open a RadWindow when clicking on a RadButton (RadButton1) but it does nothing. However when i try to do the same with an asp Button (Button3) the RadWindow opens successfully. What am i missing? Thank you in advance.
    Here is a piece of the code:

    <div id="ContentTemplateZone" class="qsf-ib infoBox">
        <asp:Button ID="Button3" Text="Open rad window from Button" runat="server" OnClientClick="openWinContentTemplate(); return false;">   
        </asp:Button>
        <telerik:RadButton ID="RadButton1" runat="server" Text="Open rad window from RadButton" ButtonType="StandardButton"
        OnClientClick="openWinContentTemplate(); return false;">
            <Icon PrimaryIconCssClass="rbAdd" PrimaryIconLeft="4" PrimaryIconTop="4"></Icon>
        </telerik:RadButton>
        <br />
        <asp:Label ID="Label1" Text="" runat="server"></asp:Label>
        <script type="text/javascript">
            function populateValue() {
                $get("<%=Label1.ClientID %>").innerHTML = $get("<%= Textbox1.ClientID %>").value;
                alert($get("<%= Textbox1.ClientID %>").value);
                //the RadWindow's content template is an INaming container and the server code block is needed
                $find("<%=RadWindow_ContentTemplate.ClientID%>").close();
            }
     
            function openWinContentTemplate() {
                alert("open");
                $find("<%=RadWindow_ContentTemplate.ClientID %>").show();
            }
        </script>
    </div>
    <telerik:RadWindow runat="server" ID="RadWindow_ContentTemplate" RestrictionZoneID="ContentTemplateZone" Modal="true">
              <ContentTemplate>
                   <p class="contText">
                        Enter a value here and click the button to close the RadWindow and pass the
                        value to the main page.
                   </p>
                   <div class="contButton">
                        <asp:TextBox ID="Textbox1" runat="server"></asp:TextBox>
                   </div>
                   <p class="contText">
                        Via a simple JavaScript function:
                   </p>
                   <div class="contButton">
                        <asp:Button ID="Button1" Text="send value and close" runat="server" OnClientClick="populateValue(); return false;">
                        </asp:Button>
                   </div>
                   <p class="contText">
                        Via a simple method in the code-behind:
                   </p>
                   <div class="contButton">
                        <asp:Button ID="Button2" Text="send value through code-behind" runat="server" OnClick="Button2_Click">
                        </asp:Button>
                   </div>
              </ContentTemplate>
         </telerik:RadWindow>
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 04 Oct 2013 Link to this post

    Hi Sonia,

    Please change your RadButton as shown below. RadButton doesn't have any OnClientClick event. It only have OnClientClicked and OnClientClicking event. you need to set the name of the handler function without brackets and semicolon. In order to persist the RadWindow you need to set the AutoPostBack property of RadButton as false.

    ASPX:
    <telerik:RadButton ID="RadButton1" runat="server" Text="Open rad window from RadButton"
        ButtonType="StandardButton" OnClientClicked="openWinContentTemplate" AutoPostBack="false">
        <Icon PrimaryIconCssClass="rbAdd" PrimaryIconLeft="4" PrimaryIconTop="4">
        </Icon>
    </telerik:RadButton>

    Thanks,
    Shinu.



  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Sonia
    Sonia avatar
    90 posts
    Member since:
    Mar 2012

    Posted 04 Oct 2013 Link to this post

    Hi Shinu,
    thanks for your quick response.

    Then, how can i pass a parameter value if brackets must be omitted?
  5. Answer
    Marin Bratanov
    Admin
    Marin Bratanov avatar
    3596 posts

    Posted 04 Oct 2013 Link to this post

    Hi guys,

    The following blog post explains how to use client-side handlers from our controls and how to move to them from the standard one used in HTML: http://blogs.telerik.com/aspnet-ajax/posts/12-08-10/migrating-onclientclick-handlers-from-asp-button-to-telerik-s-asp-net-ajax-button.aspx.
    It also links a code library article that offers several ways to pass custom arguments to such a handler: http://www.telerik.com/community/code-library/aspnet-ajax/button/passing-user-defined-parameters-to-client-side-event-handlers.aspx.


    Regards,
    Marin Bratanov
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  6. Sonia
    Sonia avatar
    90 posts
    Member since:
    Mar 2012

    Posted 07 Oct 2013 Link to this post

    Thank you Marin, the link you have provided have helped me to solve the problem.
  7. Sonia
    Sonia avatar
    90 posts
    Member since:
    Mar 2012

    Posted 07 Oct 2013 Link to this post

    I am trying to use a RadConfirm window when clicking on a RadButton.
    This is the code:
    <telerik:RadButton ID="DeleteButton" runat="server" Text="Delete item"
                            OnClick="Delete_Click"
                ButtonType="StandardButton" AutoPostBack="false">
                <Icon PrimaryIconCssClass="rbDelete" PrimaryIconLeft="4" PrimaryIconTop="4"></Icon>
            </telerik:RadButton>

    In code-behind:
    DeleteButton.OnClientClicked = "function(sender, args){return blockConfirm(this,'Are you sure you want to delete?')}";

    However, Delete_Click is never invoked even though clicking OK in radconfirm window.
  8. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3596 posts

    Posted 08 Oct 2013 Link to this post

    Hello,

    The following demo will show you how to add confirmation to a RadButton click: http://demos.telerik.com/aspnet-ajax/button/examples/confirm/defaultcs.aspx. Note also, that the AutoPostBack property of the control must not be set to false in this case.

    Regards,
    Marin Bratanov
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  9. Daniel
    Daniel avatar
    34 posts
    Member since:
    Feb 2011

    Posted 28 May 2015 in reply to Marin Bratanov Link to this post

    Hello... In most cases, our delete buttons are ImageButtons.  We wire them up as follows in the code behind

    Delete.Attributes.Add("onClick", "return confirm(\'" + TextFromResxFile + "\')");

    We have a couple delete buttons that are actual Buttons for text and wired them up the same.  However, there is some slight difference between the rendering of an asp:Button and a telerik:RadButton, so we looked to standardize on the Radbutton.

    However, we are running into the similar issues as in this post.   The confirm window opens, but the cancel still triggers the click event.  I looked at the sample article that Marin provided, however, due to multi languages and the button text coming from a resx file, we are looking to keep this in the code behind and not client side.  Is this possible or do we need to fall back to the asp button in these instances?

    Thanks in advance

  10. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3596 posts

    Posted 29 May 2015 Link to this post

    Hi Daniel,

    RadButton with RenderMode=Lightweight will render a <button> element so if you cancel the mousedown event it will not bubble to the control so its click internal methods will not be called.

    With our controls, however, it is recommended to use their own event handlers and cancel them accordingly: http://www.telerik.com/help/aspnet-ajax/button-onclientclicking.html. You can consider making a check for the type of the control and attach a proper function if it is a RadButton.

    One more idea is to have the text in the JS function come from the server through a server code block, e.g.:

    <telerik:RadCodeBlock runat="server" ID="RadCodeBlock1">
        <script type="text/javascript">
            function Clicking(sender, args) {
                args.set_cancel(!window.confirm("<%=GetConfirmMessageText()%>"));
            }
        </script>
    </telerik:RadCodeBlock>
    <telerik:RadButton ID="RadButton1" runat="server" Text="Submit" OnClientClicking="Clicking" OnClick="Delete_Click">
    </telerik:RadButton>
    protected string GetConfirmMessageText()
    {
        return "some confirm message";
    }
    protected void Delete_Click(object sender, EventArgs e)
    {
        Response.Write(sender);
    }

    Another approach you can take is to use standard ASP buttons with RadFormDecorator for styling. Here is a simple example:

    <telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" />
    <asp:Button ID="Delete" Text="text" runat="server" OnClick="Delete_Click" />
    protected void Page_Load(object sender, EventArgs e)
    {
        Delete.Attributes.Add("onclick", "return confirm(\'" + "TextFromResxFile" + "\')");
    }
    protected void Delete_Click(object sender, EventArgs e)
    {
        Response.Write(sender);
    }


    Regards,

    Marin Bratanov
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017