[Solved] custom confirmation popups

[Krutika]

I have a radgrid with edit form as Pop-Ups.
After an insert/ edit, I want to display a confirmation message.
How do I do it?
How do I customize appearance of that confirmation modal?

[Shinu]

Hi,

Please take a look an example to provide confirmation message for the edit button in RadGrid using RadWindowManager.You can customize the appearance of the RadConfirm using the ConfirmTemplate of RadWindowManager.

ASPX:

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" OnAjaxRequest="RadAjaxManager1_AjaxRequest">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="Radgrid1" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>
<telerik:RadWindowManager ID="RadWindowManager1" runat="server" EnableShadow="true">
</telerik:RadWindowManager>
<telerik:RadGrid id="Radgrid1" . . .>

C#:

protected void Radgrid1_ItemCommand(object sender, GridCommandEventArgs e)
{
    if (e.CommandName == RadGrid.EditCommandName)
    {
        RadWindowManager1.RadConfirm("Server radconfirm: Are you sure?", "confirmCallBackFn", 330, 180, null, null, null);
    }
}
protected void RadAjaxManager1_AjaxRequest(object sender, AjaxRequestEventArgs e)
{
    if (e.Argument.ToString() == "cancel")
    {
        if (Radgrid1.EditItems.Count>0)
        {
            Radgrid1.MasterTableView.ClearEditItems();
        }
        Radgrid1.Rebind();
    }
}

Javascript:

function confirmCallBackFn(arg) {
    var ajaxManager = $find("<%=RadAjaxManager1.ClientID%>");
    if (arg) {
        ajaxManager.ajaxRequest('ok');
    }
    else {
        ajaxManager.ajaxRequest('cancel');
    }
}

Thanks,
Shinu.

[Krutika]

Thanks Shinu.

I was able to get the confirmation popup. BUT I'm not able to customize the appearance like color and font.
 Here's my code:
     <telerik:GridButtonColumn HeaderStyle-Width="35px" ItemStyle-Width="35px" ItemStyle-HorizontalAlign="Center" CommandName="Delete" Text="Delete" UniqueName="DeleteColumn" ButtonType="ImageButton"  ConfirmDialogType="RadWindow" ConfirmTitle="Warning Message"  ConfirmDialogHeight="150" ConfirmDialogWidth="400" ConfirmText="Warning – This Record Will Be Deleted From The Table." ImageUrl="../Images/delete2.png">                  </telerik:GridButtonColumn> 

The popup has a gray top bar with 'x' button for closing. Inside the popup is a '?' image with 'Cancel' and 'OK' buttons.

I want the pop up to have a blue top bar, no 'x' button, no '?' image inside and use my own 'Cancel' and 'OK' button images. And the popup to have a blue border.

How do I achieve this?

[Shinu]

Hi,

You can give the Skin for the RadWindowManager to show the Pop up in Blue Color. The 'X" and '?' can be removed using CSS or through ConfirmTemplate. You can provide you own Buttons in the RadConfirm inside the ConfirmTemplate. Please take a look into the sample code.

ASPX:

<telerik:RadWindowManager ID="RadWindowManager1" runat="server" Skin="Web20" EnableShadow="true">
    <ConfirmTemplate>
        <div class="rwDialogPopup radconfirm">
            <div class="rwDialogText">
                {1}
            </div>
            <div>
                <% Here you can provide the Buttons to show Ok and Cancel %>
                <input type="button" name="buttonOk" value="Ok" class="button" />
                <input type="button" name="buttonCancel" value="Cancel" class="button" />
            </div>
        </div>
    </ConfirmTemplate>
</telerik:RadWindowManager>

CSS:

<style type="text/css">
    .button
    {
        <%-- for giving BackGround image--%>
        background: url("/Images/editServerButton.gif") !important ;
    }
    .RadWindow_Web20 .rwControlButtons a
    {
        <%--For Removing the 'X' button--%>
        display: none !important;
    }

    .RadWindow .rwWindowContent .radconfirm
    {
        <%--for removing the '?'--%>
        background-image: none !important;
    }
</style>

Thanks,
Shinu.

[Bala]

Thank you Shinu for your info, I have attached the file image for popup window, how can I ge trid of "?" from popup.
Is  your below code will take care to remove  "?" from popup?
.Radwindow{ <%--for removing the '?'--%>

background-image: none !important;

}

I have one more question, how can I remove the header title ICON ( book shape on radwindow header title) from popup/rad window?

Appreciated for your time in advance.
Regards
Bala

[Shinu]

Hi,

Please try the following CSS to remove the Header Icon.

CSS:

<style type="text/css">
    .RadWindow_Metro a.rwIcon
    {
        background-image: none !important;
    }
