[CLOSED] Slow loading of Grid Command with Prepare functions

  1. #1

    [CLOSED] Slow loading of Grid Command with Prepare functions

    Using Coolite Version 0.8.2.30060

    We have a grid like below, this displays all the asp.net users and has 2 command columns. We have 350+ users in the system and the command columns PrepareToolbar functions cause it to load very slow (10+seconds) If we remove the Prepare functions it loads in less than a second. Is there anything you can recomend to speed up the prepare functions at all?

    Cheers

    Rob

       <ext:Panel ID="WestPanel" runat="server" Width="200"  Border="true">
          <Body>
            <ext:FitLayout runat="server">
              <ext:GridPanel runat="server" ID="UserGrid" StoreID="UserStore" AutoExpandColumn="User" >
              <AjaxEvents>
              <RowClick OnEvent="UserGrid_Click">
              <EventMask ShowMask="true" />
                <ExtraParams>
                  <ext:Parameter Name="Values" Value="Ext.encode(#{UserGrid}.getRowsValues())" Mode="Raw" />
                  <ext:Parameter Name="index" Value="rowIndex" Mode="Raw" /> 
                </ExtraParams>
              </RowClick>
              </AjaxEvents>
                <ColumnModel ID="ColumnModel1" runat="server" >
                  <Columns>                              
                    <ext:CommandColumn Width="30">
                      <Commands>
                        <ext:GridCommand Icon="Delete" CommandName="ReEnable" />
                        <ext:GridCommand Icon="Accept" CommandName="Disable" />
                      </Commands>
                      <PrepareToolbar Fn="prepare" />
                    </ext:CommandColumn>
                    <ext:CommandColumn Width="30">
                      <Commands>
                        <ext:GridCommand Icon="LockKey" CommandName="Unlock" />
                      </Commands>
                      <PrepareToolbar Fn="preparelock" />
                    </ext:CommandColumn>                
                    <ext:Column ColumnID="User" Header="Users" DataIndex="UserName" Sortable="true" MenuDisabled="true" />
                  </Columns>
                </ColumnModel>
                
                <SelectionModel>
                  <ext:RowSelectionModel  ID="RowSelectionModel1" runat="server" SingleSelect="true" />
                </SelectionModel>
               
                <AjaxEvents>
                <Command OnEvent="Clicked" >
                  <EventMask ShowMask="true" />
                  <ExtraParams>
                    <ext:Parameter Name="Values" Value="Ext.encode(#{UserGrid}.getRowsValues())" Mode="Raw" />
                    <ext:Parameter Name="CMD" Mode="Raw" Value="command" /> 
                  </ExtraParams>
                </Command>
                </AjaxEvents>
                <ToolTips>
                  <ext:ToolTip ID="ToolTip2" runat="server" Title="Tip" Html="Select a User to see what Roles they are a member of" />
                </ToolTips>
                <View>
                  <ext:GridView ID="GridView1" runat="server" />
                </View>            
              </ext:GridPanel>
            </ext:FitLayout>
          </Body>
          </ext:Panel>
     var preparelock = function(grid, toolbar, rowIndex, record) {
           var lockButton = toolbar.items.get(0);
           if (record.data.IsLockedOut == true) {
             lockButton.setVisible(true);
             lockButton.setTooltip('Click to Unlock User');
           }
           else {
             lockButton.setVisible(false);
           }      
         } 
       
         var prepare = function(grid, toolbar, rowIndex, record) {
           var enableButton = toolbar.items.get(0);
           var disableButton = toolbar.items.get(1);
    
           if (record.data.IsApproved == false) {
             disableButton.setVisible(false);
             enableButton.setTooltip('Click to Re-Enable User');
           }
           if (record.data.IsApproved == true) {
           
             enableButton.setVisible(false);
             disableButton.setTooltip('Click to Disable User');
           }
           var Accs = ('<%= ConfigurationManager.AppSettings("AdminAccounts") %>');
           var AdminAccs = Accs.split("|");
           
                
           if (AdminAccs.indexOf(record.data.UserName) > -1) {
             enableButton.setVisible(false);
             disableButton.setVisible(false);
           }
         }
    Last edited by Daniil; May 13, 2011 at 2:54 PM. Reason: [CLOSED]
  2. #2
    Hi,

    Yes, CommandColumn is heavyweight feature. You can try <ext:ImageCommandColumn> instead.
  3. #3
    Solved. Thanks
  4. #4
    How did ImageCommandColumn improve the performance?

    Just I have not tested it yet with a real application.
  5. #5
    It used to be 10 seconds to populate the grid. With the image command column its now between 1 and 2 seconds. Not lightening fast but a huge improvement.
  6. #6
    Good to know, thanks.

Similar Threads

  1. Replies: 3
    Last Post: Mar 19, 2013, 9:05 PM
  2. Page Loading very very slow
    By vs.mukesh in forum 1.x Help
    Replies: 8
    Last Post: Sep 24, 2012, 7:15 AM
  3. [CLOSED] Slow loading of image from browser cache
    By nhg_itd in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Jun 06, 2012, 11:52 AM
  4. Page Loading very slow
    By Rupesh in forum 1.x Help
    Replies: 0
    Last Post: Mar 25, 2011, 5:26 AM
  5. [CLOSED] Render (or prepare) grid cell
    By GmServizi in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Nov 24, 2009, 7:54 AM

Posting Permissions