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

3 posts, 0 answers
  1. Travis
    Travis avatar
    4 posts
    Member since:
    Oct 2013

    Posted 23 Sep 2015 Link to this post

    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>

  2. Travis
    Travis avatar
    4 posts
    Member since:
    Oct 2013

    Posted 23 Sep 2015 Link to this post

    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();
        },

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 28 Sep 2015 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top