RadGrid WebUserControl edit form blinks badly on postback after Telerik upgrade

[Andrew]

We have an older application that was using the 2015 version of Telerik.Web.UI control. We use a RadGrid that employs a web user control for adding and editing rows. 

<telerik:RadGrid ID="gvSamples" runat="server" AutoGenerateColumns="False" OnUpdateCommand="gvSamples_UpdateCommand" OnItemCommand="gvSamples_ItemCommand"
    OnDeleteCommand="gvSamples_DeleteCommand"
    EnableEmbeddedBaseStylesheet="false"
    CssClass="table table-striped table-condensed table-bordered table-hover">
    <MasterTableView Width="100%" CommandItemDisplay="Top" EditMode="PopUp" CssClass="table table-condensed table-striped table-hover" DataKeyNames="sample.SampleId">
        <EditFormSettings PopUpSettings-Height="1000px" PopUpSettings-Width="1150px" PopUpSettings-Modal="True" UserControlName="~/UserControls/SampleControl.ascx"
            EditFormType="WebUserControl"/>
        <CommandItemTemplate>
            <asp:Button ID="btnAddNewSample" Text="Add New Sample" runat="server" CommandName="InitInsert" CssClass="btn-sm btn-primary"></asp:Button>
        </CommandItemTemplate>
        <Columns>
            <telerik:GridEditCommandColumn UniqueName="EditCommandColumn" EditText="View/Edit" ButtonType="PushButton">
            </telerik:GridEditCommandColumn>
            <telerik:GridBoundColumn UniqueName="SampleName" HeaderText="Sample ID" DataField="Location.SampleName">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn UniqueName="SampleType" HeaderText="Sample Type" DataField="sample.SampleType">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn UniqueName="LabID" HeaderText="Lab ID" DataField="sample.LabNumber">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn UniqueName="Technician" HeaderText="Sample Taken By" DataField="sample.Technician">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn UniqueName="SampleDate" HeaderText="Date of Sample Collected" DataField="sample.SampleDate" DataFormatString="{0:d}">
            </telerik:GridBoundColumn>
            <telerik:GridButtonColumn ConfirmText="Are you sure to Delete the Sample?" ConfirmDialogType="RadWindow" ConfirmTitle="Delete Sample" UniqueName="btnDeleteSample" ButtonType="FontIconButton" CommandName="Delete" />
        </Columns>
    </MasterTableView>
    <ClientSettings>
        <ClientEvents OnRowDblClick="RowDblClick" OnPopUpShowing="onPopUpShowing" />
    </ClientSettings>
</telerik:RadGrid>

 

Before the upgrade, working with any of the dropdowns, radio buttons, and calendar controls on the ascx web edit control worked smoothly. However, after upgrading to 2021.1.224.45, the entire edit webform blinks out and back in, which is very jarring to the end user.

Here is the code for the edit form:

