GroupSummaryView Grid - Multi-row selection very slow when groups are shown

[aspadev]

We have a grid that utilises a GroupSummaryView, and allows for selection of multiple rows. Selection of the rows is very slow and gets slower the more rows that are selected. With a grid containing 74 rows (grouped across 3 groups), selecting all the rows by scrolling to the last row and use shift-click causes IE 8 to display the 'Stop running this script ?' web browser is running slowly message.

If I deselect the 'Show In Groups' checkbox (via the drop down from the column headings) and try the same multi-select, performance is much quicker and no IE8 warning message is shown.

We have no code that is executed on row select. The performance is currently unacceptable to our users.

The grid is set up as below:

GroupSummaryView<BookingRowItem> groupSummaryView = new GroupSummaryView<BookingRowItem>();
groupSummaryView.setShowGroupedColumn(false);
groupSummaryView.groupBy(colEntitlementTradeOrPositionType);bookingsGrid = new Grid<BookingRowItem>(bookingListStore, columnModel);
bookingsGrid.setView(groupSummaryView);
bookingsGrid.setBorders(false);
bookingsGrid.getView().setAutoExpandColumn(colEntitlementPartyCode);
bookingsGrid.getView().setAutoExpandMin(150);

[Colin Alworth]

That seems to be a very reasonable amount of data to display, so I'm afraid we'll need some more information to be able to pin down what the issue might be. Only having three groups should not cause a serious problem. What version of GXT are you running? How many columns are you adding? Are you writing custom valueprovider or using cells to render any of those columns?

Do you see any performance issues at http://www.sencha.com/examples/#Exam...e:groupinggrid in IE8? There are only about 30 items in that grid, but more groups, so the effect should still be noticeable.

[aspadev]

I am using GXT 3.0.5. There are 33 columns in my grid, 4 of which are hidden. I am using a cell renderer on 5 of these columns. I do not see this problem in the Sencha example you mention.

[Colin Alworth]

While that is many columns, that shouldn't be enough to cause the kinds of slowdowns you are referring to. Can you share a test case that demonstrates this issue to complete this bug report? See http://www.sencha.com/forum/showthre...T-Bug-Template for the template that you should generally follow for your bug reports.

Otherwise if you can post just the cells themselves, there might be perf issues in there, and I can move this to Discussion to go over any inefficiencies in those cells.

[Colin Alworth]

One final note: IE's long running script message doesn't show up based on the amount of time it takes to run some JS code, but merely based on how many instructions are executed. While it is true that your grid seems to be much more complex than the examples we offer, it shouldn't be so much more expensive that this error should pop up without some very expensive other work going on. With out being able to reproduce this, we can't be sure if this is a bug at all in GXT being needlessly inefficient, or just more evidence that IE8 is incredibly slow.

[aspadev]

Thanks for the replies. I appreciate that this is a difficult one to re-produce and I am not realistically able to provde a test case. I have commented out the cell renderer code and also turned off all grid filtering. The problem persists.

As soon as I 'ungroup' the grid the performance problem is resolved. There is obviously something more going on re row selection on grouped grids.

I cannot see any other code on my side that could be firing merely because I am selecting rows on the grid. It looks like we may have to live with this issue for now I guess.

[Colin Alworth]

I've moved this to discussion for now, since it seems to be an isolated case - we haven't heard of this sort of issue even from teams with much larger grids, so I'm not sure how we can help you without seeing some code. Consider opening a support ticket and uploading the relevant classes, or modifying the grouping example I linked above so that it is as complex as your own case (more rows, more columns, and the same custom cells you use).

[marvic]