</style>

Thanks,
Shinu.

[Bala]

Hi Shinu,

Thank you and its working fine  but can you please help me how to set the width/heght for bottom, left and right borders colors and title bar font color. Please check my attachment file for more info

Thank you
Bala

[Bala]

I am looking for below
.Radwindow .rwLeft  .rwRight
{
   border-image: url('/images/xxx.png')

  

}

the border is blue color line.

Thank You
Bala

[Bozhidar]

Hi,

Bellow you could find a simple code showing how to set different width for the Window components. Colorization is provided for visualization only:

%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">

        .RadWindow_MetroTouch tr.rwTitleRow .rwTopLeft,
        .RadWindow_MetroTouch tr.rwTitleRow .rwTopRight {
            background-color: red;
            width: 30px;
        }

        .RadWindow_MetroTouch table.rwTable .rwTitlebarControls em {
            color: red;
        }

        .RadWindow_MetroTouch tr.rwContentRow .rwBodyLeft,
        .RadWindow_MetroTouch tr.rwContentRow .rwBodyRight {
            background-color: blue;
        }

        .RadWindow_MetroTouch tr.rwStatusbarRow td {
            background-color: Green;
            height: 60px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <telerik:RadWindow ID="RadWindow1" VisibleStatusbar="true" Overlay="true" Behaviors="Close"
        Behavior="Close" Height="420px" Width="575px" Modal="true" runat="server" VisibleOnPageLoad="true"
        Skin="MetroTouch" Title="Title">
    </telerik:RadWindow>
    </form>
</body>
</html>

Kind regards,
Bozhidar
the Telerik team

[Bala]

HI,

Thank you but still I couldnot fix the color or image  I am looking, please check my attachment.

.RadWindow

 

 

tr.rwTitleRow .rwTopLeft,

 

 

 

.RadWindow tr.rwTitleRow .rwTopRight {

 

 

 

background-color: blue;

 

 

 

width: 0px;

 

}

When I make to width=0px still it shoinmg border ( I am not sure this is border or something).

Thank you for your time and appreciated in advance.

Regards
Bala

[Bala]

Hi,

Thank you for your email, I almost done except the white spot at left and right corner

Please check my attachment file for more info.

Thabk YOu
Bala

[Bozhidar]

Hello,

Each screenshot example you are providing uses different skin and it is a little bit hard to follow it. As I could understand from your last screen, you want to achieve a double bordered window. If this is what you want, I believe the following example will help you to do that:

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">

        .RadWindow_Web20 tr.rwTitleRow .rwTopLeft,
        .RadWindow_Web20 tr.rwTitleRow .rwTopRight,
        .RadWindow_Web20 tr.rwContentRow .rwBodyLeft,
        .RadWindow_Web20 tr.rwContentRow .rwBodyRight,
        .RadWindow_Web20 tr.rwStatusbarRow .rwBodyLeft,
        .RadWindow_Web20 tr.rwStatusbarRow .rwBodyRight,
        .RadWindow_Web20 tr.rwFooterRow .rwFooterLeft,
        .RadWindow_Web20 tr.rwFooterRow .rwFooterRight {
            background-image: none;
            background-color: red;
            width: 5px;
            font-size: 0;
        }

        .RadWindow_Web20 tr.rwTitleRow .rwTitlebar .rwTopResize {
            background-image: none;
            background-color: red;
            height: 5px;
            font-size: 0;
        }

        .RadWindow_Web20 tr.rwTitleRow .rwTitlebarControls {
            height: 26px;
        }

        .RadWindow_Web20 tr.rwFooterRow .rwFooterLeft,
        .RadWindow_Web20 tr.rwFooterRow .rwFooterRight,
        .RadWindow_Web20 tr.rwFooterRow .rwFooterCenter {
            background-image: none;
            background-color: red;
            height: 5px;
            font-size: 0;
        }

        div.RadWindow_Web20 table.rwTable {
            border: 5px solid yellow; /* outer border */
        }

        div.RadWindow_Web20 a.rwIcon {
            background-image: none; /* removes title icon */
        }
    </style>

</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>

    <script type="text/javascript">
        function pageLoad() {
            radopen();
            radalert("This is RadAlert");
            radconfirm("This is RadConfirm");
            radprompt("This is RadPrompt");
        }
    </script>

    <telerik:RadWindow ID="RadWindow1" VisibleStatusbar="true" Overlay="true" Behaviors="Close"
        Behavior="Close" Height="420px" Width="575px" Modal="true" runat="server" VisibleOnPageLoad="true"
        Skin="Web20" Title="Title">
    </telerik:RadWindow>
    </form>
</body>
</html>

Greetings,
Bozhidar
the Telerik team

[Bala]

Hello Bozhidar,

Thank you for your email.

I was tried to get ridof the Titlebar's below  left corner and below  right corner but couldn't make it.
Also added your code  div.RadWindow_Web20 table.rwTable {  border:5px solid yellow;    }

          /* outer border */


But it added extra border line.

I have also two more questions.
1) How can add the blank space in between buttons ( OK and Cancel) and window content message "This Record
      will be deleted..."
