RadComboBox, RequiredFieldValidator and AJAX

5 posts, 1 answers
  1. Jon
    Jon avatar
    813 posts
    Member since:
    Oct 2008

    Posted 24 Mar 2010 Link to this post

    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" /> 


  2. Answer
    robertw102
    robertw102 avatar
    265 posts
    Member since:
    Jul 2007

    Posted 24 Mar 2010 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Jon
    Jon avatar
    813 posts
    Member since:
    Oct 2008

    Posted 24 Mar 2010 Link to this post

    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
  5. robertw102
    robertw102 avatar
    265 posts
    Member since:
    Jul 2007

    Posted 24 Mar 2010 Link to this post

    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.
  6. Jon
    Jon avatar
    813 posts
    Member since:
    Oct 2008

    Posted 24 Mar 2010 Link to this post

    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
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017