<div runat="server" id="dvDataGrid" style="width: 100%" Visible="True">
        <div style="background-color: lightgrey; height: 25px">
            <asp:Label ID="lblSectionC" runat="server" CssClass="labelHeader" Text="Lab Results"></asp:Label>
        </div>
        <table style="width: 100%">
            <tr>
                <td>
                    <asp:Label ID="lblDirty" runat="server"></asp:Label>
                    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                        <ContentTemplate>
                            <table style="width: 100%">
                                <tr>
                                    <td align="right">
                                        <asp:Label ID="lblPPMTop" runat="server" Text="Total Quantity PPM:  " CssClass="labelNormal"></asp:Label>
                                        <asp:Label ID="lblTotalPPMTop" runat="server" CssClass="labelNormal" ForeColor="Green"></asp:Label>

                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <asp:DataGrid ID="dgLabResults" runat="server" AutoGenerateColumns="False" HeaderStyle-BackColor="CadetBlue"
                                            HeaderStyle-Font-Names="arial" HeaderStyle-ForeColor="Wheat" OnItemCommand="dgLabResults_InsertCommand"
                                            OnItemDataBound="dgLabResults_ItemDataBound" CellPadding="3" CellSpacing="0"
                                            Width="100%" CssClass="table table-bordered table-hover table-striped table-condensed">
                                            <Columns>
                                                <asp:TemplateColumn HeaderText="LabID" Visible="false">
                                                    <ItemTemplate>
                                                        <asp:Label ID="LabID" runat="server" CssClass="labelNormal" Text='<%#DataBinder.Eval(Container.DataItem, "LabID")%>'></asp:Label>
                                                    </ItemTemplate>
                                                </asp:TemplateColumn>
                                                <asp:TemplateColumn HeaderText="PCBTypeID" Visible="false">
                                                    <ItemTemplate>
                                                        <asp:Label ID="PCBTypeID" runat="server" CssClass="labelNormal" Text='<%#DataBinder.Eval(Container.DataItem, "PCBTypeID")%>'></asp:Label>
                                                    </ItemTemplate>
                                                    <HeaderStyle CssClass="thead" />
                                                </asp:TemplateColumn>
                                                <asp:TemplateColumn HeaderText="UnitID" Visible="false">
                                                    <ItemTemplate>
                                                        <asp:Label ID="UnitID" runat="server" CssClass="labelNormal" Text='<%#DataBinder.Eval(Container.DataItem, "UnitID")%>'></asp:Label>
                                                    </ItemTemplate>
                                                    <HeaderStyle CssClass="thead" />
                                                </asp:TemplateColumn>
                                                <asp:TemplateColumn HeaderText="PCB Type" ItemStyle-Width="130px">
                                                    <ItemTemplate>
                                                        <asp:Label ID="lblPCBType" runat="server" CssClass="labelNormal" Text='<%#DataBinder.Eval(Container.DataItem, "PCBType")%>'></asp:Label>
                                                    </ItemTemplate>
                                                    <HeaderStyle CssClass="thead" />
                                                    <EditItemTemplate>
                                                        <asp:DropDownList ID="dpPCBType" runat="server" CssClass="form-control input-sm">
                                                        </asp:DropDownList>
                                                        <asp:Label ID="ecPCBType" runat="server" Text="" ForeColor="Red"></asp:Label>
                                                    </EditItemTemplate>
                                                    <FooterTemplate>
                                                        <asp:DropDownList ID="dpPCBTypeNew" runat="server" CssClass="form-control input-sm">
                                                        </asp:DropDownList>
                                                        <asp:Label ID="ecPCBTypeNew" runat="server" Text="" ForeColor="Red"></asp:Label>
                                                    </FooterTemplate>
                                                    <HeaderStyle CssClass="thead" />
                                                </asp:TemplateColumn>
                                                <asp:TemplateColumn HeaderText="Detection Reporting Limit">
                                                    <ItemTemplate>
                                                        <asp:Label ID="lblReportLimit" runat="server" CssClass="labelNormal" Text='<%#DataBinder.Eval(Container.DataItem, "ReportLimit")%>'></asp:Label>
                                                    </ItemTemplate>
                                                    <HeaderStyle CssClass="thead" />
                                                    <EditItemTemplate>
                                                        <asp:TextBox ID="txtReportLimit" runat="server" CssClass="form-control input-sm" Text='<%#DataBinder.Eval(Container.DataItem, "ReportLimit")%>'
                                                            Width="80px">
                                                        </asp:TextBox>
                                                        <asp:Label ID="ckReportLimit" runat="server" Text="" ForeColor="Red"></asp:Label>
                                                    </EditItemTemplate>
                                                    <FooterTemplate>
                                                        <asp:TextBox ID="txtReportLimitNew" runat="server" CssClass="form-control input-sm" Text=""
                                                            Width="110px">
                                                        </asp:TextBox>
                                                        <asp:Label ID="ckReportLimitNew" runat="server" Text="" ForeColor="Red"></asp:Label>
                                                    </FooterTemplate>
                                                </asp:TemplateColumn>
                                                <asp:TemplateColumn HeaderText="Measured Quantity">
                                                    <ItemTemplate>
                                                        <asp:Label ID="lblQuantity" runat="server" CssClass="labelNormal" Text='<%#DataBinder.Eval(Container.DataItem, "Quantity")%>'></asp:Label>
                                                    </ItemTemplate>
                                                    <HeaderStyle CssClass="thead" />
                                                    <EditItemTemplate>
                                                        <asp:TextBox ID="txtQuantity" runat="server" Text='<%#DataBinder.Eval(Container.DataItem, "Quantity")%>'
                                                            Width="80px" CssClass="form-control input-sm">
                                                        </asp:TextBox>
                                                        <asp:Label ID="ecQuantity" runat="server" Text="" ForeColor="Red"></asp:Label>
                                                    </EditItemTemplate>
                                                    <FooterTemplate>
                                                        <asp:TextBox ID="txtQuantityNew" runat="server" CssClass="form-control input-sm" Text="" Width="80px">
                                                        </asp:TextBox>
                                                        <asp:Label ID="ecQuantityNew" runat="server" Text="" ForeColor="Red"></asp:Label>
                                                    </FooterTemplate>
                                                </asp:TemplateColumn>
                                                <asp:TemplateColumn HeaderText="Unit">
                                                    <ItemTemplate>
                                                        <asp:Label ID="lblUnit" runat="server" CssClass="labelNormal" Text='<%#DataBinder.Eval(Container.DataItem, "Unit")%>'></asp:Label>
                                                    </ItemTemplate>
                                                    <HeaderStyle CssClass="thead" />
                                                    <EditItemTemplate>
                                                        <asp:DropDownList ID="dpUnit" runat="server" CssClass="form-control input-sm" DataTextField="Unit"
                                                            DataValueField="Unit">
                                                        </asp:DropDownList>
                                                        <asp:Label ID="ecdpUnit" runat="server" Text="" ForeColor="Red"></asp:Label>
                                                    </EditItemTemplate>
                                                    <FooterTemplate>
                                                        <asp:DropDownList ID="dpUnitNew" runat="server" CssClass="form-control input-sm">
                                                        </asp:DropDownList>
                                                        <asp:Label ID="ecdpUnitNew" runat="server" Text="" ForeColor="Red"></asp:Label>
                                                    </FooterTemplate>
                                                </asp:TemplateColumn>
                                                <asp:TemplateColumn HeaderText="Quantity ppm">
                                                    <ItemTemplate>
                                                        <asp:Label ID="lblQuantityPPM" runat="server" CssClass="labelNormal" Text='<%#DataBinder.Eval(Container.DataItem, "QuantityPPM")%>'></asp:Label>
                                                    </ItemTemplate>
                                                    <HeaderStyle CssClass="thead" />
                                                </asp:TemplateColumn>
                                                <asp:EditCommandColumn UpdateText="Update" CancelText="Cancel" EditText="Edit" ValidationGroup="PCBType">
                                                    <HeaderStyle CssClass="thead" />
                                                </asp:EditCommandColumn>
                                                <asp:ButtonColumn CommandName="Delete" Text="Delete">
                                                    <HeaderStyle CssClass="thead" />
                                                </asp:ButtonColumn>
                                                <asp:TemplateColumn Visible="False">
                                                    <FooterTemplate>
                                                        <asp:LinkButton ID="lbnInsert" runat="server" CommandName="Insert" Text="Save" ValidationGroup="PCBTypeNew"
                                                            Font-Underline="True" />
                                                        <asp:LinkButton ID="lbnCancel" runat="server" CommandName="Cancel" Text="Cancel"
                                                            Font-Underline="True" CausesValidation="false" />
                                                    </FooterTemplate>
                                                    <HeaderStyle CssClass="thead" />
                                                </asp:TemplateColumn>
                                            </Columns>
                                        </asp:DataGrid>
                                    </td>
                                </tr>
                                <tr>
                                    <td align="right">
                                        <asp:Label ID="lblPPMBottom" runat="server" Text="Total Quantity PPM:  " CssClass="Badge"></asp:Label>
                                        <asp:Label ID="lblTotalPPMBottom" runat="server" CssClass="Badge" ForeColor="Green"></asp:Label>

                                    </td>
                                </tr>
                            </table>
                            <asp:CustomValidator ID="cvLabResults" runat="server" OnServerValidate="LabResults_ServerValidate"
                                ValidationGroup="SubmitValidation" ErrorMessage="* Enter lab result"></asp:CustomValidator>
                        </ContentTemplate>
                        <Triggers>
                            <asp:AsyncPostBackTrigger ControlID="btnAddLab" />
                        </Triggers>
                    </asp:UpdatePanel>
                </td>
            </tr>
            <tr>
                <td align="right">
                    <asp:Button ID="btnAddLab" runat="server" CausesValidation="false" Text="Insert Lab Result" CssClass="btn-sm btn-primary" />
                </td>
            </tr>
        </table>
    </div>
    <div align="center" style="position: relative; bottom: 0; right: 0">

        <asp:Button ID="btnUpdate" Text="Update Sample" CssClass="btn-sm btn-primary" runat="server" CommandName="Update" Visible='<%# Not (TypeOf DataItem Is Telerik.Web.UI.GridInsertionObject) %>'></asp:Button>
        <asp:Button ID="btnInsert" Text="Insert Sample" CssClass="btn-sm btn-primary" runat="server" CommandName="PerformInsert" Visible='<%# (TypeOf DataItem Is Telerik.Web.UI.GridInsertionObject) %>'></asp:Button>

        <asp:Button ID="btnCancel" Text="Cancel" runat="server" CssClass="btn-sm btn-primary" CausesValidation="False" CommandName="Cancel"></asp:Button>
    </div>