2) How can I make two buttons ( OK and Cancel) equal and move  little down of the window.

Thank You

Bala


[Bozhidar]

Hello,

The provided code in my previous message works as expected on my side. See image attached. I can tell what is the problem on your side, as you didn't provide us any code snippets.

The bellow code shows how to achieve equal width buttons and move it down:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .RadWindow_Web20 tr.rwTitleRow .rwTopLeft, .RadWindow_Web20 tr.rwTitleRow .rwTopRight, .RadWindow_Web20 tr.rwContentRow .rwBodyLeft, .RadWindow_Web20 tr.rwContentRow .rwBodyRight, .RadWindow_Web20 tr.rwStatusbarRow .rwBodyLeft, .RadWindow_Web20 tr.rwStatusbarRow .rwBodyRight, .RadWindow_Web20 tr.rwFooterRow .rwFooterLeft, .RadWindow_Web20 tr.rwFooterRow .rwFooterRight {
            background-image: none;
            background-color: red;
            width: 5px;
            font-size: 0;
        }

        .RadWindow_Web20 tr.rwTitleRow .rwTitlebar .rwTopResize {
            background-image: none;
            background-color: red;
            height: 5px;
            font-size: 0;
        }

        .RadWindow_Web20 tr.rwTitleRow .rwTitlebarControls {
            height: 26px;
        }

        .RadWindow_Web20 tr.rwFooterRow .rwFooterLeft, .RadWindow_Web20 tr.rwFooterRow .rwFooterRight, .RadWindow_Web20 tr.rwFooterRow .rwFooterCenter {
            background-image: none;
            background-color: red;
            height: 5px;
            font-size: 0;
        }

        div.RadWindow_Web20 table.rwTable {
            border: 5px solid yellow; /* outer border */
        }

        div.RadWindow_Web20 a.rwIcon {
            background-image: none; /* removes title icon */
        }

        div.RadWindow_Web20 .rwDialogText {
            margin-bottom: 40px; /* changing this value wil move button up or down */
        }

        div.RadWindow_Web20 .rwWindowContent .radconfirm,
        div.RadWindow_Web20 .rwWindowContent .radalert {
            background-position: left top;
        }

        div.RadWindow_Web20 .rwDialogPopup .rwPopupButton {
            width: 65px;
            float: none;
            display: inline-block;
            *zoom: 1;
            *display: inline;
        }

        div.RadWindow_Web20 .rwWindowContent .rwPopupButton .rwInnerSpan {
            width: 40px;
            text-align: center;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <script type="text/javascript">
        function pageLoad() {
            //radopen();
            //radalert("This is RadAlert");
            radconfirm("Warning - This record will be deleted from the table");
            //radprompt("This is RadPrompt");
        }
    </script>
    <telerik:RadWindowManager runat="server" ID="rwm1" Skin="Web20">
    </telerik:RadWindowManager>
    <telerik:RadWindow ID="RadWindow1" VisibleStatusbar="true" Overlay="true" Behaviors="Close"
        Behavior="Close" Height="420px" Width="575px" Modal="true" runat="server" Skin="Web20"
        Title="Title">
    </telerik:RadWindow>
    </form>
</body>
</html>

Attached is another image showing the result from the above code in the popup window.

Note, that all your requirements are custom solutions, which are out of the scope of our support. They are responsibility of the developer itself and even if we try to help in most cases  we could not give you a complete solution in most cases, but some recommendations how the task could be completed.

All the best,
Bozhidar
the Telerik team

[Bala]

Hi Bozidhar,

Thank you and its working fiine. I have two more things to fix - I am working and spending lot of my time to fix the below issues.
 If you can help me the below two things it will be great.

1)  The buttons will be moved towards right ( please print screen --> )
2) .rwCloseButton image url is not working and it will be showing correct color when it mouse rollover on close button

A)

div.RadWindow  a.rwCloseButton

 

{
  background-image: url('../images/delete16.png')!important;; 

}

B)

When I add the below code it moves the buttons but but buttons are splitting. Check the attachment file i mage.

div.RadWindow .rwWindowContent .rwPopupButton .rwInnerSpan
    {
        width: 40px;
        text-align:center;
       margin-left: 50px;
    }

