Screen looks different after Ajax call.

[Wai Loon Ho]

Hi,
After click on 'Save' button in my screen, I will need to clear the content in the 2 textboxes.
But once I did that, the 2 textboxes looks abit different.
I really don't know how come the 2 textboxes will have a big gap after I cleat the content.
Please help.

Here is the print screen - Before Image and After Image.

Here is the code.
ASPX
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel2" runat="server" >
</telerik:RadAjaxLoadingPanel>

 

 

 

 

 

 

 

<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" EnableEmbeddedScripts="true" LoadingPanelID="RadAjaxLoadingPanel1">

 

 

<telerik:RadAjaxManager ID="RadAjaxManager2" runat="server">

 

 

<AjaxSettings>

 

 

<telerik:AjaxSetting AjaxControlID="btnSave">

 

 

<UpdatedControls>

 

 

<telerik:AjaxUpdatedControl ControlID="txtCardGroupName" />

 

 

<telerik:AjaxUpdatedControl ControlID="lblCardGroupName" />

 

 

<telerik:AjaxUpdatedControl ControlID="txtCardGroupNumber" />

 

 

<telerik:AjaxUpdatedControl ControlID="lblCardGroupNumber" />

 

 

</UpdatedControls>

 

 

</telerik:AjaxSetting>

 

 

</AjaxSettings>

 

 

</telerik:RadAjaxManager>

 

 

</telerik:RadAjaxPanel>

 

CS
txtCardGroupNumber.Text = string.Empty;

 

 

 

txtCardGroupName.Text =

string.Empty;

 

 

 

 

 

[Dimo]

Hello Wai Loon Ho,

Please copy-paste also the markup, which contains the textboxes, or even better, a complete runnable web page, so that we can test it locally. Thanks.

Regards,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Wai Loon Ho]

Hi,
I have found the solution for this problem.
This problem is cause by I putting the control id into the RadAjaxPanel -> RadAjaxManager as below.

    <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" EnableEmbeddedScripts="true" LoadingPanelID="RadAjaxLoadingPanel1">
        <telerik:RadAjaxManager ID="RadAjaxManager2" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="btnSave">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="txtCardGroupName" />
                        <telerik:AjaxUpdatedControl ControlID="lblCardGroupName" />
                        <telerik:AjaxUpdatedControl ControlID="txtCardGroupNumber" />
                        <telerik:AjaxUpdatedControl ControlID="lblCardGroupNumber" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
    </telerik:RadAjaxPanel>

I notice this will cause the problem. Not sure is a bug or this is not the correct way.

But the solution is group the control that wish to refresh into table/div and put the table/div in RadAjaxPanel -> RadAjaxManager as below.

    <telerik:RadAjaxPanel ID="Panel" runat="server" EnableEmbeddedScripts="true" LoadingPanelID="RadAjaxLoadingPanel1">
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="btnSave">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="tblCardGroupBasicInfo" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
    </telerik:RadAjaxPanel>

    <table class="table" id="tblCardGroupBasicInfo" runat="server">
        <tr>
            <td class="tableLeft">
                <h2>
                    <asp:Literal ID="ltrlCardGroup" runat="server" Text="<%$ Resources:Common,ltrlCardGroup %>"></asp:Literal>
                </h2>
            </td>
        </tr>
        <tr>
            <td>
                <dl>
                    <dt>
                        <asp:Literal ID="ltrlCardGroupName" runat="server" Text="<%$ Resources:ltrlCardGroupName%>"></asp:Literal>
                    </dt>
                    <dd>
                        <asp:TextBox ID="txtCardGroupName" Width="200px" runat="server" MaxLength="27" />
                        <asp:Label ID="lblCardGroupName" runat="server" />
                    </dd>
                    <dt>
                        <asp:Literal ID="ltrlCardGroupNumber" runat="server" Text="<%$ Resources:ltrlCardGroupNumber %>"></asp:Literal>
                    </dt>
                    <dd>
                        <asp:TextBox ID="txtCardGroupNumber" Width="200px" runat="server" MaxLength="6" />
                        <asp:Label ID="lblCardGroupNumber" runat="server" />
                    </dd>
                </dl>
            </td>
        </tr>
    </table>

Hope this can help.