I finally got the latest version of the RadControls integrated into the default MVC application that VS 2008 creates in order to see how it all works. The issue I am having is that I am doing field validation in the controller (i.e., required field, etc) and want to display the field in red (default MVC css style called input-validation-error). This is the default MVC validation summary css style. I am using the Web20 skin as my default. I thought setting the invalidstyle Css class would do it but no luck. Can I override this somehow? I must be missing something obvious.
TIA, Tom
TIA, Tom
7 Answers, 1 is accepted
0
Hello Tom,
The RadTextBox' invalid state and style are used for internal control validation. You can use them with ASP validators, however, a little Javascript coding is required. Here is an example:
All the best,
Dimo
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
The RadTextBox' invalid state and style are used for internal control validation. You can use them with ASP validators, however, a little Javascript coding is required. Here is an example:
| <%@ Page Language="C#" %> |
| <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> |
| <!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"> |
| <meta http-equiv="content-type" content="text/html; charset=utf-8" /> |
| <title>RadControls for ASP.NET AJAX</title> |
| </head> |
| <body> |
| <form id="form1" runat="server"> |
| <asp:ScriptManager ID="ScriptManager1" runat="server" /> |
| <telerik:RadTextBox ID="RadTextBox1" runat="server"> |
| <InvalidStyle CssClass="input-validation-error" /> |
| <ClientEvents OnValueChanged="OnValueChanged" /> |
| </telerik:RadTextBox> |
| <asp:Button ID="Button1" runat="server" Text="PostBack" /> |
| <asp:CustomValidator |
| ID="CustomValidator1" |
| runat="server" |
| EnableClientScript="true" |
| ValidateEmptyText="true" |
| ClientValidationFunction="validateInput" |
| ControlToValidate="RadTextBox1" /> |
| <script type="text/javascript"> |
| function validateInput(sender, args) |
| { |
| var tb = $find("<%= RadTextBox1.ClientID %>"); |
| if (tb.get_value() == "") |
| { |
| tb._invalid = true; |
| tb.updateCssClass(); |
| args.IsValid = false; |
| } |
| } |
| function OnValueChanged(sender, args) |
| { |
| if (sender.get_value() != "") |
| { |
| sender._invalid = false; |
| } |
| } |
| </script> |
| </form> |
| </body> |
| </html> |
All the best,
Dimo
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
0
Tom
Top achievements
Rank 1
Rank 1
answered on 16 Apr 2009, 01:29 PM
Thanks for your reply.
However I am still a bit confused as to you have asp server controls in the example and in the MVC framework, one cannot. To replicate what I am doing, all you need to do is create a new MVC Web application within VS 2008 SP1. Take that template and "Radify" it my adding references to the web.config, add the RadScriptManager to the site.master file, etc. With all that in place, look at the logon.aspx page and replace the username field with the RadTextBox version and let the MVC validation do it's thing by default. There is no client side validation. It is done in the controller class. This is the scenario I need to get working. Once I do that, I will have a template to follow and create the rest of the application. I just need to get thru one example.
I really want to get this to work as I am promoting the Telerik suite here and I am the first here to try hit getting them to work within the MVC framework. If I can do that, I can "sell" it internal to other groups and enhance the user experience on other web apps. We have strict branding guidelines :)
Thanks, Tom
However I am still a bit confused as to you have asp server controls in the example and in the MVC framework, one cannot. To replicate what I am doing, all you need to do is create a new MVC Web application within VS 2008 SP1. Take that template and "Radify" it my adding references to the web.config, add the RadScriptManager to the site.master file, etc. With all that in place, look at the logon.aspx page and replace the username field with the RadTextBox version and let the MVC validation do it's thing by default. There is no client side validation. It is done in the controller class. This is the scenario I need to get working. Once I do that, I will have a template to follow and create the rest of the application. I just need to get thru one example.
I really want to get this to work as I am promoting the Telerik suite here and I am the first here to try hit getting them to work within the MVC framework. If I can do that, I can "sell" it internal to other groups and enhance the user experience on other web apps. We have strict branding guidelines :)
Thanks, Tom
0
Hello Tom,
In MVC you can use the following approach (given that we are discussing the VS VMC application)
1. In AccountController.cs
2. In LogOn.aspx
Generally, there is a problem with this scenario, because normally custom CSS classes are appended to the RadTextBox native CSS classes. The RadTextBox embedded styles have a higher specificity than the MVC invalid style. That's why the custom CSS class ("input-validation-error") is added in PreRenderComplete, so that it is not appended, but applied on its own.
Greetings,
Dimo
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
In MVC you can use the following approach (given that we are discussing the VS VMC application)
1. In AccountController.cs
| private bool ValidateLogOn(string userName, string password) |
| { |
| if (String.IsNullOrEmpty(userName)) |
| { |
| ViewData.Add("RadTextBoxClass", "input-validation-error"); |
| ModelState.AddModelError("username", "You must specify a username."); |
| } |
| if (String.IsNullOrEmpty(password)) |
| { |
| ModelState.AddModelError("password", "You must specify a password."); |
| } |
| if (!MembershipService.ValidateUser(userName, password)) |
| { |
| ModelState.AddModelError("_FORM", "The username or password provided is incorrect."); |
| } |
| return ModelState.IsValid; |
| } |
2. In LogOn.aspx
| protected void Page_PreRenderComplete(object sender, EventArgs e) |
| { |
| if (ViewData.ContainsKey("RadTextBoxClass")) |
| { |
| username.EnabledStyle.CssClass = ViewData["RadTextBoxClass"].ToString(); |
| username.HoveredStyle.CssClass = ViewData["RadTextBoxClass"].ToString(); |
| username.FocusedStyle.CssClass = ViewData["RadTextBoxClass"].ToString(); |
| } |
| } |
Generally, there is a problem with this scenario, because normally custom CSS classes are appended to the RadTextBox native CSS classes. The RadTextBox embedded styles have a higher specificity than the MVC invalid style. That's why the custom CSS class ("input-validation-error") is added in PreRenderComplete, so that it is not appended, but applied on its own.
Greetings,
Dimo
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
0
Tom
Top achievements
Rank 1
Rank 1
answered on 21 Apr 2009, 03:27 PM
Dimo,
In the MVC model there is no concept of server-side controls nor code-behind on a aspx page. That's the challenge. So in your post you have some code-behind logic on the logon.aspx page :). Is it possible to do this client-side with some javascript instead?
To duplicate what I am doing, just create a new MVC Web application from Visual Studio 2008 SP1 and start with that as that is what my little proof-of-concept application is. From a usability stand-point, I really want to use these controls however, I need to mark the input field as in error somehow to the end user using the MVC framework and guidelines. If you have some other approach to do this, I am open for ideas!
Thanks, Tom
0
Hi Tom,
>> To duplicate what I am doing, just create a new MVC Web application from Visual Studio 2008 SP1 and start with that as that is what my little proof-of-concept application is.
Well, this is exactly what I did and it worked.
In case you don't want to use any code-behind, you can apply the invalid style client-side by executing a Javascript function similar to the one in my first post:
This will cause the RadTextBox to display its native invalid style (red textbox border and exclamation mark). You can also display the MVC invalid style, but some additional Javascript coding is required. This is explained in the following help article:
http://www.telerik.com/help/aspnet-ajax/input_clientsidebasics.html
Some changes have to be made, namely:
Instead of
you need:
Best wishes,
Dimo
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
>> To duplicate what I am doing, just create a new MVC Web application from Visual Studio 2008 SP1 and start with that as that is what my little proof-of-concept application is.
Well, this is exactly what I did and it worked.
In case you don't want to use any code-behind, you can apply the invalid style client-side by executing a Javascript function similar to the one in my first post:
| function changeInputStyle() |
| { |
| var tb = $find("<%= RadTextBox1.ClientID %>"); |
| tb._invalid = true; |
| tb.updateCssClass(); |
| } |
This will cause the RadTextBox to display its native invalid style (red textbox border and exclamation mark). You can also display the MVC invalid style, but some additional Javascript coding is required. This is explained in the following help article:
http://www.telerik.com/help/aspnet-ajax/input_clientsidebasics.html
Some changes have to be made, namely:
Instead of
| TBINSTANCE.get_styles().EnabledStyle[0] += "background-color: lemonchiffon;"; |
| TBINSTANCE.updateCssClass(); |
you need:
| TBINSTANCE.get_styles().InvalidStyle[1] = "input-validation-error"; |
| TBINSTANCE._invalid = true; |
| TBINSTANCE.updateCssClass(); |
Best wishes,
Dimo
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
0
Tom
Top achievements
Rank 1
Rank 1
answered on 23 Apr 2009, 11:28 AM
Dimo,
Could you possibly zip up your working application as an example for me to go through and either email it to me or post it here for others?
I appreciate your patience with this.
Thanks, Tom
Could you possibly zip up your working application as an example for me to go through and either email it to me or post it here for others?
I appreciate your patience with this.
Thanks, Tom
0
Accepted
Hi Tom,
Here it is. I have removed the Telerik.Web.UI assembly in order to make the ZIP smaller.
Sincerely yours,
Dimo
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
Here it is. I have removed the Telerik.Web.UI assembly in order to make the ZIP smaller.
Sincerely yours,
Dimo
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.