Rank 1
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.
7 Answers, 1 is accepted
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.
Rank 1
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
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
Rank 1
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
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
Rank 1
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
Try setting the css class below:
<style> .RadInputMgr { width:100%; } </style>Regards,
Maria Ilieva
Telerik