Set Style From Code Behind

8 posts, 0 answers
  1. Ryan Grossman
    Ryan Grossman avatar
    12 posts
    Member since:
    Nov 2009

    Posted 22 Apr 2015 Link to this post

    I'm updating an application from  the Classic controls to the newest version. Some of the scripts are working correctly. I need to set the border and background of a RadCombobox to Red to signify its a required field. I used to do the following:

     RadAjaxPanelContacts.ResponseScripts.Add("LoadCombobox(" & rcbContactTxt.ClientID & ");")

     function LoadCombobox(combobox)
    {
    combobox.InputDomElement.style.border = "solid 1px #a80532";
    combobox.InputDomElement.style.color = "#a80532";
    combobox.InputDomElement.style.background = "white";
    }

     

    This now triggers a javascript error type error element undefined. I tried replacing with:

     

    function LoadCombobox(combobox)
    {
        combobox.element.style.border = "solid 1px #ff0000";
        combobox.element.style.color = "#ff0000";
        combobox.element.style.background = "white";
    }

     

     Doesn't work either. How do I do what the old code does with the newer version of the controls?

  2. Magdalena
    Admin
    Magdalena avatar
    421 posts

    Posted 27 Apr 2015 Link to this post

    Hello Ryan,

    We recommend you to apply styling by stylesheet and by JavaScript apply only a CSS class that can be used as a CSS selector. You can apply a custom CSS class to the RadComboBox by the following:
    function pageLoad() {
        var combobox = $find("RadComboBox1").get_element();
        $telerik.$(combobox).addClass("custom");
    }

    After that you can apply color, border and background rules to the selector .RadComboBox.custom .rcbReadOnly {}. or .RadComboBox.custom .rcbInner {} - depending of the scenario.

    Regards,
    Magdalena
    Telerik
     

    See What's Next in App Development. Register for TelerikNEXT.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Ryan Grossman
    Ryan Grossman avatar
    12 posts
    Member since:
    Nov 2009

    Posted 27 Apr 2015 in reply to Magdalena Link to this post

    I'm not using jquery. How do I do this without jquery? The old way worked fine with plain javascript.
  5. Magdalena
    Admin
    Magdalena avatar
    421 posts

    Posted 28 Apr 2015 Link to this post

    Hello Ryan,

    The CSS class can be added to an element also by .className:
    function pageLoad() {
        var comboboxElement = $find("RadComboBox1").get_element();
        comboboxElement.className += comboboxElement.className + " custom";
    }

    Regards,
    Magdalena
    Telerik
     

    See What's Next in App Development. Register for TelerikNEXT.

     
  6. Ryan Grossman
    Ryan Grossman avatar
    12 posts
    Member since:
    Nov 2009

    Posted 28 Apr 2015 in reply to Magdalena Link to this post

    That worked. How can I do the same for a RadTextBox? I tried the following but maybe my CSS class is wrong and not applying.

     function ValueChanged(sender, eventArgs)
    {
        sender.get_styles().EnabledStyle[1] += " custom3";
        sender.updateCssClass();
    }

     .RadInput.custom3 .riTextBox {
        background-color: #e7ffe8 !important;
        border-color: #035105 !important;
        color: #035105 !important;
    }

     

  7. Magdalena
    Admin
    Magdalena avatar
    421 posts

    Posted 29 Apr 2015 Link to this post

    Hi Ryan,

    If you debug the ValueChanged function, you can see that the "sender" is TextBox object, not Input object. So the CSS selector will be .RadInput .riTextBox.custom3 {}.

    The other approach is to set the class name in a similar way as in the first solution:
    function ValueChanged(sender, eventArgs)
    {
        var inputElement = sender.get_element();
        inputElement.className += inputElement.className + " custom";
    }

    Please, keep in mind, that if you do not use jQuery "addClass()", it is necessary to do verification if the class has not already been added. Otherwise the class will be added every time when the ValueChanged function is fired.

    Regards,
    Magdalena
    Telerik
     

    See What's Next in App Development. Register for TelerikNEXT.

     
  8. Ryan Grossman
    Ryan Grossman avatar
    12 posts
    Member since:
    Nov 2009

    Posted 08 May 2015 in reply to Magdalena Link to this post

    This is working good for the combo and textbox. Can you provide an example of how to change a raddatepicker as well?

     

    <telerik:RadDatePicker ID="rdpShippedDate" Width="100%" runat="server" DateInput-Width="100%"></telerik:RadDatePicker>

  9. Magdalena
    Admin
    Magdalena avatar
    421 posts

    Posted 11 May 2015 Link to this post

    Hi Ryan,

    It will be the same as ComboBox:
    datePickerElement.className += datePickerElement.className + " custom";


    Regards,
    Magdalena
    Telerik
     

    See What's Next in App Development. Register for TelerikNEXT.

     
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017