RadInput & Rad/ComboBox

8 posts, 0 answers
  1. Brian Taylor
    Brian Taylor avatar
    13 posts
    Member since:
    May 2010

    Posted 31 May 2011 Link to this post

    Hi,
    I am using the radinput manager with the "<Validation IsRequired="True" />" property to force certain textboxs to be required.

    This works well displaying a warning symbol on the relevant textbox and a red outline if the box is left empty.

    My issue is I also have a combobox with a required field validator, but this doesn’t indicate the input has no value selected in the same style as the other textbox controls giving an inconsistent interface.

    Could this functionality be added to the standard combobox (obviously only IsRequired functionality) or full functionality if using a RadCombobox as this effectively contains a textbox.

  2. Vasil
    Admin
    Vasil avatar
    1547 posts

    Posted 02 Jun 2011 Link to this post

    Hi Brian,

    You could style the input of the RadComboBox to use the same CSS class as the TextBox when is empty. Please check the code-snippets below.

    Aspx:
    <script type="text/javascript">
     
      var originalClassName = null;
     
      function inputBlured(sender, args) {
        if (!sender.target.value) {
          sender.target.className = "RadInputMgr RadInputMgr_Default RadInput_Error_Default";
        }
      }
     
      function inputFocused(sender, args) {
        if (!sender.target.value) {
          sender.target.className = originalClassName;
        }
      }
     
      function ClientLoad(sender, args) {
        originalClassName = sender.get_inputDomElement().className;
     
        $addHandler(sender.get_inputDomElement(), "blur", inputBlured);
        $addHandler(sender.get_inputDomElement(), "focus", inputFocused);
      }
     
    </script>
    <telerik:RadComboBox ID="RadComboBox1" runat="server" AllowCustomText="true" OnClientLoad="ClientLoad">
      <Items>
        <telerik:RadComboBoxItem Text="" Value="" />
        <telerik:RadComboBoxItem Text="Item 1" Value="Item1" />
        <telerik:RadComboBoxItem Text="Item 2" Value="Item2" />
      </Items>
    </telerik:RadComboBox>
    <telerik:RadInputManager runat="server" ID="RadInputManager1">
      <telerik:TextBoxSetting>
      </telerik:TextBoxSetting>
    </telerik:RadInputManager>
    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

    C#:
    protected void Page_Init(object sender, EventArgs e)
    {
        NumericTextBoxSetting numericSetting = new NumericTextBoxSetting();
        numericSetting.Validation.IsRequired = true;
        numericSetting.TargetControls.Add(new TargetInput(TextBox1.ID, true));
        RadInputManager1.InputSettings.Add(numericSetting);
    }

    I hope this helps.

    Greetings,
    Vasil
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Milind
    Milind avatar
    14 posts
    Member since:
    Feb 2014

    Posted 04 Mar in reply to Vasil Link to this post

    Hello,

     

    How can I set the width and height of error box displayed in combobox and make it of same size of combobox ?

     

    Regards

    Milind

  5. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 09 Mar Link to this post

    Hi Milind,

    Can you please elaborate what kind of validation you are using and what is the exact scenario you are implementing so that we can further help in this case?

    Regards,
    Maria Ilieva
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  6. Milind
    Milind avatar
    14 posts
    Member since:
    Feb 2014

    Posted 09 Mar in reply to Maria Ilieva Link to this post

    Hi Maria,

     

    There is inconsistency in displaying the validation error box. Pls find attached document which contains the image and explains the scenario

    When we build responsive sites the size of control varies as per the device resolution. In such case the consistency should be maintained. the solution should be a full fledged solution. 

    Thanks

     

    Milind

  7. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 14 Mar Link to this post

    Hello,

    Can you please share your code to see how exactly the validation for the ComboBox is performed sop that we can further assists?

    Regards,
    Maria Ilieva
    Telerik
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  8. Milind
    Milind avatar
    14 posts
    Member since:
    Feb 2014

    Posted 14 Mar Link to this post

    Hi Maria,

     

    Following is the code

    ASPX : 

     

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="ErpWebApplication.WebForm1" %>

    <!DOCTYPE html>

    <html xmlns="http://www.w3.org/1999/xhtml">
        <head runat="server">
            <title></title>
            <script type="text/javascript">

                var originalClassName = null;

                function inputBlured(sender, args) {
                    if (!sender.target.value) {
                        sender.target.className = "RadInputMgr RadInputMgr_Default RadInput_Error_Default";
                    }
                }

                function inputFocused(sender, args) {
                    if (!sender.target.value) {
                        sender.target.className = originalClassName;
                    }
                }

                function ClientLoad(sender, args) {
                    originalClassName = sender.get_inputDomElement().className;

                    $addHandler(sender.get_inputDomElement(), "blur", inputBlured);
                    $addHandler(sender.get_inputDomElement(), "focus", inputFocused);
                }

            </script>

        </head>
        <body>
            <form id="form1" runat="server">
                <telerik:RadInputManager runat="server" ID="RadInputManager1">
                    <telerik:TextBoxSetting>
                    </telerik:TextBoxSetting>
                </telerik:RadInputManager>

                <div>
                    <asp:ScriptManager ID="ScriptManagerProxy1" runat="server">
                    </asp:ScriptManager>
                    <table style="width:100%">
                        <tr>
                            <td style="width:50%">
                                <telerik:RadComboBox ID="RadComboBox1" runat="server" AllowCustomText="true" OnClientLoad="ClientLoad" Width="100%">
                                    <Items>
                                        <telerik:RadComboBoxItem Text="" Value="" />
                                        <telerik:RadComboBoxItem Text="Item 1" Value="Item1" />
                                        <telerik:RadComboBoxItem Text="Item 2" Value="Item2" />
                                    </Items>
                                </telerik:RadComboBox>
                            </td>
                            <td  style="width:50%">
                                <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
                            </td>
                        </tr>
                    </table>
                </div>
            </form>
        </body>
    </html>

    ASPX.CS

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using Telerik.Web.UI;

    namespace ErpWebApplication
    {
        public partial class WebForm1 : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {

            }

            protected void Page_Init(object sender, EventArgs e)
            {
                NumericTextBoxSetting numericSetting = new NumericTextBoxSetting();
                numericSetting.Validation.IsRequired = true;
                numericSetting.TargetControls.Add(new TargetInput(TextBox1.ID, true));
                RadInputManager1.InputSettings.Add(numericSetting);
            }
        }
    }

     

    Thanks

     

    Milind

  9. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 17 Mar Link to this post

    Hello,

    Try setting the css class below:
    <style>
            .RadInputMgr {
     
                width:100%;
            }
             
        </style>
     and see how it goes.

    Regards,
    Maria Ilieva
    Telerik
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017