RadWindow taking forever to open on client side binding (2014.3 1209 (Dec 9, 2014) UI ASP.NETAJAX)

[Travis]

First of all, any help is greatly appreciated. 

 Currently we are having issues with radwindow performance.  It is taking about 5 to 10 seconds in IE browser to open a radwindow.  It is rather quick in chrome.  Everything is bound on client side with an ajax manager to bind some telerik grids and occasionally custom page method post backs.  I was wondering if there was a setting for rad windows to open up faster.  Right at dlg.show() and dlg.center() is where it takes about 5 to 6 seconds.  Why is this?

 

showMaterialsEditorDialog: function (data) {
       var control = this;

       this._selectedProject = data;
       this._projectStatusId = data.ProjectStatusId;

       var dlg = document.getElementById(this._windowId).control;
       var width = $telerik.$(window).width() * 90 / 100;
       var height = $telerik.$(window).height() * 90 / 100;
       dlg.set_height(height);
       dlg.set_width(width);


       var header = data.CustomerName + ' (' + data.ProjectName + ' - ' + data.ProjectId + ')';
       var subHeader = data.CustomerName + ' (' + data.CustomerNo + ') - ' + data.BranchName + ' - ' + data.BusinessUnitDescription + ' (' + data.BusinessUnitCode + ')';

       var header = document.getElementsByClassName('addNewProjectHeader')
       for (var i = 0; i < header.length; i++) {
           header[i].innerHTML = header;
       }
       var subHeaderElement = document.getElementsByClassName('addNewProjectHeader')
       for (var i = 0; i < subHeaderElement.length; i++) {
           subHeaderElement[i].innerHTML = subHeader;
       }
      // $('.addNewProjectSubHeader').html(subHeader);
       dlg.show();
       dlg.center();
       var pickListLink = $(dlg.get_contentElement().querySelector('.pickListButton'));//.find('.pickListButton');
       pickListLink.off().on('click', function () {
           if (control._unplannedMaterials.length == 0 && control._plannedMaterials.length == 0) {
               radalert('This project has no materials assigned.');
           }
           else {
               __doPostBack('pickList', data.ProjectStatusId);
           }
       });

       var restockListLink = $(dlg.get_contentElement().querySelector('.restockListButton'));//.find('.pickListButton');
       restockListLink.off().on('click', function () {
           if (control._unplannedMaterials.length == 0 && control._plannedMaterials.length == 0) {
               radalert('This project has no materials assigned.');
           }
           else {
               __doPostBack('restockList', data.ProjectStatusId);
           }
       });
       debugger;
       this._rebindProject();
   },

Here is the asp.net information:

