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

• Download demo - 826.26 KB
• Download source - 839.37 KB

Introduction

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) {
    SetErrorClear();
    var item;
    var accordianControl = $get(AccordionControlID).AccordionBehavior;

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

            accordianControl.set_SelectedIndex(0);

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

            accordianControl.set_SelectedIndex(1);

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

            accordianControl.set_SelectedIndex(2);

            if (Page_ClientValidate('Third') == false) {
                SetFocusOnError('Third');
                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);
            controlToFocus.focus();
            popupCallout = callout;
            setTimeout("HideErrorCallout()", 2);
            setTimeout("ShowErrorCallout()", 600);
            break;
        }
    }
}
// Hide improperly focused callout
function HideErrorCallout() {
    if (popupCallout) {
        popupCallout.hide();
    }
}
// Show validator callout
function ShowErrorCallout() {
    if (popupCallout) {
        popupCallout.show();
    }
}

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.

History

30^th October, 2009: Initial post