Confirm this issue.
I have grid with GroupingView and 362 rows in grid (2 columns)
rows selected by programm from saved data in db

    IdentityValueProvider<Answer> identity = new IdentityValueProvider<Answer>();
    sm = new CheckBoxSelectionModel<Answer>(identity) {
      protected void onSelectChange(Answer model, boolean select) {
        super.onSelectChange(model, select);
        service.logString("sm onSelectChange: "+ model.getId() , cl);
        ...................

      };
    };
    sm.setSelectionMode(SelectionMode.SIMPLE);

    ColumnConfig<Answer, String> answerCol = new ColumnConfig<Answer, String>(propsAnswer.name(), 250, "Answer");
    answerCol.setCell(new AbstractCell<String>() {
      @Override
      public void render(Context context, String value, SafeHtmlBuilder sb) {
        Answer a = new Answer();
        try {
          a = storeAns.findModelWithKey(context.getKey().toString());
        } catch (Exception e) {}
        String style = "style='color: " + (a.getAgent() > 0 ? "red" : "black") + "'";
        if (a.getAgent() > 0) {
          sb.appendHtmlConstant("<span " + style + " qtitle='Data:' qtip='New'>" + value + "</span>");
        } else {
          sb.appendHtmlConstant("<span " + style + ">" + value + "</span>");
        }
        
      }
    });
    cc1 = new ColumnConfig(propsAnswer.complexName(), 300, "Q/A");
    cc1.setComparator(new Comparator<String>() {
      @Override
      public int compare(String o1, String o2) {
        Answer a1 = null;
        Answer a2 = null;
        for (Answer a : storeAnswer.getAll()) {
          if (a.getGroupName().equals(o1)) {
            a1 = a;
            break;
          }
        }
        for (Answer a : storeAnswer.getAll()) {
          if (a.getGroupName().equals(o2)) {
            a2 = a;
            break;
          }
        }
        if (a1 == null || a2 == null) {}
        return a1.compareTo(a2);
      }
    });

    List<ColumnConfig<Answer, ?>> l = new ArrayList<ColumnConfig<Answer, ?>>();
    l.add(sm.getColumn());
    l.add(answerCol);
    l.add(cc1);
    ColumnModel<Answer> cm = new ColumnModel<Answer>(l);

    GroupingViewDefaultAppearance v = new GroupingViewDefaultAppearance();
    v.setHeaderTemplate(new GroupHeaderTemplate<Answer>() {
      @Override
      public SafeHtml renderGroupHeader(GroupingData<Answer> groupInfo) {
        String s = (String) groupInfo.getValue();
        int p1 = s.indexOf("/");
        String s1 = s.substring(0, p1).trim();
        String s2 = s.substring(p1 + 1).trim();
        return SafeHtmlUtils.fromTrustedString("<span style='font-weight:bold;color:blue;'>" + s1 + "</span>" + " / "
            + "<span style='font-weight:bold;color:black;'>" + s2 + "</span>");
      }
    });


    viewAns = new GroupingView<Answer>(v);


    viewAns.setShowGroupedColumn(false);
    viewAns.setForceFit(true);
    viewAns.setSortingEnabled(true);


    gridAnswer = new Grid<Answer>(storeAns, cm) {
      @Override
      protected void onAfterFirstAttach() {
        super.onAfterFirstAttach();
        Scheduler.get().scheduleDeferred(new ScheduledCommand() {
          @Override
          public void execute() {
            fillAnsStore();
          }
        });
      }
    };


    gridAnswer.setView(viewAns);
    gridAnswer.setBorders(true);
    gridAnswer.getView().setStripeRows(true);
    gridAnswer.getView().setColumnLines(true);
    gridAnswer.setLoadMask(true);
    gridAnswer.setLoader(loaderAerp);
    gridAnswer.setSelectionModel(sm);
    gridAnswer.getSelectionModel().setLocked(true);
    gridAnswer.getView().setForceFit(true);
    new QuickTip(gridAnswer);


    StringFilter<Answer> ansFilter = new StringFilter<Answer>(propsAnswer.name());
    GridFilters<Answer> filters = new GridFilters<Answer>();
    filters.initPlugin(gridAnswer);
    filters.setLocal(true);
    filters.addFilter(ansFilter);

    viewAns.groupBy(cc1);

program select rows:

        service.getSelAnswers(airport.getId(), new AsyncCallback<List<Answer>>() {
          @Override
          public void onSuccess(List<Answer> answersSel) {
            storeAnswerSel.replaceAll(answersSel);
            List<Answer> ansSelList = new ArrayList<Answer>();
            for (Answer answer : answersSel) {
              Answer ans = null;
              try {
                ans = storeAns.findModelWithKey(String.valueOf(answer.getId()));
              } catch (Exception e) {}
              if (ans != null) {
                ans.setAgent(answer.getAgent());
                ansSelList.add(ans);
              }
            }
            gridAnswer.getSelectionModel().select(ansSelList, false);
          }


          @Override
          public void onFailure(Throwable caught) {}
        });

I Logging select row:
service.logString("sm onSelectChange: "+ model.getId() , cl);

when exists: viewAns.groupBy(cc1);
we have log:

03.11.2015 13:07:34.541 [ProtectServiceImpl] - sm onSelectChange: 4
03.11.2015 13:07:35.684 [ProtectServiceImpl] - sm onSelectChange: 8
03.11.2015 13:07:36.965 [ProtectServiceImpl] - sm onSelectChange: 9
03.11.2015 13:07:38.253 [ProtectServiceImpl] - sm onSelectChange: 10
03.11.2015 13:07:39.566 [ProtectServiceImpl] - sm onSelectChange: 11
03.11.2015 13:07:40.807 [ProtectServiceImpl] - sm onSelectChange: 13
03.11.2015 13:07:42.116 [ProtectServiceImpl] - sm onSelectChange: 19
03.11.2015 13:07:43.314 [ProtectServiceImpl] - sm onSelectChange: 21
03.11.2015 13:07:44.488 [ProtectServiceImpl] - sm onSelectChange: 22
03.11.2015 13:07:45.621 [ProtectServiceImpl] - sm onSelectChange: 27
03.11.2015 13:07:46.763 [ProtectServiceImpl] - sm onSelectChange: 30
03.11.2015 13:07:47.935 [ProtectServiceImpl] - sm onSelectChange: 32
03.11.2015 13:07:49.110 [ProtectServiceImpl] - sm onSelectChange: 35
03.11.2015 13:07:50.277 [ProtectServiceImpl] - sm onSelectChange: 36
..............................

each row select ~ 1.5 sec


when i comment (grid without group)
// viewAns.groupBy(cc1);
we have log:

03.11.2015 13:13:04.177 [ProtectServiceImpl] - sm onSelectChange: 8
03.11.2015 13:13:04.177 [ProtectServiceImpl] - sm onSelectChange: 4
03.11.2015 13:13:04.177 [ProtectServiceImpl] - sm onSelectChange: 9
03.11.2015 13:13:04.181 [ProtectServiceImpl] - sm onSelectChange: 11
03.11.2015 13:13:04.181 [ProtectServiceImpl] - sm onSelectChange: 19
03.11.2015 13:13:04.181 [ProtectServiceImpl] - sm onSelectChange: 13
03.11.2015 13:13:04.181 [ProtectServiceImpl] - sm onSelectChange: 10
03.11.2015 13:13:04.181 [ProtectServiceImpl] - sm onSelectChange: 21
03.11.2015 13:13:04.185 [ProtectServiceImpl] - sm onSelectChange: 30
03.11.2015 13:13:04.185 [ProtectServiceImpl] - sm onSelectChange: 27
03.11.2015 13:13:04.185 [ProtectServiceImpl] - sm onSelectChange: 32
03.11.2015 13:13:04.185 [ProtectServiceImpl] - sm onSelectChange: 22
03.11.2015 13:13:04.185 [ProtectServiceImpl] - sm onSelectChange: 35
03.11.2015 13:13:04.185 [ProtectServiceImpl] - sm onSelectChange: 36
03.11.2015 13:13:04.187 [ProtectServiceImpl] - sm onSelectChange: 37
....................

GXT 3.1.1
browser: Chrome