Need to Hide Group Toggle Icon When grpPath is null

Need to Hide Group Toggle Icon When grpPath is null

Posted by: nilesh_nichal on 12 June 2025, 6:06 am EST

• 

  nilesh_nichal

  • Post Options:
  • Link
    Copy

  Posted 12 June 2025, 6:06 am EST - Updated 12 June 2025, 6:13 am EST

  Hi Team,

  I’m working with a dataset structured like the following (example shown below). As seen in the attached screenshot, some records have a grpPath value (e.g., ‘Localized grp’), while others have grpPath: null.

  public data = [
        {
          grpPath: null,
          path: 'About',
          source: 'S-Catalog upload to database from file on 05-27-25 02:02 PM',
          target: 'T-Catalog upload to database from file on 05-27-25 02:02 PM',
          attritutes: [],
          values: [],
          approve: true,
          isGrup : false
        },
        {
          grpPath: null,
          path: 'About_Prod#0',
          source: 'S-Catalog upload to database from file on 05-27-25 02:02 PM',
          target: 'T-Catalog upload to database from file on 05-27-25 02:02 PM',
          attritutes: [],
          values: [],
          approve: true,
          isGrup : false
        },
        {
          grpPath: null,
          path: 'About_Prod#1',
          source: 'S-Catalog upload to database from file on 05-27-25 02:02 PM',
          target: 'T-Catalog upload to database from file on 05-27-25 02:02 PM',
          attritutes: [],
          values: [],
          approve: true,
          isGrup : false
        },
        {
          grpPath: null,
          path: 'Description',
          source: 'S-Catalog upload to database from file on 05-27-25 02:02 PM',
          target: 'T-Catalog upload to database from file on 05-27-25 02:02 PM',
          attritutes: [],
          values: [],
          approve: true,
          isGrup : false
        },
        {
          grpPath: 'Localized grp',
          path: 'Prod_desc',
          source: 'GS_CA',
          target: null,
          attritutes: [],
          values: [],
          approve: true,
          isGrup : true
        },
        {
          grpPath: 'Localized grp',
          path: 'Multi_prod_desc#0',
          source: 'GM_CA1',
          target: null,
          attritutes: [],
          values: [],
          approve: true,
          isGrup : true
        },
        {
          grpPath: 'Localized grp',
          path: 'Multi_prod_desc#1',
          source: 'GM_CA2',
          target: null,
          attritutes: [],
          values: [],
          approve: true,
          isGrup : true
        }
      ]

  Currently, a group toggle icon is shown even when grpPath is null. However, I want to only show the toggle icon when grpPath has a non-null value (i.e., the row is part of a logical group like “Localized grp”). The toggle is working as expected when grpPath has a value, but it shouldn’t be shown otherwise.

  Could you please guide me on how to conditionally hide the toggle icon for items with grpPath: null?

  Please provide a working StackBlitz example to demonstrate the implementation, in Angular framework.

  Thanks

  

  1209×315 85.9 KB

• 

  vivek.pannu

  

  • Post Options:
  • Link
    Copy

  Posted 12 June 2025, 8:35 am EST

  Hi Nilesh,
  
  We are assuming that you are using the FlexGrid control and have applied grouping in the grid on the ‘grpPath’ property according to the data and screenshot you shared. We are preparing a sample as per your description in which the group toggle icon will be hidden for the groups whose ‘grpPath’ is null. We will share the sample with you soon.
  
  Please note that, if we hide the group toggle icon from these group rows, then the group row will be totally empty, you can imagine it with the screenshot you shared, when the group toggle icon is removed from the top group row, it will be an empty row, probably useless. For now, will show some dummy text like ‘Group Name Not Available’ and hide the group toggle icon in that row in the sample. In case you want to handle it some other way or if there is something we missed, please let us know. We will share the sample with you soon.
  
  Regards

• 

  vivek.pannu

  

  • Post Options:
  • Link
    Copy

  Posted 13 June 2025, 2:35 am EST

  Hi Nilesh,
  
  You can handle the ‘formatItem’ event of the FlexGrid to remove the group expand/collapse icon for the group row whose ‘grpPath’ is null. Please refer to the following sample demonstrating the same - https://stackblitz.com/edit/angular-ivy-pybgdhcj?file=src%2Fapp%2Fapp.component.ts
  
  Please note that, we have prepared the sample according to what we described in our previous comment. You can make any changes on your end as required.
  
  Regards