<telerik:RadWindow ID="MaterialsEditorWindow" class="windowMaterials" ShowContentDuringLoad="false"  AutoSize="false"
             DestroyOnClose="true" VisibleOnPageLoad="false" Behaviors="Close" Height="800px" Modal="true"
         Width="1824" runat="server">
        <ContentTemplate >
            <telerik:RadAjaxLoadingPanel  ID="DialogLoadingPanel" Skin="Default" runat="server"></telerik:RadAjaxLoadingPanel>
            <div class="addShiftHeaderContainer">
                <div class="addNewProjectHeader"></div>
                <div class="addNewProjectSubHeader"></div>
            </div>

            <div class="buttonWrapper mtop10px">
                <button type="button" style="display: none;" class="imgButton projectSaveButton inventoryButton">
                    <em class="imgHolder"></em>Save Inventory</button>
                <button type="button" class="pickListButton inventoryButton">Pick List</button>
                <button type="button" class="restockListButton inventoryButton">Restock List</button>
                <button type="button" class="projectCancelButton inventoryButton">
                    Cancel</button>
                <button type="button" class="projectHasBeenFilledButton inventoryButton" style="float:right; display:none;" disabled="disabled">
                    Send To Filled</button>
                <button type="button" class="projectUnfillButton inventoryButton" style="float:right !important; display:none;" disabled="disabled">
                    Send To Unfill</button>
                <button type="button" class="projectRestockButton inventoryButton" style="float:right !important; display:none;" disabled="disabled">
                    Send To Restock</button>
            </div>

            <div class="inventoryContentHeader">Materials</div>

            <telerik:RadCodeBlock  runat="server">
                <a href="#" onclick="$find('<%= this.InventoryContainer.ClientID %>').expandAllPlanned(); return false;">Expand All</a>

                <a href="#" onclick="$find('<%= this.InventoryContainer.ClientID %>').collapseAllPlanned(); return false;">Collapse All</a>

                <a href="#" class="markAllComplete" style="display: none;" onclick="$find('<%= this.InventoryContainer.ClientID %>').markAllComplete(); return false;">Mark All Completed</a>
            </telerik:RadCodeBlock>

            <table class="equipPersonnelChangeInfo" border="0">
                <tr>
                    <td><b>Last Equipment Change:</b></td>
                    <td><span id="spnLastEquipChange" class="lastEquipChange" runat="server"></span></td>
                </tr>
                <tr>
                    <td><b>Last Personnel Change:</b></td>
                    <td><span id="spnLastPersonnelChange" class="lastPersonnelChange" runat="server"></span></td>
                </tr>
                <tr>
                    <td><b>Last Miscellaneous Change:</b></td>
                    <td><span id="spnLastMiscellaneousChange" class="lastMiscellaneousChange" runat="server"></span></td>
                </tr>

            </table>

            <asp:HiddenField ID="hdnPlannedMaterialsData" runat="server" />
            <asp:HiddenField ID="hdnAjaxRequestField" ClientIDMode="Static" runat="server" />
            <telerik:RadGrid ID="MaterialsGrid" EnableViewState="false" CssClass="plannedGrid"  runat="server" AutoGenerateColumns="false"
                AllowPaging="false" Skin="Default">
                <MasterTableView HierarchyLoadMode="Client" runat="server" NoDetailRecordsText="No actual materials have been added for this planned item.">
                    <Columns>
                        <telerik:GridTemplateColumn ItemStyle-CssClass="smallColumn">
                            <ItemTemplate>
                                <a href="javascript: void(0);" class="addActualButton" style="display: none;" id="hypAdd" runat="server">Add</a>
                            </ItemTemplate>
                            <ClientItemTemplate>
                                <a href="javascript: void(0);" class="addActualButton" style="display: none;" id="hypAdd" runat="server">Add</a>
                            </ClientItemTemplate>
                        </telerik:GridTemplateColumn>
                        <telerik:GridBoundColumn DataField="ItemNo" HeaderText="Item Number"></telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="MaterialFullName" HeaderText="Material Name"></telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="DesiredQuantity" HeaderText="Desired Quantity"></telerik:GridBoundColumn>
                        <telerik:GridTemplateColumn HeaderText="Actual Quantity">
                            <ClientItemTemplate>
                                <span class="actualQuantity"></span>
                            </ClientItemTemplate>
                        </telerik:GridTemplateColumn>
                        <telerik:GridBoundColumn DataField="QuantityOnSite" HeaderText="Quantity On-Site"></telerik:GridBoundColumn>
                    </Columns>
                    <NestedViewTemplate>
                        <input type="hidden" name="parentIndex" />
                        <telerik:RadGrid ID="AssignedActualMaterialsGrid"  AllowPaging="false"  EnableViewState="false"  CssClass="plannedActualGrid" runat="server" Width="90%"
                            OnItemDataBound="MaterialsGrid_ItemDataBound" AutoGenerateColumns="false" Skin="Windows7">
                            <MasterTableView HierarchyDefaultExpanded="true" AllowPaging="false" EnableColumnsViewState="false" HierarchyLoadMode="Client">
                                <Columns>
                                    <telerik:GridTemplateColumn ItemStyle-CssClass="smallColumn">
                                        <ItemTemplate>
                                            <a href="#" class="removeActualButton" style="display: none;">Remove</a>
                                        </ItemTemplate>
                                        <ClientItemTemplate>
                                            <a href="javascript: void(0);" class="removeActualButton" style="display: none;">Remove</a>
                                        </ClientItemTemplate>
                                    </telerik:GridTemplateColumn>
                                    <telerik:GridBoundColumn DataField="OriginialUOMId" Display="false"></telerik:GridBoundColumn>
                                    <telerik:GridBoundColumn DataField="OriginialBusinessUnitId" Display="false"></telerik:GridBoundColumn>
                                    <telerik:GridBoundColumn DataField="OriginialBusinessUnitCode" Display="false"></telerik:GridBoundColumn>
                                    <telerik:GridBoundColumn DataField="ItemNo" ItemStyle-CssClass="mediumColumn" HeaderText="Item Number"></telerik:GridBoundColumn>
                                    <telerik:GridBoundColumn DataField="FullName" HeaderText="Description"></telerik:GridBoundColumn>
                                    <telerik:GridTemplateColumn ItemStyle-Width="100"  HeaderText="Unit of Measure">
                                        <ClientItemTemplate>
                                            <select class="uomDropdown" style="width: 50px;" disabled="disabled"></select>
                                        </ClientItemTemplate>
                                    </telerik:GridTemplateColumn>
                                    <telerik:GridTemplateColumn HeaderText="Business Unit">
                                        <ClientItemTemplate>
                                            <select class="buDropdown" disabled="disabled"></select>
                                        </ClientItemTemplate>
                                    </telerik:GridTemplateColumn>
                                    <telerik:GridTemplateColumn HeaderStyle-CssClass="binLocationDropDownHeader" HeaderText="Bins/Locations">
                                        <ClientItemTemplate>
                                            <select class="buBinLocationDropdown" disabled="disabled"></select>
                                        </ClientItemTemplate>
                                    </telerik:GridTemplateColumn>
                                    <telerik:GridTemplateColumn ItemStyle-CssClass="smallColumn" HeaderText="Quantity">
                                        <ItemTemplate>
                                            <asp:TextBox ID="Qty" disabled="disabled" Columns="3" MaxLength="6" onkeypress="return isNumericKey(event);" CssClass="qty" runat="server" />
                                        </ItemTemplate>
                                    </telerik:GridTemplateColumn>
                                   <telerik:GridTemplateColumn ItemStyle-CssClass="smallColumn qtyReturnedItem" HeaderStyle-CssClass="qtyReturnedHeader" HeaderText="Quantity Returned">
                                        <ItemTemplate>
                                            <asp:TextBox ID="QtyReturned" disabled="disabled" Columns="3" MaxLength="6" Text="0" onkeypress="return isNumericKey(event);" CssClass="qtyReturned" runat="server" />
                                        </ItemTemplate>
                                    </telerik:GridTemplateColumn>
                                    <telerik:GridTemplateColumn HeaderText="Complete?">
                                        <ItemTemplate>
                                            <input type="checkbox" id="chkComplete" disabled="disabled" runat="server" />
                                        </ItemTemplate>
                                    </telerik:GridTemplateColumn>
                                     <telerik:GridTemplateColumn HeaderText="Split Item" ItemStyle-CssClass="splitItemGrid" HeaderStyle-CssClass="splitItemHeader">
                                         <ItemTemplate>
                                            <a href="#" class="splitItem" style="display: none;">Split Item</a>
                                        </ItemTemplate>
                                    </telerik:GridTemplateColumn>
                                </Columns>
                            </MasterTableView>
                            <ClientSettings ClientEvents-OnCommand="function(){}" AllowExpandCollapse="true">
                                <DataBinding ShowEmptyRowsOnLoad="false"></DataBinding>
                            </ClientSettings>
                        </telerik:RadGrid>
                    </NestedViewTemplate>
                </MasterTableView>
                <ClientSettings ClientEvents-OnCommand="function(){}" EnableAlternatingItems="false">
                    <DataBinding ShowEmptyRowsOnLoad="false"></DataBinding>
                    <Selecting AllowRowSelect="true" />
                </ClientSettings>
            </telerik:RadGrid>

            <div id="PlannedMaterialsPickerContainer" class="materialPickerContainer plannedMaterialsPickerContainer" runat="server">
                <uc1:ActualMaterialPicker ID="PlannedMaterialsMaterialPicker" ReturnUnplannedMaterials="false" runat="server" />
            </div>

            <div id="NewMaterialRequest" class="mtop10px" runat="server">
                <div class="inventoryContentHeader" style="clear: both;">New Material Request</div>
                <telerik:RadGrid ID="NewMaterialRequestGrid" PageSize="100" EnableViewState="false"  runat="server" AutoGenerateColumns="false">
                    <MasterTableView AllowPaging="true" runat="server">
                        <Columns>
                            <telerik:GridTemplateColumn ItemStyle-CssClass="smallColumn">
                                <ItemTemplate>
                                    <a href="#" class="removePlanButton" style="display: none;">Remove</a>
                                </ItemTemplate>
                                <ClientItemTemplate>
                                    <a href="javascript: void(0);" class="removePlanButton" style="display: none;">Remove</a>
                                </ClientItemTemplate>
                            </telerik:GridTemplateColumn>
                            <telerik:GridBoundColumn DataField="TaskItemPlanMiscName" HeaderText="New Material Request"></telerik:GridBoundColumn>
                            <telerik:GridTemplateColumn DataField="Quantity" HeaderText="Quantity">
                                <ItemTemplate>
                                    <asp:TextBox ID="txtQty" disabled="disabled"  onkeypress="return isNumericKey(event);" Columns="3" CssClass="qtyNewRequest" runat="server" />
                                </ItemTemplate>
                            </telerik:GridTemplateColumn>
                            <telerik:GridTemplateColumn HeaderText="Comments" HeaderStyle-Width="300">
                                <ClientItemTemplate>
                                    <input Type="Text" ID="txtNotes" disabled="disabled" class="notesMaterialRequest" style="Width: 300px;"  maxlength="200" ></input>
                                </ClientItemTemplate>
                            </telerik:GridTemplateColumn>

                            <telerik:GridTemplateColumn HeaderText="Complete?">
                                <ItemTemplate>
                                    <input type="checkbox" id="chkComplete" disabled="disabled"  runat="server" />
                                </ItemTemplate>
                            </telerik:GridTemplateColumn>
                        </Columns>
                    </MasterTableView>
                    <ClientSettings ClientEvents-OnCommand="function(){}">
                        <DataBinding ShowEmptyRowsOnLoad="false"></DataBinding>
                    </ClientSettings>
                </telerik:RadGrid>
            </div>

            <div id="AddtlMaterialsContainer" class="mtop10px" runat="server">
                <div class="inventoryContentHeader" style="clear: both;">Additional Materials</div>
                <telerik:RadGrid ID="AdditionalMaterialsGrid" PageSize="999"  EnableViewState="false"  runat="server" AutoGenerateColumns="false">
                    <MasterTableView runat="server" AllowPaging="true"  HierarchyLoadMode="Client" NoDetailRecordsText="No actual materials have been added for this planned item.">
                        <Columns>
                            <telerik:GridTemplateColumn>
                                <ItemTemplate>
                                    <a href="javascript: void(0);" class="removeActualButton" style="display: none;">Remove</a>
                                </ItemTemplate>
                                <ClientItemTemplate>
                                    <a href="javascript: void(0);" class="removeActualButton" style="display: none;">Remove</a>
                                </ClientItemTemplate>
                            </telerik:GridTemplateColumn>
                            <telerik:GridBoundColumn DataField="MaterialId" Display="false"></telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="OriginialUOMId" Display="false"></telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="OriginialBusinessUnitId" Display="false"></telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="OriginialBusinessUnitCode" Display="false"></telerik:GridBoundColumn>

                            <telerik:GridBoundColumn DataField="ItemNo" HeaderText="Item Number"></telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="FullName" HeaderText="Description"></telerik:GridBoundColumn>
                            <telerik:GridTemplateColumn HeaderText="Unit of Measure">
                                <ClientItemTemplate>
                                    <select class="uomDropdown" disabled="disabled"></select>
                                </ClientItemTemplate>
                            </telerik:GridTemplateColumn>
                            <telerik:GridTemplateColumn HeaderText="Business Unit">
                                <ClientItemTemplate>
                                    <select class="buDropdown" disabled="disabled"></select>
                                </ClientItemTemplate>
                            </telerik:GridTemplateColumn>
                            <telerik:GridTemplateColumn HeaderStyle-CssClass="binLocationDropDownHeader" HeaderText="Bins/Locations">
                                        <ClientItemTemplate>
                                            <select class="buBinLocationDropdown" disabled="disabled"></select>
                                        </ClientItemTemplate>
                                    </telerik:GridTemplateColumn>
                            <telerik:GridTemplateColumn HeaderText="Quantity">
                                <ClientItemTemplate>
                                    <input type="text" id="txtQty" disabled="disabled" onkeypress="return isNumericKey(event);" maxlength="6" style="width: 40px" class="qty"  runat="server" />
                                    <%--<asp:TextBox ID="txtQty" disabled="disabled" onkeypress="return isNumericKey(event);" Columns="3" CssClass="qty"  />--%>
                                </ClientItemTemplate>
                            </telerik:GridTemplateColumn>
                            <telerik:GridTemplateColumn ItemStyle-CssClass="smallColumn qtyReturnedItem" HeaderStyle-CssClass="qtyReturnedHeader" HeaderText="Quantity Returned">
                                        <ItemTemplate>
                                            <asp:TextBox ID="QtyReturned" disabled="disabled" Columns="3" MaxLength="6" Text="0" onkeypress="return isNumericKey(event);" CssClass="qtyReturned" runat="server" />
                                        </ItemTemplate>
                                    </telerik:GridTemplateColumn>

                            <telerik:GridTemplateColumn HeaderText="Complete?" Display="true">
                                <ClientItemTemplate>
                                    <input type="checkbox" id="chkComplete" disabled="disabled" runat="server" />
                                </ClientItemTemplate>
                            </telerik:GridTemplateColumn>
                            <telerik:GridTemplateColumn HeaderText="Split Item" ItemStyle-CssClass="splitItemGrid" HeaderStyle-CssClass="splitItemHeader">
                                         <ItemTemplate>
                                            <a href="#" class="splitItem" style="display: none;">Split Item</a>
                                        </ItemTemplate>
                                         <ClientItemTemplate>
                                            <a href="javascript: void(0);" class="splitItem" style="display: none;">Split Item</a>
                                        </ClientItemTemplate>
                                        <%--<ClientItemTemplate>
                                            <button class="splitItem" onclick="return false"  disabled="disabled" runat="server">Split Item</button>
                                        </ClientItemTemplate>--%>
                                    </telerik:GridTemplateColumn>
                        </Columns>
                    </MasterTableView>
                    <ClientSettings ClientEvents-OnCommand="function(){}">
                        <DataBinding ShowEmptyRowsOnLoad="false"></DataBinding>
                    </ClientSettings>
                </telerik:RadGrid>

                <div id="AddUnplannedMaterialsLinkContainer" runat="server">
                    <a href="#" style="display: none;" class="addUnplannedLink" onclick="$find('<%= this.InventoryContainer.ClientID %>')._showUnplannedMaterialsPicker(); return false;">Add Additional Materials</a>
                </div>

                <div class="materialPickerContainer">
                    <uc1:ActualMaterialPicker ID="addtlMaterialsActualPicker" ReturnUnplannedMaterials="true" runat="server"></uc1:ActualMaterialPicker>
                </div>
            </div>
            <div class="horizCenter">
                          <div id="MiscContainer" class="floatLeft" style="width: 100%;" runat="server">
                            <div class="shiftContentHeader" style="clear: both;">Miscellaneous</div>
                            <telerik:RadGrid ID="radMiscGrid" runat="server"></telerik:RadGrid>
                        </div>
            </div>
            <br />
            <div class="horizCenter">
                <div id="PersonnelContainer" class="floatLeft" style="width: 49%;" runat="server">
                    <div class="shiftContentHeader" style="clear: both;">Personnel</div>

                    <telerik:RadGrid ID="radPersonnelGrid" runat="server"></telerik:RadGrid>
                </div>

                <div id="EquipmentContainer" class="floatLeft mleft20px" style="width: 49%;" runat="server">
                    <div class="shiftContentHeader" style="clear: both;">Equipment</div>

                    <telerik:RadGrid ID="radEquipmentGrid" runat="server"></telerik:RadGrid>
                </div>


                <div class="cleared"></div>
            </div>

            <div id="MaterialNotesContainers" class="cleared mtop20px" runat="server">
                <uc1:ProjectNoteEditor ID="ucNoteEditor" DisableEditing="true" HeaderClass="inventoryContentHeader" ClockNumber="111111" NoteType="MaterialsNotes" runat="server"></uc1:ProjectNoteEditor>
            </div>

            <div class="buttonWrapper cleared floatLeft mtop20px">
                <button type="button" id="projectSaveButton" style="display: none;" class="imgButton projectSaveButton">
                    <em class="imgHolder"></em>Save Inventory</button>
                <button type="button" class="pickListButton">Pick List</button>
                <button type="button" class="restockListButton inventoryButton">Restock List</button>
                <button type="button" id="projectCancelButton" class="projectCancelButton">
                    Cancel</button>
            </div>
        </ContentTemplate>
    </telerik:RadWindow>

[Travis]

So, I ended up replacing the radwindow with jquery ui dialog and it was very fast on opening the dialog in IE. 

 This makes me suspect it is a setting on the radwindow that is firing in IE or an attribute that I need to set in the radwindow.  Not sure what it could be.  Once again, any help is greatly appreciated.

 

<div id="MaterialsEditorWindow" runat="server" class="windowMaterials">


<%--        <ContentTemplate >--%>
            <telerik:RadAjaxLoadingPanel  ID="DialogLoadingPanel" Skin="Default" runat="server"></telerik:RadAjaxLoadingPanel>
            <div class="addShiftHeaderContainer">
                <div class="addNewProjectHeader"></div>
                <div class="addNewProjectSubHeader"></div>
            </div>

            <div class="buttonWrapper mtop10px">
                <button type="button" style="display: none;" class="imgButton projectSaveButton inventoryButton">
                    <em class="imgHolder"></em>Save Inventory</button>
                <button type="button" class="pickListButton inventoryButton">Pick List</button>
                <button type="button" class="restockListButton inventoryButton">Restock List</button>
                <button type="button" class="projectCancelButton inventoryButton">
                    Cancel</button>
                <button type="button" class="projectHasBeenFilledButton inventoryButton" style="float:right; display:none;" disabled="disabled">
                    Send To Filled</button>
                <button type="button" class="projectUnfillButton inventoryButton" style="float:right !important; display:none;" disabled="disabled">
                    Send To Unfill</button>
                <button type="button" class="projectRestockButton inventoryButton" style="float:right !important; display:none;" disabled="disabled">
                    Send To Restock</button>
            </div>

            <div class="inventoryContentHeader">Materials</div>

            <telerik:RadCodeBlock  runat="server">
                <a href="#" onclick="$find('<%= this.InventoryContainer.ClientID %>').expandAllPlanned(); return false;">Expand All</a>

                <a href="#" onclick="$find('<%= this.InventoryContainer.ClientID %>').collapseAllPlanned(); return false;">Collapse All</a>

                <a href="#" class="markAllComplete" style="display: none;" onclick="$find('<%= this.InventoryContainer.ClientID %>').markAllComplete(); return false;">Mark All Completed</a>
            </telerik:RadCodeBlock>

            <table class="equipPersonnelChangeInfo" border="0">
                <tr>
                    <td><b>Last Equipment Change:</b></td>
                    <td><span id="spnLastEquipChange" class="lastEquipChange" runat="server"></span></td>
                </tr>
                <tr>
                    <td><b>Last Personnel Change:</b></td>
                    <td><span id="spnLastPersonnelChange" class="lastPersonnelChange" runat="server"></span></td>
                </tr>
                <tr>
                    <td><b>Last Miscellaneous Change:</b></td>
                    <td><span id="spnLastMiscellaneousChange" class="lastMiscellaneousChange" runat="server"></span></td>
                </tr>

            </table>

            <asp:HiddenField ID="hdnPlannedMaterialsData" runat="server" />
            <asp:HiddenField ID="hdnAjaxRequestField" ClientIDMode="Static" runat="server" />
            <telerik:RadGrid ID="MaterialsGrid" EnableViewState="false" CssClass="plannedGrid"  runat="server" AutoGenerateColumns="false"
                AllowPaging="false" Skin="Default">
                <MasterTableView HierarchyLoadMode="Client" runat="server" NoDetailRecordsText="No actual materials have been added for this planned item.">
                    <Columns>
                        <telerik:GridTemplateColumn ItemStyle-CssClass="smallColumn">
                            <ItemTemplate>
                                <a href="javascript: void(0);" class="addActualButton" style="display: none;" id="hypAdd" runat="server">Add</a>
                            </ItemTemplate>
                            <ClientItemTemplate>
                                <a href="javascript: void(0);" class="addActualButton" style="display: none;" id="hypAdd" runat="server">Add</a>
                            </ClientItemTemplate>
                        </telerik:GridTemplateColumn>
                        <telerik:GridBoundColumn DataField="ItemNo" HeaderText="Item Number"></telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="MaterialFullName" HeaderText="Material Name"></telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="DesiredQuantity" HeaderText="Desired Quantity"></telerik:GridBoundColumn>
                        <telerik:GridTemplateColumn HeaderText="Actual Quantity">
                            <ClientItemTemplate>
                                <span class="actualQuantity"></span>
                            </ClientItemTemplate>
                        </telerik:GridTemplateColumn>
                        <telerik:GridBoundColumn DataField="QuantityOnSite" HeaderText="Quantity On-Site"></telerik:GridBoundColumn>
                    </Columns>
                    <NestedViewTemplate>
                        <input type="hidden" name="parentIndex" />
                        <telerik:RadGrid ID="AssignedActualMaterialsGrid"  AllowPaging="false"  EnableViewState="false"  CssClass="plannedActualGrid" runat="server" Width="90%"
                            OnItemDataBound="MaterialsGrid_ItemDataBound" AutoGenerateColumns="false" Skin="Windows7">
                            <MasterTableView HierarchyDefaultExpanded="true" AllowPaging="false" EnableColumnsViewState="false" HierarchyLoadMode="Client">
                                <Columns>
                                    <telerik:GridTemplateColumn ItemStyle-CssClass="smallColumn">
                                        <ItemTemplate>
                                            <a href="#" class="removeActualButton" style="display: none;">Remove</a>
                                        </ItemTemplate>
                                        <ClientItemTemplate>
                                            <a href="javascript: void(0);" class="removeActualButton" style="display: none;">Remove</a>
                                        </ClientItemTemplate>
                                    </telerik:GridTemplateColumn>
                                    <telerik:GridBoundColumn DataField="OriginialUOMId" Display="false"></telerik:GridBoundColumn>
                                    <telerik:GridBoundColumn DataField="OriginialBusinessUnitId" Display="false"></telerik:GridBoundColumn>
                                    <telerik:GridBoundColumn DataField="OriginialBusinessUnitCode" Display="false"></telerik:GridBoundColumn>
                                    <telerik:GridBoundColumn DataField="ItemNo" ItemStyle-CssClass="mediumColumn" HeaderText="Item Number"></telerik:GridBoundColumn>
                                    <telerik:GridBoundColumn DataField="FullName" HeaderText="Description"></telerik:GridBoundColumn>
                                    <telerik:GridTemplateColumn ItemStyle-Width="100"  HeaderText="Unit of Measure">
                                        <ClientItemTemplate>
                                            <select class="uomDropdown" style="width: 50px;" disabled="disabled"></select>
                                        </ClientItemTemplate>
                                    </telerik:GridTemplateColumn>
                                    <telerik:GridTemplateColumn HeaderText="Business Unit">
                                        <ClientItemTemplate>
                                            <select class="buDropdown" disabled="disabled"></select>
                                        </ClientItemTemplate>
                                    </telerik:GridTemplateColumn>
                                    <telerik:GridTemplateColumn HeaderStyle-CssClass="binLocationDropDownHeader" HeaderText="Bins/Locations">
                                        <ClientItemTemplate>
                                            <select class="buBinLocationDropdown" disabled="disabled"></select>
                                        </ClientItemTemplate>
                                    </telerik:GridTemplateColumn>
                                    <telerik:GridTemplateColumn ItemStyle-CssClass="smallColumn" HeaderText="Quantity">
                                        <ItemTemplate>
                                            <asp:TextBox ID="Qty" disabled="disabled" Columns="3" MaxLength="6" onkeypress="return isNumericKey(event);" CssClass="qty" runat="server" />
                                        </ItemTemplate>
                                    </telerik:GridTemplateColumn>
                                   <telerik:GridTemplateColumn ItemStyle-CssClass="smallColumn qtyReturnedItem" HeaderStyle-CssClass="qtyReturnedHeader" HeaderText="Quantity Returned">
                                        <ItemTemplate>
                                            <asp:TextBox ID="QtyReturned" disabled="disabled" Columns="3" MaxLength="6" Text="0" onkeypress="return isNumericKey(event);" CssClass="qtyReturned" runat="server" />
                                        </ItemTemplate>
                                    </telerik:GridTemplateColumn>
                                    <telerik:GridTemplateColumn HeaderText="Complete?">
                                        <ItemTemplate>
                                            <input type="checkbox" id="chkComplete" disabled="disabled" runat="server" />
                                        </ItemTemplate>
                                    </telerik:GridTemplateColumn>
                                     <telerik:GridTemplateColumn HeaderText="Split Item" ItemStyle-CssClass="splitItemGrid" HeaderStyle-CssClass="splitItemHeader">
                                         <ItemTemplate>
                                            <a href="#" class="splitItem" style="display: none;">Split Item</a>
                                        </ItemTemplate>
                                    </telerik:GridTemplateColumn>
                                </Columns>
                            </MasterTableView>
                            <ClientSettings ClientEvents-OnCommand="function(){}" AllowExpandCollapse="true">
                                <DataBinding ShowEmptyRowsOnLoad="false"></DataBinding>
                            </ClientSettings>
                        </telerik:RadGrid>
                    </NestedViewTemplate>
                </MasterTableView>
                <ClientSettings ClientEvents-OnCommand="function(){}" EnableAlternatingItems="false">
                    <DataBinding ShowEmptyRowsOnLoad="false"></DataBinding>
                    <Selecting AllowRowSelect="true" />
                </ClientSettings>
            </telerik:RadGrid>

            <div id="PlannedMaterialsPickerContainer" class="materialPickerContainer plannedMaterialsPickerContainer" runat="server">
                <uc1:ActualMaterialPicker ID="PlannedMaterialsMaterialPicker" ReturnUnplannedMaterials="false" runat="server" />
            </div>

            <div id="NewMaterialRequest" class="mtop10px" runat="server">
                <div class="inventoryContentHeader" style="clear: both;">New Material Request</div>
                <telerik:RadGrid ID="NewMaterialRequestGrid" PageSize="100" EnableViewState="false"  runat="server" AutoGenerateColumns="false">
                    <MasterTableView AllowPaging="true" runat="server">
                        <Columns>
                            <telerik:GridTemplateColumn ItemStyle-CssClass="smallColumn">
                                <ItemTemplate>
                                    <a href="#" class="removePlanButton" style="display: none;">Remove</a>
                                </ItemTemplate>
                                <ClientItemTemplate>
                                    <a href="javascript: void(0);" class="removePlanButton" style="display: none;">Remove</a>
                                </ClientItemTemplate>
                            </telerik:GridTemplateColumn>
                            <telerik:GridBoundColumn DataField="TaskItemPlanMiscName" HeaderText="New Material Request"></telerik:GridBoundColumn>
                            <telerik:GridTemplateColumn DataField="Quantity" HeaderText="Quantity">
                                <ItemTemplate>
                                    <asp:TextBox ID="txtQty" disabled="disabled"  onkeypress="return isNumericKey(event);" Columns="3" CssClass="qtyNewRequest" runat="server" />
                                </ItemTemplate>
                            </telerik:GridTemplateColumn>
                            <telerik:GridTemplateColumn HeaderText="Comments" HeaderStyle-Width="300">
                                <ClientItemTemplate>
                                    <input Type="Text" ID="txtNotes" disabled="disabled" class="notesMaterialRequest" style="Width: 300px;"  maxlength="200" ></input>
                                </ClientItemTemplate>
                            </telerik:GridTemplateColumn>

                            <telerik:GridTemplateColumn HeaderText="Complete?">
                                <ItemTemplate>
                                    <input type="checkbox" id="chkComplete" disabled="disabled"  runat="server" />
                                </ItemTemplate>
                            </telerik:GridTemplateColumn>
                        </Columns>
                    </MasterTableView>
                    <ClientSettings ClientEvents-OnCommand="function(){}">
                        <DataBinding ShowEmptyRowsOnLoad="false"></DataBinding>
                    </ClientSettings>
                </telerik:RadGrid>
            </div>

            <div id="AddtlMaterialsContainer" class="mtop10px" runat="server">
                <div class="inventoryContentHeader" style="clear: both;">Additional Materials</div>
                <telerik:RadGrid ID="AdditionalMaterialsGrid" PageSize="999"  EnableViewState="false"  runat="server" AutoGenerateColumns="false">
                    <MasterTableView runat="server" AllowPaging="true"  HierarchyLoadMode="Client" NoDetailRecordsText="No actual materials have been added for this planned item.">
                        <Columns>
                            <telerik:GridTemplateColumn>
                                <ItemTemplate>
                                    <a href="javascript: void(0);" class="removeActualButton" style="display: none;">Remove</a>
                                </ItemTemplate>
                                <ClientItemTemplate>
                                    <a href="javascript: void(0);" class="removeActualButton" style="display: none;">Remove</a>
                                </ClientItemTemplate>
                            </telerik:GridTemplateColumn>
                            <telerik:GridBoundColumn DataField="MaterialId" Display="false"></telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="OriginialUOMId" Display="false"></telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="OriginialBusinessUnitId" Display="false"></telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="OriginialBusinessUnitCode" Display="false"></telerik:GridBoundColumn>

                            <telerik:GridBoundColumn DataField="ItemNo" HeaderText="Item Number"></telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="FullName" HeaderText="Description"></telerik:GridBoundColumn>
                            <telerik:GridTemplateColumn HeaderText="Unit of Measure">
                                <ClientItemTemplate>
                                    <select class="uomDropdown" disabled="disabled"></select>
                                </ClientItemTemplate>
                            </telerik:GridTemplateColumn>
                            <telerik:GridTemplateColumn HeaderText="Business Unit">
                                <ClientItemTemplate>
                                    <select class="buDropdown" disabled="disabled"></select>
                                </ClientItemTemplate>
                            </telerik:GridTemplateColumn>
                            <telerik:GridTemplateColumn HeaderStyle-CssClass="binLocationDropDownHeader" HeaderText="Bins/Locations">
                                        <ClientItemTemplate>
                                            <select class="buBinLocationDropdown" disabled="disabled"></select>
                                        </ClientItemTemplate>
                                    </telerik:GridTemplateColumn>
                            <telerik:GridTemplateColumn HeaderText="Quantity">
                                <ClientItemTemplate>
                                    <input type="text" id="txtQty" disabled="disabled" onkeypress="return isNumericKey(event);" maxlength="6" style="width: 40px" class="qty"  runat="server" />
                                    <%--<asp:TextBox ID="txtQty" disabled="disabled" onkeypress="return isNumericKey(event);" Columns="3" CssClass="qty"  />--%>
                                </ClientItemTemplate>
                            </telerik:GridTemplateColumn>
                            <telerik:GridTemplateColumn ItemStyle-CssClass="smallColumn qtyReturnedItem" HeaderStyle-CssClass="qtyReturnedHeader" HeaderText="Quantity Returned">
                                        <ItemTemplate>
                                            <asp:TextBox ID="QtyReturned" disabled="disabled" Columns="3" MaxLength="6" Text="0" onkeypress="return isNumericKey(event);" CssClass="qtyReturned" runat="server" />
                                        </ItemTemplate>
                                    </telerik:GridTemplateColumn>

                            <telerik:GridTemplateColumn HeaderText="Complete?" Display="true">
                                <ClientItemTemplate>
                                    <input type="checkbox" id="chkComplete" disabled="disabled" runat="server" />
                                </ClientItemTemplate>
                            </telerik:GridTemplateColumn>
                            <telerik:GridTemplateColumn HeaderText="Split Item" ItemStyle-CssClass="splitItemGrid" HeaderStyle-CssClass="splitItemHeader">
                                         <ItemTemplate>
                                            <a href="#" class="splitItem" style="display: none;">Split Item</a>
                                        </ItemTemplate>
                                         <ClientItemTemplate>
                                            <a href="javascript: void(0);" class="splitItem" style="display: none;">Split Item</a>
                                        </ClientItemTemplate>
                                        <%--<ClientItemTemplate>
                                            <button class="splitItem" onclick="return false"  disabled="disabled" runat="server">Split Item</button>
                                        </ClientItemTemplate>--%>
                                    </telerik:GridTemplateColumn>
                        </Columns>
                    </MasterTableView>
                    <ClientSettings ClientEvents-OnCommand="function(){}">
                        <DataBinding ShowEmptyRowsOnLoad="false"></DataBinding>
                    </ClientSettings>
                </telerik:RadGrid>

                <div id="AddUnplannedMaterialsLinkContainer" runat="server">
                    <a href="#" style="display: none;" class="addUnplannedLink" onclick="$find('<%= this.InventoryContainer.ClientID %>')._showUnplannedMaterialsPicker(); return false;">Add Additional Materials</a>
                </div>

                <div class="materialPickerContainer">
                    <uc1:ActualMaterialPicker ID="addtlMaterialsActualPicker" ReturnUnplannedMaterials="true" runat="server"></uc1:ActualMaterialPicker>
                </div>
            </div>
            <div class="horizCenter">
                          <div id="MiscContainer" class="floatLeft" style="width: 100%;" runat="server">
                            <div class="shiftContentHeader" style="clear: both;">Miscellaneous</div>
                            <telerik:RadGrid ID="radMiscGrid" runat="server"></telerik:RadGrid>
                        </div>
            </div>
            <br />
            <div class="horizCenter">
                <div id="PersonnelContainer" class="floatLeft" style="width: 49%;" runat="server">
                    <div class="shiftContentHeader" style="clear: both;">Personnel</div>

                    <telerik:RadGrid ID="radPersonnelGrid" runat="server"></telerik:RadGrid>
                </div>

                <div id="EquipmentContainer" class="floatLeft mleft20px" style="width: 49%;" runat="server">
                    <div class="shiftContentHeader" style="clear: both;">Equipment</div>

                    <telerik:RadGrid ID="radEquipmentGrid" runat="server"></telerik:RadGrid>
                </div>


                <div class="cleared"></div>
            </div>

            <div id="MaterialNotesContainers" class="cleared mtop20px" runat="server">
                <uc1:ProjectNoteEditor ID="ucNoteEditor" DisableEditing="true" HeaderClass="inventoryContentHeader" ClockNumber="111111" NoteType="MaterialsNotes" runat="server"></uc1:ProjectNoteEditor>
            </div>

            <div class="buttonWrapper cleared floatLeft mtop20px">
                <button type="button" id="projectSaveButton" style="display: none;" class="imgButton projectSaveButton">
                    <em class="imgHolder"></em>Save Inventory</button>
                <button type="button" class="pickListButton">Pick List</button>
                <button type="button" class="restockListButton inventoryButton">Restock List</button>
                <button type="button" id="projectCancelButton" class="projectCancelButton">
                    Cancel</button>
            </div>
           </div>
