SetFocusOnError not working for combobox

[Spencer]

Hey guys,

I'm finishing setting up some validation controls on a page for a client. I'm having some trouble with getting RadComboBox to jump up when validating. I'm using SetFocusOnError="true" and all other element's on the page are functioning correctly including other telerik controls. 

I did find an old forum post with an employee saying that there was an error on telerik's end but, it's from 2007 so it may not be valid anymore.
http://www.telerik.com/community/forums/aspnet/combobox/validation-focus-not-setting-on-combobox.aspx
 

<telerik:RadComboBox ID="FrmReferredBy" runat="server" AllowCustomText="false" CausesValidation="false" /><asp:RequiredFieldValidator ID="FrmReferredByValidator" runat="server" Text="*"  ControlToValidate="FrmReferredBy" Display="Dynamic" SetFocusOnError="true" />

If you have other questions or need more code just let me know. Thanks!

Peace,
Spencer

[Fit2Page]

Hi,

 

We are 12 years further now, and this is still a problem?

I am experiencing it building a form today with 2023.3

Marc

[Princy]

Hello Spencer,

I tried the following scenario and it worked as expected.
aspx:

<telerik:RadComboBox ID="FrmReferredBy" runat="server" AllowCustomText="false" CausesValidation="false"/>
    <asp:RequiredFieldValidator ID="FrmReferredByValidator" runat="server" Text="*" ControlToValidate="FrmReferredBy"
    SetFocusOnError="true" InitialValue="- Search in -" ErrorMessage="Please select a search"
    ValidationGroup="SearchFormValidationGroup" Display="Dynamic" />
    <asp:LinkButton runat="server" ID="Button1" Text="Search" ValidationGroup="SearchFormValidationGroup" />

Thanks,
Princy.

[Spencer]

Hey man, 


Thanks for the help but, from the code you provided the page does
nothing but reset to the top on PostBack. 

Below is the example of the page I have made and still no luck.
I'm going a bit crazy here so any help would be greatly appreciated.

Thanks,
Spencer

ASCX:

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPages/Main.master" AutoEventWireup="true"
    CodeFile="MyCodeBehind.cs" Inherits="MyCodeBehind" %>


<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="Server">

<!-- I have a bunch of line breaks here so that I'll know if the page jumps to the combo box versus just the top of the page-->

<telerik:RadComboBox ID="RadComboBox1" runat="server" AllowCustomText="false" CausesValidation="false">
        <Items>
            <telerik:RadComboBoxItem runat="server" Text="" />
            <telerik:RadComboBoxItem runat="server" Text="1" />
            <telerik:RadComboBoxItem runat="server" Text="2" />
            <telerik:RadComboBoxItem runat="server" Text="3" />
        </Items>
    </telerik:RadComboBox>
    <asp:RequiredFieldValidator ID="RadComboBox1Validator" runat="server" Text="*" ControlToValidate="RadComboBox1"
    SetFocusOnError="true" InitialValue="" ErrorMessage="Please select a search"
    ValidationGroup="SearchFormValidationGroup" Display="Dynamic" />

<!-- Again, I have a bunch of line breaks here so that there is enough space to know if the page is jumping to the combo box-->

 <asp:LinkButton runat="server" ID="Button1" Text="Search" ValidationGroup="SearchFormValidationGroup" />


</asp:Content>

C#:

public partial class MyCodeBehind : System.Web.UI.Page {}

[Spencer]

I realized that you probably checked for the page actually jumping. I'm new to the forms here and once I realized what an MVP is, I realized you know what you are talking about. :)

Anyways, still having the same error, I just wanted to apologize if my last post came across flippant. \



Peace,
Spencer

[Thad]

Hi Spencer,

This happens because the RadComboBox is a composite control and Microsoft's built-in validation code doesn't know that you really want focus to go to the Input portion of the RadComboBox when an error occurs.  It tries to set focus on the <span> that is output to represent the control.

We had to write custom code to get focus on the following controls when validating.  I'm sure other controls have the same issue.

• RadDatePicker
• RadComboBox
• RadInputControl
• RadAsyncUploadControl

Here is how this maps out:
Given a RadDatePicker named "rdpEndDate", you must find and set focus to the control with ID = "rdpEndDate_dateInput_text", a RadComboBox named "rcbState" maps to "rcbState_Input", and a RadInputControl named "rntbQuantity" maps to "rntbQuantity_text".  Upload Controls are a different beast.

Given your situation, I suggest that you overwrite Microsoft's JavaScript function called ValidatorSetFocus.  You will need to determine what control is being given focus and change that control on the fly to the inner piece that you really want it to have.

Note this one line of JavaScript in the code I'm attaching below:

