Angular grouped column not hidden

Angular grouped column not hidden

Posted by: seaninglis on 7 March 2022, 6:26 am EST

• 

  seaninglis

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 7 March 2022, 6:26 am EST

  Referring to the following sample:

  https://jscodemine.grapecity.com/sample/A6MAzr3zW0C8AQC0IFalMw/

  I’ve set [hideGroupedColumns] on the grid, and intialised the linked CollectionView to group on “size”.

  The grouping does take place, but the linked column isn’t hidden.

  If I remove the “Size” grouping and drag it back manually, the grouping takes place, and the column is hidden as I expect.

  Do I need to programattically apply the GroupDescription at a different part of the lifecycle. I’ve shifted it around but couldn’t seem to get it to work, including a setTimeout of 10s.

  Follow up: how can I ensure that the groups are automatically collapsed when I apply grouping?

• 

  sonu.pandey

  

  • Post Options:
  • Link
    Copy

  Posted 8 March 2022, 5:12 am EST

  Hello,

  You would be required to hide the columns manually pushed into the GroupDescription array. You may iterate over the GroupDescription array and set the visible property of each column to get the desired behavior. Please refer to the sample link below demonstrating the same:

  https://jscodemine.grapecity.com/share/DTBoY6LnBkCK_YfYMbnXDg/

  To collapse all the grouped rows you may call the collapseGroupsToLevel() method of FlexGrid and pass the level to which you want the grouped rows to be collapsed.

  API link: https://www.grapecity.com/wijmo/api/classes/wijmo_grid.flexgrid.html#collapsegroupstolevel

  Regards

• 

  seaninglis

  • Post Options:
  • Link
    Copy

  Posted 8 March 2022, 5:50 am EST

  Hi,

  Ach, no idea how I missed collapseGroupsToLevel(), thanks.

  That jscodemine link gives me a 404 when I visit it, but I get the idea and I’ll try it out.

  I’d have to say this strikes me as a bug though - it would seem obvious that the setting should be honoured.

  Thanks

  Sean

• 

  jamieshah24

  • Post Options:
  • Link
    Copy

  Posted 8 March 2022, 6:16 am EST

  I am writing down how you can resolve angular grouped -

  setting the following grid properties to:
  
  groupable: true,
  
  groups: [‘name’],
  
  showgroupsheader: false,
  
  $(“#jqxgrid”).jqxGrid(
  
  {
  
  width: 600,
  
  source: source,
  
  groupable: true,
  
  theme: theme,
  
  columns: [
  
  { text: ‘Company Name’, datafield: ‘CompanyName’, width: 250 },
  
  { text: ‘City’, datafield: ‘City’, width: 120 },
  
  { text: ‘Country’, datafield: ‘Country’ }
  
  Basically, depending on these, I have created the [url=https://www.exactlly.com/blog/index.php/questions-for-your-erp-implementation-partner/]best ERP partner in Kolkata and related things.
  
  ],
  
  groups: [‘City’],
  
  groupsrenderer: function (defaultText, group, state, params) {
  
  return “

  ” + group + “

  ”;
  
  }
  
  });

  $(“#jqxgrid”).jqxGrid(
  
  {
  
  width: 600,
  
  source: source,
  
  groupable: true,
  
  theme: theme,
  
  columns: [
  
  { text: ‘Company Name’, datafield: ‘CompanyName’, width: 250 },
  
  { text: ‘City’, datafield: ‘City’, width: 120 },
  
  { text: ‘Country’, datafield: ‘Country’ }
  
  ],
  
  groups: [‘Country’],
  
  hidegroupedcolumns: true
  
  });

  Hope this solution will help you properly,

• 

  sonu.pandey

  

  • Post Options:
  • Link
    Copy

  Posted 8 March 2022, 7:26 am EST

  Hello,

  Sorry for the mistake, Please find the correct sample link below:
  
  https://jscodemine.grapecity.com/share/chHl1aWXXEy5ndrCC13ujA/

  Regards

• 

  seaninglis

  • Post Options:
  • Link
    Copy

  Posted 8 March 2022, 7:34 am EST

  No problem. I’d already gone with

  
      this.PricelistGrid.columns.forEach(
        (c) =>
          (c.visible = !sortDescriptions.some((s) => s.property == c.binding))
      );
  
  

  but using grid.getColumn() in there will certainly makes it neater, thanks.