RadComboBox, RequiredFieldValidator and AJAX

[Jon]

Hi,

I've got a problem whereby when I have a combobox that has a parent the required field validator ends up on a new line on the second combobox.

I've really cut down the code to the bare minimum to function and have the code shown at the bottom of this post.  If it is executed then you'll see on the second combo box there is an extra line below it.  Remove the combo boxes from the AJAX manager and this issue disappears (but obviously the functionality is lost).

Having stripped down the code the only difference between the two is that the second combobox gets wrapped in a div called uxCompanyContactControl_uxContactIDPanel - it's this div that seems to throw the required field validator onto a new line.  I'm guessing that this is the content that will be replaced when the Company changes.

How do I fix this?

Also I really like the way that the radnumerictextbox shows bad data with the ! icon inside the field.  I've made my code so that the error icon goes over the top of the combo box.  Is there any intention of having a built in validator for the combo box?  Finally have you a link to the icon that is used for the numerictextbox as that one is nicer than the one I use.

Code follows below.

Best Regards,

Jon

<telerik:RadScriptManager ID="uxRadScriptManager" runat="server"></telerik:RadScriptManager>
<telerik:RadStyleSheetManager ID="uxRadStyleSheetManager" Runat="server"></telerik:RadStyleSheetManager>

<telerik:RadAjaxManager ID="uxRadAjaxManager" runat="server">
    <ajaxsettings>
        <telerik:AjaxSetting AjaxControlID="uxCompanyID"  >
            <updatedcontrols>
                <telerik:AjaxUpdatedControl ControlID="uxContactID" />
            </updatedcontrols>
        </telerik:AjaxSetting>
        <telerik:AjaxSetting AjaxControlID="uxSaveButton">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="uxSaveButton" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </ajaxsettings>
</telerik:RadAjaxManager>

<table cellpadding="0" cellspacing="0" >
    <tr>
        <td>Company:</td>
        <td>
<telerik:RadComboBox ID="uxCompanyID" Runat="server" EmptyMessage=" - Select an Company - " AllowCustomText="true" DataTextField="Name" DataValueField="CompanyID" CssClass="halfWidthComboBox" MarkFirstMatch="True" DropDownWidth="300" CausesValidation="false" AutoPostBack="True" SelectedIndexChanged="uxCompanyID_SelectedIndexChanged"></telerik:RadComboBox>
<asp:RequiredFieldValidator ID="uxCompanyIDReq" runat="server"  ControlToValidate="uxCompanyID" ErrorMessage="RequiredFieldValidator" Text="<img src='/blank.gif' alt='Required field' class='errIconCombo' />" Width="0"></asp:RequiredFieldValidator>
        </td>
        <td>Contact:</td>
        <td>
<telerik:RadComboBox ID="uxContactID" Runat="server" EmptyMessage=" - Select a Company - " AllowCustomText="true" DataTextField="Name" DataValueField="ContactID" CssClass="halfWidthComboBox" MarkFirstMatch="True" DropDownWidth="300"></telerik:RadComboBox>
<asp:RequiredFieldValidator ID="uxContactIDReq" runat="server"  ControlToValidate="uxContactID" ErrorMessage="RequiredFieldValidator" Text="<img src='/blank.gif' alt='Required field' class='errIconCombo' />" Width="0"></asp:RequiredFieldValidator>
        </td>
    </tr>
</table>

<asp:Button ID="uxSaveButton" runat="server" Text="Save" />

[robertw102]

The reason your seeing the RequiredFieldValidator appearing on the next line is because the RadComboBox is being wrapped in a block div by the RadAjaxManager. To solve this, set UpdatePanelRenderMode="Inline" on your RadComboBox AjaxUpdatedControl declaration. That way it will change the div it uses to wrap the RadComboBox to an inline item.

I hope that helps.

[Jon]

Many thanks Robert!!!!

I'd completely missed that setting and it took me a while to discover that it was the AJAX doing this.

Do you happen to know if there is a way to set that from the code behind without using the AjaxSettingCreated event?  My controls are in a custom control so I am having to pass the AjaxManager from the page to the custom control.  The following is the code that I use in the custom control...

radAjaxManager.AjaxSettings.AddAjaxSetting(Me.uxCompanyID, Me.uxContactID)

Regards,

Jon

[robertw102]

Well if your doing it in code and you want this setting to be applied to all the AjaxUpdatedControls then I would suggest adding the UpdatePanelsRenderMode="Inline" on your RadAjaxManager control.

I hope that helps.

[Jon]

I'll gove that a shot and see how it affects the layout of the pages.  Shouldn't be much of an effect as I've had to use tables to control the layout. 

Thanks again for the help.

Regards,

Jon