Using Telerik RadWindow as a popup or confirm box


Telerik RadWindow is mostly used as an ajax popup window to load a separate page. But it can be used a neat alert/confirm box instead of using the JavaScript confirm box. Here is the code below –

Aspx

<asp:Button ID="btnOpenPopup" runat="server" Text="Close" OnClick="btnOpenPopup_Click" />
<br />
<asp:Label ID="lblMessage" runat="server"></asp:Label>
<telerik:RadWindow ID="radwindowPopup" runat="server" VisibleOnPageLoad="false" Height="150px"
                    Width="300px" Modal="true" BackColor="#DADADA" VisibleStatusbar="false" Behaviors="None" Title="Unsaved changes pending">
<ContentTemplate>
    <div style="padding: 20px">
        Do you want to save the changes?
        <br /><br />
        <asp:Button ID="btnOk" runat="server" Text="Yes" Width="50px" OnClick="btnOk_Click" />
        &nbsp;&nbsp;&nbsp;
        <asp:Button ID="btnCancel" runat="server" Text="No" Width="50px" OnClick="btnCancel_Click" />
    </div>
</ContentTemplate>
</telerik:RadWindow>

Aspx.cs

public partial class Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
    }

    protected void btnOpenPopup_Click(object sender, EventArgs e)
    {
        radwindowPopup.VisibleOnPageLoad = true;
    }

    protected void btnOk_Click(object sender, EventArgs e)
    {
        radwindowPopup.VisibleOnPageLoad = false;
        lblMessage.Text = &quot;Changes are saved!&quot;;
    }

    protected void btnCancel_Click(object sender, EventArgs e)
    {
        radwindowPopup.VisibleOnPageLoad = false;
        lblMessage.Text = &quot;Changes are discarded!&quot;;
    }
}

Button ‘btnOpenPopup’ opens the popup by making the radwindow visible by setting ‘VisibleOnPageLoad’ to true. To hide it you just need to set it back to false. You’ve got your custom confirm box now which looks sleek.

Advertisements

5 thoughts on “Using Telerik RadWindow as a popup or confirm box

    • Raghav says:

      I believe you can override the CSS style classes that are specific to RadWindow in your custom CSS. You can identify the style names using any developer tool like Chrome Dev toolbar, IE Dev toolbar, Firefox Firebug etc.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s