I have recently been heavily using Telerik great controls, that I admire and respect, in my projects at work. I have decided to customize every single control in our applications that Telerik provides a substitution for. The RadWindow is a very cool control that I have started using it as a substitution for the usual JavaScript Open or ShowModaldialog methods.
A nice feature that I wanted to customize is the ValidationSummary alert box. As you know, when you place a ValidationSummary control on a page, you can enable it to show a popup alert box listing all the errors on the page. Check out the figure below to see the current behavior of the ValidationSummary with an alert box:
What would be nice is to show a RadWindow instead of that old-fashioned alert box. Before we start writing any code, it is nice to Google a bit and see if any colleague developer has already customized the ValidationSummary so that not to re invent the wheel. I was able to find a nice article on the CodeProject website written by Jeff Shantz that you can reach at: http://www.codeproject.com/aspnet/vsum.asp
Before going on in this article I recommend you go to the above URL and read that article. It explains to you what you should add to the WebValidationUI.js file so that the ValidationSummary can show a Modal or normal Popup window.
I have followed the same steps as mentioned in the above article and added a small property to the ValidationSummar control which is the windowname. The windowname property holds the name of the RadWindow that is already added to the RadWindowManager on the ASPX page. The validation summary to place on your ASPX page now is as follows:
<asp:validationsummary id="vsmSummary" runat="server" ForeColor="DarkRed" showcustompopup="True" customurl="Msgbox.aspx"
customwidth="308" customheight="270" customheader="Attention!" customtitle="Error on Form" modal="False"
windowname="ValidationSummary" ShowSummary="False" ShowMessageBox="false"></asp:validationsummary>
Notice the underlined and bold property above. We have added a custom property to the ValidationSummary control to specify the RadWindow name to show the errors in.
What you also need to add to the ASPX page is the following RadWindowManager:
<radw:radwindowmanager id="RadWindowManager1" runat="server" Behavior="Close,Move" Skin="Blue" Modal="True">
<Windows>
<radw:RadWindow Height="270px" SkinsPath="~/RadControls/Window/Skins" ID="ValidationSummary" Width="308px"
Skin="Default" Left="" NavigateUrl="" VisibleStatusbar="False" Modal="True" Top="" Title=""></radw:RadWindow>
</Windows>
</radw:radwindowmanager>
In addition you need to update the WebValidationUI.js file located under the framework version inside the aspnet_client folder and add the following:
/* Check if the caller requested a modal dialog, and use the appropriate method to
open the window. Note that modal dialogs currently only work in Internet Explorer 5.0+ */
if (summary.modal == "True")
window.showModalDialog(s,"","dialogWidth:" + width + "px;dialogHeight:" + height + "px;status:no;");
else
if (typeof(summary.windowname) == "string")
ShowNewWindow(s, summary.windowname);
In the code above we saying that if the Modal property is set to true, then show a ModalDialog window, else if the windowname property contains the name of the RadWindow, then show a RadWindow instead.
You also need to add the following JavaScript function inside the WebValidationUI.js:
/* Show new window */
function ShowNewWindow(url, windowname)
{
//Show new window
var oWindow = window.radopen (url, windowname);
}
The above code will be responsile for initializing the RadWindow.
The output of the above is shown below:
Isn’t this cool [:)]
The above explained is everything you need to use RadWindow with ASP.NET 1.1.
What about ASP.NET 2.0? In ASP.NET 2.0 as you all know the WebValidationUI.js is now embedded in a resource assembly, so there is no way to change the file! What can we do? Thanks to Scott Guthrie who forwarded me to Matt Gibs, who gave me this trick:
Place the aspnet_client folder inside the root of your application and ASP.NET 2.0 will first check if the WebValidationUI.js is found in the same application then it uses it else it will use the one in the resource assembly which is great because the developer is still given the opportunity to change that file!
So to make your code work on ASP.NET 2.0, you simply place the aspnet_client inside the root of your application and that’s it!!
You can download a running ASP.Net 2.0 Web application here.
Hope you enjoyed this article, if you have any questions or comments please don’t hesistate to email me directly!!
Thank you,
Regards
Tags: Telerik Controls