[RESOLVED]Chosen javascript plugin and validator callout extender

Hi all,

I am working on a web page that perferms insert and update operations. I used
Chosen plugin
 to make my dropdownlists look more fancy and functional.  The insert/update area is a modal popup. Here is how my dropdowns look like in .aspx file:

<asp:DropDownList ID="DropDownListItems" runat="server" data-placeholder="-- Choose An Item --"
AutoPostBack="True" CssClass="chzn-select-deselect"
<asp:ListItem Text="Please Select" Value="-1">

<asp:CompareValidator ID="CompareValidator4" runat="server" ControlToValidate="DropDownListItems" Display="None" ErrorMessage="Please Select An Item" ForeColor="Red" Operator="NotEqual" ValidationGroup="InsertUpdate" ValueToCompare="-1"></asp:CompareValidator>

<ajaxToolkit:ValidatorCalloutExtender ID="ValidatorCallOutExtender1" runat="server" PopupPosition="Right" TargetControlID="CompareValidator4"></ajaxToolkit:ValidatorCalloutExtender>

I register a client script in every postback (in Page_Load) as:

protected void Page_Load(object sender, EventArgs e)
            string Script = @"$('.chzn-select').chosen({no_results_text: 'No result found.',max_selected_options: 20}); $('.chzn-select-deselect').chosen({allow_single_deselect: true , no_results_text: 'No result found.' });";
            ScriptManager.RegisterStartupScript(Page, typeof(UpdatePanel), "JSCR", Script, true);


If this registration is not done then the dropdownlists look as normal asp.net dropdownlist.

The problem is that when user does not select any item then validation callout extender shows in the top-left corner of the page.

However, I have other callout extenders tied to textboxes and they are shown normally, at the right sight of the textbox as expected.

Has anyone encounter this problem? Any help is greatly appreciated.

Thanks in advance.

Bydefault ValidatorCallout is displyed on left sode of control

To use this control, add an input field and a validator control as you normally would. Then add the ValidatorCallout and set its TargetControlID property to reference the validator control.


To place the popupTable on the left side or the other place, we need to use the set_x/set_y method of the ValidatorCalloutExtender’s popupBehavior when the popup is shown


Or you can set the position of popup table dynamically by using  $find(‘ValidatorCalloutBehaviorId’)._popupTable.style.right

Leave a Reply