Click here to Skip to main content
13,000,469 members (59,725 online)
Click here to Skip to main content
Add your own
alternative version


14 bookmarked
Posted 30 Oct 2009

Validating Accordion and RadPanelBar using Ajax and Focusing Ajax Callout Messages to the Correct Position

, 30 Oct 2009
Rate this:
Please Sign up or sign in to vote.
An article on Ajax validation for Accordion and RadPanelBar
Problematic page:

Sample Image - maximum width is 600 pixels

Solved page:

Sample Image - maximum width is 600 pixels


This article mainly focuses on how to reposition or refocus the Ajax callout messages. Accordion and RadPanelBar controls are web controls that provides multiple panes. It is like having several CollapsiblePanels. Each CollapsiblePanel is capable of holding its child controls and panel header to group these controls. If we have some categorized inputs, then we can use these controls. As it contains input controls, it is required to validate input values of all the panes.

We can use ASP.NET validators and Ajax validator callouts to validate these controls. The submit button should explicitly call JavaScript function to validate all the panes. For each group of controls, the validation will be called. If the panel is closed, then we should open the panel programmatically to focus the error message.

If collapsible panel contains scrolling, then it is difficult to scroll the control to focus the error message. Here in this article, I have given the same scenario as the third panel contains many textboxes. When validating the page, the callout message popup is not focusing to the correct control. See Image 1.

Using the Code

In this code example I have used accordion control with three collapsible accordion panes, i.e. First, Second and Third. The submit button will call the JavaScript function ValidatePage2 which contains all the code of validation.

protected void Page_Load(object sender, EventArgs e)
    ButtonSubmit.OnClientClick = "javascript:return ValidatePage2
				('" + MainAccordion.ClientID + "');";

In the example, the last text box is empty inside the third panel. When validation fires, the third panel is found as invalid and the panel should open if it is closed. In accordion control, it can be achieved by just setting selected index. e.g. accordianControl.set_SelectedIndex(2).

// Custom validation method written in javascript to validate all the panes

function ValidatePage2(AccordionControlID) {
    var item;
    var accordianControl = $get(AccordionControlID).AccordionBehavior;

    if (accordianControl == null)
        return false;
    if (typeof (Page_ClientValidate) == 'function') {


            if (Page_ClientValidate('First') == false) {
                return false;


            if (Page_ClientValidate('Second') == false) {
                return false;


            if (Page_ClientValidate('Third') == false) {
                return false;

    return true;

The above JavaScript function ValidatePage2 takes client id of the accordion control to get the object. Firstly the SetErrorClear function will reset all the page validators, then validate all the groups one by one by calling Page_ClientValidate('First'), Page_ClientValidate('Second') and Page_ClientValidate('Third') functions. If any group is found invalid, then we call SetFocusOnError('Group_Name'). This function is written to close the validator callout which was focused incorrectly and to focus the validator callout message again to the correct position.

// To focus the validator callout message to correct place by using setTimeout delay
function SetFocusOnError(CurrentGroup) {
    for (i = 0; i < Page_Validators.length; i++) {
        var validator = Page_Validators[i];
        var groupName = validator.validationGroup;
        var callout = validator.ValidatorCalloutBehavior;

        if (groupName == CurrentGroup && callout._focusAttached != null && 
		callout._focusAttached) {
            var controlToFocus = document.getElementById(validator.controltovalidate);
            popupCallout = callout;
            setTimeout("HideErrorCallout()", 2);
            setTimeout("ShowErrorCallout()", 600);
// Hide improperly focused callout
function HideErrorCallout() {
    if (popupCallout) {
// Show validator callout
function ShowErrorCallout() {
    if (popupCallout) {;

In this article, I have provided two examples, one which contains the problem and the other one is solved. By just checking these two examples, you will easily get what was the problem and how the problem was resolved.


30th October, 2009: Initial post


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Sunil Preetham
Software Developer Proteans Software Solutions Pvt Ltd.
India India
I am working for Proteans Software Solutions since 3.5 years. Proteans is a leading Outsourced Product Development Company. We partner with ISVs, SaaS companies, Internet businesses & software R&D organizations of Fortune 1000 companies and provide them complete software lifecycle services from software product engineering, sustenance, pre-sales support, professional services and technical support.

You may also be interested in...


Comments and Discussions

QuestionProblem with masterpage and accordion panel Pin
ballucha6-Oct-11 1:52
memberballucha6-Oct-11 1:52 
GeneralMy vote of 3 Pin
Priyanka.Dhamdhere27-Sep-10 2:26
memberPriyanka.Dhamdhere27-Sep-10 2:26 
GeneralOn telerik control Pin
hungud17-Jan-10 16:15
memberhungud17-Jan-10 16:15 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.170624.1 | Last Updated 30 Oct 2009
Article Copyright 2009 by Sunil Preetham
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid