[CLOSED] Performance Issue with CommandColumn

  1. #1

    [CLOSED] Performance Issue with CommandColumn

    Hello,

    I have a grid that contains a mixed row with columns and commandColumns.

    The commandColumns are using an ext.net icon.

    I am loading that results in the code behind by adding a datasource and databind.

    If I am loading about 300 records with one of these commandColumns the browser hangs for a few seconds. If I am using 3-4 commandColumns (each with an Icon), the browser hangs for 2-3 minutes and the cpu usage is about 25-30% all the time, you cant even kill the browser process.

    So the simple question is, how can I increase the performance in such a case ? I already did some tests and it is clear to me that the rendering process of these Icons is the problem.

    Using just 20-30 records works fine without hanging the browser.
    Last edited by Daniil; Dec 07, 2012 at 6:45 AM. Reason: [CLOSED]
  2. #2
    CommandColumn is very heavy widget because it renders toolbar with buttons for each cell in the column
    Do not use it for grid with many records.

    Use ImageCommandColumn
    https://examples2.ext.net/#/GridPane...Image_Command/

    or use over only mode
    https://examples2.ext.net/#/GridPane...Over_Commands/
  3. #3
    Hi Vladimir,

    thank you, the performance did dramatically increase now by using an ImageCommandColumn.

    I am still having two issues now:

    1. I did use the option
    standout="false"
    , this caused an optical feedback by doing a mouse over, now its static. As I am using just icons without any text, they are very near to each other and the user could click the wrong one, I need some kind of mouseover effect.

    2. I had a PrepareToolbar before, I have changed this to PrepareCommand and its causing an
    Uncaught TypeError: Cannot call method 'get' of undefined
    error.
    This command should change the icon if a specific value in the record is true. It did work well before with CommandColumn / PrepareToolbar

    my prepare function:

    old signature:

    var checkIfTourHasPhotos = function (grid, toolbar, rowIndex, record)
    new signature and code:

    
    
    
            var checkIfTourHasPhotos = function (grid, command, record, row) {
                var firstButton = toolbar.items.get(0);
    
                if (record.data.HasPhoto == true) {
                    firstButton.setIconCls("icon-camera");
                }
    
    
                //you can return false to cancel toolbar for this record
            };
    I know that there is no 'toolbar' anymore, but I have no idea how to change that function now.
    Last edited by blueworld; Dec 04, 2012 at 10:33 AM.
  4. #4
    Hi @blueworld,

    Unfortunately, mouse over effects are not supported.

    Please take a look at the PrepareCommand and PrepareCommands handlers in this example.
    https://examples2.ext.net/#/GridPane...pare_Commands/
  5. #5
    Hi Daniil,

    thank you, my prepareCommand is working now

            var checkIfTourHasPhotos = function (grid, command, record, row) {
                if (record.data.HasPhoto == true) {
                    command.iconCls ="icon-camera";
                }
    
            };
    If there is any workaround for a mouseover effect, please let me know, otherwise you can close this thread.
  6. #6
    It should be possible to get the required visual affect using CSS.

Similar Threads

  1. Replies: 5
    Last Post: Jan 16, 2012, 8:50 AM
  2. [CLOSED] [1.0] ext:CommandColumn locking issue
    By jskibo in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Apr 23, 2010, 1:10 AM
  3. Replies: 0
    Last Post: Oct 15, 2009, 3:10 AM
  4. [CLOSED] Performance issue
    By Jurke in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Oct 07, 2009, 9:51 AM
  5. [CLOSED] Performance issue with 0.8
    By reinout.mechant@imprss.be in forum 1.x Legacy Premium Help
    Replies: 13
    Last Post: Mar 26, 2009, 7:31 PM

Tags for this Thread

Posting Permissions