Grid grouping missing rows

[a2m developerParticipant]

I have a list of 7 rows.

Case 1
I group by a common value (all rows)
Group only has 6 rows, but has count of 7 in group header.

image link: https://drive.google.com/file/d/1xYviaSi1HnL7gHgRaCkn2-3NozqQ-zTF/view?usp=sharing

Case 2
I group by unique value (all groups should have 1 row)
Can see all the groups when closed
Expand any group and rows disappear

Image link: https://drive.google.com/file/d/1b9kbQJ7ZPmGhwfvjn0k4xyG40MHSx345/view?usp=sharing

Image link: https://drive.google.com/file/d/1uH_wfgiXPnqXQcJHphFvG6eCnIPByJfs/view?usp=sharing

It seems that the height of the visible area on the grid is not updating to accommodate the change in grouping.

My Environment
Angular 5.2.5
Jqwidgets 5.5.0

My Source

this.source = new jqx.dataAdapter(
      {

        root: "data.data",
        record: "content",
        id: this.id,
        type: 'GET',
        url: url,
        unboundmode: true,
        mapChar: ',',
        datatype: 'json',
        datafields: this.dataFields,
        ref: this, //reference to list.component
        autoBind: false,
        processData: this.processApiLink.bind(this),
        beforeLoadComplete: this.beforeLoadComplete.bind(this),
        loadError: function (jqXHR, status, error) {
          this.listService.standardErrorHandler(error);
        },
        loadComplete: function (data) {
          this.totalrecords = data.count;
        }
      });

My Grid Componenet

this.grid.createComponent({
      columns: this.columns,
      source: this.createSource(),
      virtualmode: true,
      width: this.options.width,
      height: this.options.height,
      selectionmode: this.options.selectionmode,
      groupable: this.options.groupable,
      groups: (this.groups ? this.currentGroups : []),
      //groupsexpandedbydefault: this.options.groupsexpandedbydefault,
      groupsexpandedbydefault: false,
      autoshowfiltericon: this.options.autoshowfiltericon,
      altrows: true,
      //autorowheight: (this.groups ? false : true),
      autorowheight: false,
      rowsheight: 30,
      autoheight: false,
      filterable: this.options.filterable,
      sortable: this.options.sortable,
      pageable: true,
      pagesize: (this.widgetData['PAGINATION'] ? this.widgetData['PAGINATION'] : 50),
      pagesizeoptions: [25, 50, 100, 500, 1000],
      pagermode: 'default',
      columnsreorder: this.options.columnsreorder,
      columnsautoresize: true,
      columnsresize: this.options.columnsresize,
      enableellipsis: false,
      theme: this.theme,
      scrollmode: 'logical',
      horizontalscrollbarstep: (this.columns.length > 10 ? 200 : 10),
      horizontalscrollbarlargestep: (this.columns.length > 10 ? 1000 : 50),
      showaggregates: (Object.keys(this.aggregates).length > 0 ? true : false),
      showgroupaggregates: this.options.showgroupaggregates,
      showstatusbar: (Object.keys(this.aggregates).length > 0 ? true : false),
      rendergridrows: function (a) {
        return a.data;
      },
    });

Please Help… You’re my only hope. 😉

[a2m developerParticipant]

I was able to hack it to see all the rows. On Group Changed and Group Expanded events I added:
this.source.totalrecords = this.source.totalrecords + (this.grid.getrootgroupscount() * 2);

[a2m developerParticipant]

Yep.. hack didn’t work completely. Now I can’t select multiple rows, unless I remove the group and add it back in. Strange. Help please!

[HristoParticipant]

Hello a2m developer,

I saw that you try to use grouping in combination with virtualmode.
Unfortunately, such a combination is not possible.
Please, take a look at this topic.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[a2m developerParticipant]

I found a way. Seems to be working, but I am not using the editing feature as is the topic you referenced.

[sonjabParticipant]

hi a2m developer,

do you mind share your solution? I also have the same issue with you and cannot remove the virtualmode for some reason.

[Author]

Posts