<%--        </ContentTemplate>--%>
<%--    </telerik:RadWindow>--%>

</div>

Javascript stuff that I changed:

showMaterialsEditorDialog: function (data) {
        var control = this;

        this._selectedProject = data;
        this._projectStatusId = data.ProjectStatusId;

        var dlg = document.getElementById(this._windowId);



        //var dlg = document.getElementById(this._windowId).control;
        //var width = $telerik.$(window).width() * 90 / 100;
        //var height = $telerik.$(window).height() * 90 / 100;
        //dlg.set_height(height);
        //dlg.set_width(width);

        var header = data.CustomerName + ' (' + data.ProjectName + ' - ' + data.ProjectId + ')';
        var subHeader = data.CustomerName + ' (' + data.CustomerNo + ') - ' + data.BranchName + ' - ' + data.BusinessUnitDescription + ' (' + data.BusinessUnitCode + ')';

        var header = document.getElementsByClassName('addNewProjectHeader')
        for (var i = 0; i < header.length; i++) {
            header[i].innerHTML = header;
        }
        var subHeaderElement = document.getElementsByClassName('addNewProjectHeader')
        for (var i = 0; i < subHeaderElement.length; i++) {
            subHeaderElement[i].innerHTML = subHeader;
        }
        //$('.addNewProjectSubHeader').html(subHeader);
        //dlg.show();
        //dlg.center();

        $(dlg).dialog("open");
        //var pickListLink = $(dlg.get_contentElement().querySelector('.pickListButton'));//.find('.pickListButton');
        //pickListLink.off().on('click', function () {
        //    if (control._unplannedMaterials.length == 0 && control._plannedMaterials.length == 0) {
        //        radalert('This project has no materials assigned.');
        //    }
        //    else {
        //        __doPostBack('pickList', data.ProjectStatusId);
        //    }
        //});

        //var restockListLink = $(dlg.get_contentElement().querySelector('.restockListButton'));//.find('.pickListButton');
        //restockListLink.off().on('click', function () {
        //    if (control._unplannedMaterials.length == 0 && control._plannedMaterials.length == 0) {
        //        radalert('This project has no materials assigned.');
        //    }
        //    else {
        //        __doPostBack('restockList', data.ProjectStatusId);
        //    }
        //});
        var pickListLink = $(dlg.querySelector('.pickListButton'));//.find('.pickListButton');
        pickListLink.off().on('click', function () {
            if (control._unplannedMaterials.length == 0 && control._plannedMaterials.length == 0) {
                radalert('This project has no materials assigned.');
            }
            else {
                __doPostBack('pickList', data.ProjectStatusId);
            }
        });

        var restockListLink = $(dlg.querySelector('.restockListButton'));//.find('.pickListButton');
        restockListLink.off().on('click', function () {
            if (control._unplannedMaterials.length == 0 && control._plannedMaterials.length == 0) {
                radalert('This project has no materials assigned.');
            }
            else {
                __doPostBack('restockList', data.ProjectStatusId);
            }
        });

        debugger;
        this._rebindProject();
    },

[Ianko]

Hello Travis,

Examining only the markup and client-side code sent, I am unable to locate why this performance issue is encountered. 

There is no built-in option to configure the show() or center() method to perform faster.

Can you provide a simple, locally runnable sample with which to reproduce the same and properly debug the code implemented? 

Regards,
Ianko
Telerik