Grouping two columns show empty rows

[Pablo]

Hey, I have the following code:

                        <ejs-grid id="GridListados"

                                  toolbarClick="toolbarClick"

                                  toolbar="@(permisos.botonesToolbar)"

                                  allowPaging="true"

                                  allowSorting="true"

                                  allowResizing="true"

                                  allowGrouping="true"

                                  enablePersistence="true"

                                  beforePrint="beforePrintBarCode"

                                  beforePdfExport="beforePDFBarCode"

                                  showColumnMenu="true"

                                  allowFiltering="true"

                                  allowExcelExport="@(permisos.permisoExportar)"

                                  allowPdfExport="@(permisos.permisoExportar)"

                                  enableHover="true"

                                  created="created"

                                  actionFailure="actionFailure"

                                  actionComplete="actionComplete">

                            <e-grid-groupSettings enableLazyLoading="true"></e-grid-groupSettings>

                            <e-grid-pagesettings pageCount="10" pageSize="25"></e-grid-pagesettings>

                            <e-grid-filterSettings type="Excel"></e-grid-filterSettings>

                            <e-grid-editSettings allowAdding="@(permisos.permisoInsertar)"

                                                 allowDeleting="@(permisos.permisoEliminar)"

                                                 allowEditing="@(permisos.permisoEditar)"

                                                 allowEditOnDblClick="false" showDeleteConfirmDialog="true"></e-grid-editSettings>

                            <e-grid-selectionsettings checkboxMode="ResetOnRowClick" type="Multiple"></e-grid-selectionsettings>

                        </ejs-grid>

I'm trying to enable grouping by column, but when I try to visualize a second group it doesnt show any information. The grid only shows the title of the first grouping.

Attach two files, one with one column and another with two columns

Attachment: png2jpg_ae58deb9.zip

[Vignesh Sivagnanam]

Hi Pablo 

  

Greetings from Syncfusion support 

  

Based on you query you have faced issue while grouping the second column in the grid. So, we have prepared sample with your code example, but we are not able to reproduce the reported issue at our end. 

  

Sample : https://www.syncfusion.com/downloads/support/forum/165647/ze/Grid-Grouping-1064852202.zip 

  

Please Share the below details to validate further on the issue, 

  

1. If possible, replicate the issue in the above sample or share he issue reproduced sample. 

  

2. Explain the exact issue you faced using Screenshot or Video demonstration. 

  

3. Share the full grid rendering code. 

  

4. Syncfusion package version. 

  

Note : In your attachment, there is no files are available. So please share the proper files regarding the reported issue. 

  

Please share the above details to provide solution as soon as possible. 

  

Regards 

Vignesh Sivagnanam 

[Pablo]

Hi Vignesh Sivagnanam, thank you in advance

I'm doing a query with double grouping, so the first one is fine but the second not. Its doesnt show the second level, so I cant to expand and show the information.

I attach the photos correctly and all the code that I can share.

The project that I share doesnt build because I cant share the whole project, sorry.

Thanks again!

Attachment: GridGroupingResponse_373f4e6f.zip

[Pablo]

Photos

Attachment: Syncfusion_8cf6733c.zip

[Pablo]

Hello again! I have another issue related with the last one. I want to grouping the data before requests and dynamically. I bring the data from database and I added to the grid in the created function. The result is a double tag with the group field correctly grouped. I'm trying to replicate this issue with stackblitz and this is code of the index.js:

StackBlitz link

https://ej2.syncfusion.com/javascript/demos/#/material/grid/grouping.html

I attach a picture about the double tag

ej.base.enableRipple(true);

var refresh;

var alertDialogObj = new ej.popups.Dialog({

  header: 'Grouping',

  content: 'Grouping is disabled for this column',

  showCloseIcon: false,

  target: '.control-section',

  buttons: [

    {

      click: alertDlgBtnClick,

      buttonModel: { content: 'OK', isPrimary: true }

    }

  ],

  width: '300px',

  visible: false,

  animationSettings: { effect: 'None' }

});