var ctv = $('#' + val.id).attr('ctv');

In order to make things easier, on the server side we attach an attribute (ctv="control to validate") to each validator control that gives the actual CLIENTID that should get focus on error.  For example, the validator for rdpEndDate has the following attribute:

• ctv="$ctl00_container1_container2_container3_rdpEndDate_dateInput_text"

The line of code above extracts that ClientID so that you can locate it with jQuery.

Below is what I wrote to handle this situation for the RadAsyncUploadControl.  The other types of controls mentioned here can be handled in a very similar way.  If you don't want to add the ctv attribute, you'll have to look at the variable "ctrl" and determine which type of control it is based on it's assigned class and then change the value of ctrl to be the new control that should get focus.

/*
###################################################################################################################
#   ... Overriding Microsoft's Validation.  Dangerous, but necessary since Telerik controls need special treatment
#  ..
# .
*/
function ValidatorValidate(val, validationGroup, event) {
    val.isvalid = true;
    if ((typeof (val.enabled) == "undefined" || val.enabled != false) && IsValidationGroupMatch(val, validationGroup)) {
        if (typeof (val.evaluationfunction) == "function") {
            val.isvalid = val.evaluationfunction(val);
            if (!val.isvalid && Page_InvalidControlToBeFocused == null) {
                ValidatorSetFocus(val, event);
            }
        }
    }
    ValidatorUpdateDisplay(val);
}
function ValidatorSetFocus(val, event) {
    var ctrl;
    if (typeof (val.controlhookup) == "string") {
        var eventCtrl;
        if ((typeof (event) != "undefined") && (event != null)) {
            if ((typeof (event.srcElement) != "undefined") && (event.srcElement != null)) {
                eventCtrl = event.srcElement;
            }
            else {
                eventCtrl = event.target;
            }
        }
        if ((typeof (eventCtrl) != "undefined") && (eventCtrl != null) &&
            (typeof (eventCtrl.id) == "string") &&
            (eventCtrl.id == val.controlhookup)) {
            ctrl = eventCtrl;
        }
    }
    if ((typeof (ctrl) == "undefined") || (ctrl == null)) {
        ctrl = document.getElementById(val.controltovalidate);
    }
    /* #######################################################################
    This code is necesary to validate Rad controls                          */
    var ctv = $('#' + val.id).attr('ctv');
    if (ctv) {
        if ((typeof (ctrl) == "undefined") || (ctrl == null) || (ctv != '' && ctrl != null && ctrl.id != ctv)) {
            ctrl = $('#' + ctv)[0];
            if ($('#' + ctv)[0].className && $('#' + ctv)[0].className.indexOf('RadAsyncUpload') != -1) {
                // - If a file has not been selected, or one has but has the wrong extension, ruFakeInput is visible and should get focus.
                if ($('#' + ctv).find('.ruFakeInput').length > 0) {
                    ctrl = $('#' + ctv).find('.ruFakeInput')[0];
                }
                // - If a file has been selected that exceeds the size limit, the button should get focus
                else if ($('#' + ctv).find('.ruButton').length > 0) {
                    ctrl = $('#' + ctv).find('.ruButton')[0];
                }
            }
        }
    }
    /* End necessary code
    ####################################################################### */
    if ((typeof (ctrl) != "undefined") && (ctrl != null) &&
        (ctrl.tagName.toLowerCase() != "table" || (typeof (event) == "undefined") || (event == null)) &&
        ((ctrl.tagName.toLowerCase() != "input") || (ctrl.type.toLowerCase() != "hidden")) &&
        (typeof (ctrl.disabled) == "undefined" || ctrl.disabled == null || ctrl.disabled == false) &&
        (typeof (ctrl.visible) == "undefined" || ctrl.visible == null || ctrl.visible != false) &&
        (IsInVisibleContainer(ctrl))) {
        if ((ctrl.tagName.toLowerCase() == "table" && (typeof (__nonMSDOMBrowser) == "undefined" || __nonMSDOMBrowser)) ||
            (ctrl.tagName.toLowerCase() == "span")) {
            var inputElements = ctrl.getElementsByTagName("input");
            var lastInputElement = inputElements[inputElements.length - 1];
            if (lastInputElement != null) {
                ctrl = lastInputElement;
            }
        }
        if (typeof (ctrl.focus) != "undefined" && ctrl.focus != null) {
            ctrl.focus();
            Page_InvalidControlToBeFocused = ctrl;
        }
    }
}

/*
# .
#  ..
#   ... End crazy override
###################################################################################################################
*/

I hope this helps you out!
Thad

[Fit2Page]

Solved by myself with https://docs.telerik.com/devtools/aspnet-ajax/controls/combobox/how-to/focus-the-radcombobox