Please see the attchment file for more info.

Thank You
Bala

[Bozhidar]

Hello,

This is the code that will do the things:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .RadWindow_Web20 tr.rwTitleRow .rwTopLeft,
        .RadWindow_Web20 tr.rwTitleRow .rwTopRight,
        .RadWindow_Web20 tr.rwContentRow .rwBodyLeft,
        .RadWindow_Web20 tr.rwContentRow .rwBodyRight,
        .RadWindow_Web20 tr.rwStatusbarRow .rwBodyLeft,
        .RadWindow_Web20 tr.rwStatusbarRow .rwBodyRight,
        .RadWindow_Web20 tr.rwFooterRow .rwFooterLeft,
        .RadWindow_Web20 tr.rwFooterRow .rwFooterRight {
            background-image: none;
            background-color: red;
            width: 5px;
            font-size: 0;
        }

        .RadWindow_Web20 tr.rwTitleRow .rwTitlebar .rwTopResize {
            background-image: none;
            background-color: red;
            height: 5px;
            font-size: 0;
        }

        .RadWindow_Web20 tr.rwTitleRow .rwTitlebarControls {
            height: 26px;
        }

        .RadWindow_Web20 tr.rwFooterRow .rwFooterLeft,
        .RadWindow_Web20 tr.rwFooterRow .rwFooterRight,
        .RadWindow_Web20 tr.rwFooterRow .rwFooterCenter {
            background-image: none;
            background-color: red;
            height: 5px;
            font-size: 0;
        }

        div.RadWindow_Web20 table.rwTable {
            border: 5px solid yellow; /* outer border */
        }

        div.RadWindow_Web20 a.rwIcon {
            background-image: none; /* removes title icon */
        }

        div.RadWindow_Web20 .rwDialogText {
            margin-bottom: 40px; /* changing this value wil move button up or down */
        }

        div.RadWindow_Web20 .rwWindowContent .radconfirm,
        div.RadWindow_Web20 .rwWindowContent .radalert {
            background-position: left top;
        }

        div.RadWindow_Web20 .rwDialogPopup .rwPopupButton {
            width: 65px;
            float: none;
            display: inline-block;
            *zoom: 1;
            *display: inline;
        }

        div.RadWindow_Web20 .rwWindowContent .rwPopupButton {
            text-align: right;
        }

        div.RadWindow_Web20 .rwWindowContent .rwPopupButton .rwInnerSpan {
            width: 40px;
            text-align: center;
        }

        div.RadWindow_Web20 .rwDialogPopup.radconfirm {
            text-align: right; /* this makes button to go right */
        }

        div.RadWindow_Web20 .rwControlButtons a,
        div.RadWindow_Web20 .rwControlButtons a:hover {
            background-image: url(rwClose.gif);
            background-position: 0 0;
            width: 13px;
            height: 11px;
            margin: 5px 5px 0 0;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <script type="text/javascript">
        function pageLoad() {
            //radopen();
            //radalert("This is RadAlert");
            radconfirm("Warning - This record will be deleted from the table");
            //radprompt("This is RadPrompt");
        }
    </script>
    <telerik:RadWindowManager runat="server" ID="rwm1" Skin="Web20">
    </telerik:RadWindowManager>
    <telerik:RadWindow ID="RadWindow1" VisibleStatusbar="true" Overlay="true" Behaviors="Close"
        Behavior="Close" Height="420px" Width="575px" Modal="true" runat="server" Skin="Web20"
        Title="Title">
    </telerik:RadWindow>
    </form>
</body>
</html>

You have to use the attached rwClose.gif in order to have it in your project.


Kind regards,
Bozhidar
the Telerik team

[Bala]

HI Bozidhar,

Its working fine except the rwCloseButton not displaying properly and titale Bar is  a blue color

rwCloseButton.gif  is not  displaying properly and check the attachment file.

div.RadWindow .rwControlButtons a,
        {
            background-image:url('../images/rwClose.gif); // under images folder
           background-position: 0 0;
            width: 13px;
            height: 11px;
            margin: 5px 5px 0 0;
        }

Thank You
Bala

[Bala]

Its working great, thank you for your help:

It is working after adding the below code:

        .rwTitlebarControls em
        {
            display: inline-block;
            zoom: 1;
            *display: inline;
            width: auto !important;
            *width: 145px !important;
        }

        .rwCloseButton
        {
            position: relative;
            top: 0px;
            right: 4px;
            background-image: url(closereport_button.png) !important;
            background-position: 0 0 !important;
            width: 112px !important;
            height: 22px !important;
        }

Apreciated for your time.