alertDialogObj.appendTo('#alertDialog');

function alertDlgBtnClick() {

  alertDialogObj.hide();

}

var grid = new ej.grids.Grid({

  dataSource: window.inventoryData,

  allowPaging: true,

  allowSorting: true,

  allowResizing: true,

  allowGrouping: true,

  enablePersistence: true,

  height: 400,

  columns: [

    { field: 'Inventor', headerText: 'Inventor Name', width: 160 },

    {

      field: 'NumberofPatentFamilies',

      headerText: 'No of Patent Families',

      width: 195,

      allowFiltering: false,

      allowOrdering: false,

      allowSearch: false,

      allowGrouping: true,

      autoFit: false,

      visible: true,

      AgregateColumn: false

    },

    {

      field: 'Country',

      headerText: 'Country',

      width: 120,

      allowFiltering: false,

      allowOrdering: false,

      allowSearch: false,

      allowGroup: false,

      autoFit: false,

      visible: true,

      AgregateColumn: false

    },

    {

      field: 'Active',

      headerText: 'Active',

      width: 120,

      allowFiltering: false,

      allowOrdering: false,

      allowSearch: false,

      allowGroup: false,

      autoFit: false,

      visible: true,

      AgregateColumn: false

    },

    {

      field: 'Mainfieldsofinvention',

      headerText: 'Main fields of invention',

      width: 200,

      allowFiltering: false,

      allowOrdering: false,

      allowSearch: false,

      allowGroup: false,

      autoFit: false,

      visible: true,

      AgregateColumn: false

    }

  ],

  pageSettings: { pageCount: 5 },

  created: function() {

    grid.on('columnDragStart', columnDragStart, this);

    grid.groupSettings.columns = ['Country'];

  }

});

grid.appendTo('#Grid');

function columnDragStart(args) {

  if (args.column.field === 'Mainfieldsofinvention') {

    alertDialogObj.show();

  }

}

Attachment: doublegrouping_f8943f7e.zip

[Vignesh Sivagnanam]

Hi Pablo 

  

Thanks for the update 

  

Based on your query you have provide grouping columns in the created event to the grid. By default, in EJ2 Grid’s created event is triggered where the grid is rendered initially. If you have provided the columns and grouping columns in the created event cause some issue in the grid.  

  

To resolve the issue at your end we suggest you provide the columns to the grid at EJ2 Grid’s load event and provide the grouping columns in the dataBound event. 

  

Please review the below Code example and sample for your reference, 

  

var flag = true; 

  function dataBound(args) { 

    if (flag === true) { 

      flag = false; 

      var grid = document.getElementsByClassName('e-grid')[0].ej2_instances[0]; 

      grid.groupModule.groupSettings.columns = ['ShipCountry', 'CustomerID']; 

    } 

  } 

  function load() { 

    var grid = document.getElementsByClassName('e-grid')[0].ej2_instances[0]; 

    columns.forEach(column => { 

      grid.columns.push(column); 

    }); 

  } 

  

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/.net_core_sample-1832463279.zip 

  

Regards 

Vignesh Sivagnanam 

[Pablo]

Hello, thank you for your replay

The error still happen. The double grouping is still blank the second level and I have two error messages, removechild and appendchild of null

I attach two pictures

Attachment: Syncfusion_30eec3b2.zip

[Vignesh Sivagnanam]

Hi Pablo 

  

Thanks for the update. 

  

We checked in our sample, but we are unable to reproduce the reported issue at our end. For your convenience we have attached the sample at our end and please download the sample from the below link 

  

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/.net_core_sample-1832463279.zip  

  

If you still face the reported issue at your end, please replicate the issue that your faced in the above sample  

  

Please get back to us for further assistance, 

  

Regards 

Vignesh Sivagnanam