</asp:PlaceHolder>

 

The majority of the control data on this edit form is loaded when the form loads, so there are no real performance bottlenecks on each individual control.

I'm not sure why postbacks with the newest version appear to be slower.  Before the upgrade, only one of the text fields (which has a name lookup function) would very slightly flicker. The entire form never flickered or blinked.

Is there anything I can do on the grid via settings that would remedy this issue? I'm working under a time constraint to get Telerik upgraded on this application to ensure the application no longer has the AsyncUpload vulnerability of version older than the 2020 version, so I'm trying to not delay the upgrade process by reworking the entire edit form.

 

 

Thank you.

[Attila Antal]

Hi Andrew,

Most likely there are Nested AJAX controls on the page and they are conflicting.

I suggest turning AJAX off or even remove it while troubleshooting the application, see Get more descriptive errors by disabling AJAX

Furthermore, I can see that there is an UpdatePanel in the EditForm and in case you have enabled AJAX for the Grid, that will create Nested AJAX. UpdatePanel inside UpdatePanel. To eliminate this problem, it is best to remove the UpdatePanel from the EditForm and enable AJAX only for the Grid. 

If you only want the EditForm to be Ajaxified, then leave the UpdatePanel in the EditForm intact, and make sure the Grid is not inside another UpdatePanel, nor RadAjaxPanel and also not added to the Ajax Settings of RadAjaxManager.

For more information about Ajax Controls, please check out the Understanding AJAX Controls KB article.

If that doesn't help resolve the problem, please share the complete page (ASPX and .Master) pages so that I can inspect the structure. With that information, I would be able to tell you more.

Regards,
Attila Antal
Progress Telerik