Open RadWindow when click on RadButton

[Sonia]

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>

[Shinu]

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.

[Sonia]

Hi Shinu,
thanks for your quick response.

Then, how can i pass a parameter value if brackets must be omitted?

[Marin Bratanov]

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

[Sonia]

Thank you Marin, the link you have provided have helped me to solve the problem.

[Sonia]

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.

[Marin Bratanov]

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

[Daniel]

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

[Marin Bratanov]

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