RadTextBox and CSS error style

Thread is closed for posting
8 posts, 1 answers
  1. Tom
    Tom avatar
    9 posts
    Member since:
    Mar 2006

    Posted 14 Apr 2009 Link to this post

    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
  2. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 16 Apr 2009 Link to this post

    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:

    <%@ 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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Tom
    Tom avatar
    9 posts
    Member since:
    Mar 2006

    Posted 16 Apr 2009 Link to this post

    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
  5. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 21 Apr 2009 Link to this post

    Hello Tom,

    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.
  6. Tom
    Tom avatar
    9 posts
    Member since:
    Mar 2006

    Posted 21 Apr 2009 Link to this post

    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

  7. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 23 Apr 2009 Link to this post

    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:

    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.
  8. Tom
    Tom avatar
    9 posts
    Member since:
    Mar 2006

    Posted 23 Apr 2009 Link to this post

    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
  9. Answer
    Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 24 Apr 2009 Link to this post

    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017