Log in to start a topic

Expand/Collapse Feature with Conditional Row in Flex Grid Layout

Posted by: nilesh_nichal on 19 May 2025, 9:35 am EST

  • nilesh_nichal

    Posted 19 May 2025, 9:35 am EST - Updated 19 May 2025, 9:40 am EST

    Hi Team,

    We are looking to implement a feature where a section can be expanded or collapsed, and where only a single row is displayed based on specific conditions related to a column’s value and source — as illustrated in the attached image.

    Our current layout is built using a flex grid. Could you please advise whether this functionality can be achieved using flex grid? If not, we would appreciate your recommendation on the most suitable layout approach or component library to implement this effectively.

    Additionally, it would be very helpful if you could provide a sample implementation or example to guide us.

    Looking forward to your suggestions.

    928×394 5.19 KB

  • vivek.pannu

    Posted 20 May 2025, 7:40 am EST

    Hi Nilesh,

    As per the current FlexGrid structure, it would not be possible to achieve the exact same layout as in the attached image with the expand/collapse feature. However, the expand/collapse feature is available in FlexGrid with detail provider. Here’s the demo sample for your reference, you can take a look and use it if it fits your requirements well - https://developer.mescius.com/wijmo/demos/Grid/Master-Detail/NestedGrids(RowDetail)/angular

    Regards

  • nilesh_nichal

    Posted 20 May 2025, 8:27 am EST

    Thank you for your response. We’re on board with the direction provided, but we would appreciate some additional clarification and an example implementation. Specifically, we’d like to understand how the expanded row can display all the information across its respective columns when expanded, including options for “Expand All” and “Collapse All.”

    For eg : If we expand then data for Name and Description should be shown and not the other grid which we are doing in the above link.

    Thanks

  • vivek.pannu

    Posted 21 May 2025, 7:54 am EST

    Hi Nilesh,

    While using ‘FlexGridDetailProvider’ in FlexGrid for a master-detail grid layout, FlexGrid adds a completely empty row below the target row when expanded. This detail row will not have any columns however, you can customize the content of this detail row as per your needs and insert any content that you want to show in the detail row. In the demo sample we shared, you’ll find two flexgrids. The first grid shows how you can insert custom HTML in the detail row, and the second grid shows how you can add another flexgrid in the detail row, if needed.

    You’ll have to customize the content as per your requirements. You can take a look at the demo sample for implementation and try adding your content to the detail row. In case, you face any issues, you can let us know.

    Here’s the API link for your reference, if needed - https://developer.mescius.com/wijmo/api/classes/Wijmo_Angular2_Grid_Detail.Wjflexgriddetail.html

    Please note that, it would not be possible the achieve the exact same layout as you shared in the screenshot previously. If you decide to have a layout that could be compatible with master-detail grid layout(i.e some data in columns in the master row, and some other data displayed below the parent row with custom styling as per your needs), then it could be a good fit to achieve your desired results.

    Regards

  • nilesh_nichal

    Posted 21 May 2025, 9:53 am EST

    Hi Team,

    Thank you for the clarification.

    Could you please create an example implementation and share it with us for reference? This would help us better understand how to structure the detail row content based on our specific requirements.

    Looking forward to your sample implementation.

  • vivek.pannu

    Posted 22 May 2025, 8:20 am EST

    Hi Nilesh,

    Please find attached the master-detail demo sample for your reference. You can download the sample and take a look at the master detail implementation. We also found another solution for your requirements, which we missed last time. You can also use TreeGrid to display a similar layout to what you need. We have attached a sample for that also. It seems to be a better fit for your requirements. The treeGrid sample is just for demonstration purposes, that how you can implement parent-child layout in flexgrid and insert custom textboxes in the cells if needed. We have added static text to the input boxes, you can update it as per your needs. We have added necessary comments in the sample for your reference.

    You can also refer to the demo samples of TreeGrid here - https://developer.mescius.com/wijmo/demos/Grid/TreeGrid/EditableTreeGrid/angular

    API link - https://developer.mescius.com/wijmo/api/classes/Wijmo_Grid.Flexgrid.html

    Please note that, we have downloaded and modified the same demo sample as in the above link. You can also download the demo sample for offline reference if needed by clicking the ‘Zip’ icon above the code editor on our website demo samples. Please note that, you’ll have to customize the controls as per your requirements. You can gain a better understanding of the specific controls by exploring the documentation and API of the respective control on our site. You can also take a look at other demo samples for TreeGrid and other Wijmo controls by using the navigation pane on the left side on the website. You’ll get a complete overview of the features provided by the Wijmo controls there.

    In case, you still face any issues, while implementing or integrating the Wijmo control in your project, please let us know.

    Regards

    Grid_Master-Detail_NestedGrids(RowDetail)_Angular (1).zip

    Grid_TreeGrid_EditableTreeGrid_Angular.zip

  • nilesh_nichal

    Posted 23 May 2025, 4:57 am EST - Updated 23 May 2025, 5:02 am EST

    Hi Team,

    Thank you for your response.

    Just one more thing—could you please make a change to merge the cells in the “Name” and “Rate” column, as shown in the below screenshot?

    800×338 25.6 KB

  • vivek.pannu

    Posted 26 May 2025, 8:28 am EST

    Hi Nilesh,

    You’ll have to use a custom merge manager for the grid to implement this type of merging. Please refer to the attached sample demonstrating the same. Please note that, we have added a custom merge manager class in ‘customMergeManager.ts’ file and also set the ‘allowMerging’ property on the columns whose cells should be merged. We have also used ‘merged-cells’ in cssClass for those columns and added some styles to display the content at the center in the merged cells. We have prepared the custom merging logic, assuming that there will be only a single level of hierarchy in the grid rows, you may need to update the code as per your project requirements.

    You can also refer to the following demo samples for a better overview of the merging cells in the grid - https://developer.mescius.com/wijmo/demos/Grid/Merging/CustomMerging/angular

    Regards

    Grid_TreeGrid_Updated.zip

  • nilesh_nichal

    Posted 28 May 2025, 5:57 am EST - Updated 28 May 2025, 6:04 am EST

    Hi Team,

    Thank you for your response. We were able to achieve our solution, but we’re encountering one issue.

    When a grouping row has no children (for example, when all related objects are removed from the check array), it gets incorrectly merged with another row. You can replicate this issue by using the following data in your app.data.ts file.

    Our expectation is that if a node has no children, only the parent node should be visible, and it should not merge with any other row.

    Please let us know how this can be resolved.

    import { Injectable } from "@angular/core";
 
@Injectable()
export class DataService {
  getWorkers() {
    return [
      {
        name: "Jack Smith",
        hours: 40.0,
        rate: 15.0,
        checks: [
          { type: 1, hours: 30.0 },
          { type: 2, hours: 510.0 },
          { type: 3, hours: 5.0 },
          { type: 4, hours: 20.0 },
          { type: 5, hours: 20.0 },
        ],
      },
      {
        name: "Mack Smith",
        hours: 40.0,
        rate: 100.0,
        checks: [],
      },
      {
        name: "Jane Smith",
        hours: 40.0,
        rate: 15.0,
 
        checks: [
          { name: "hourly", type: 2, hours: 30.0, rate: 15.0 },
          { name: "overtime", type: 2, hours: 10.0, rate: 20.0 },
          { name: "bonus", type: 2, hours: 5.0, rate: 30.0 },
          { name: "hourly", type: 2, hours: 20.0, rate: 18.0 },
          { name: "overtime", type: 2, hours: 20.0, rate: 24.0 },
        ],
      },
    ];
  }
}

    651×577 6.85 KB

  • vivek.pannu

    Posted 29 May 2025, 7:28 am EST

    Hi Nilesh,

    We have updated the custom merge manager class, applied restrictions not to merge the level 0 rows in the treegrid. Please refer to the updated sample for the same.

    Please note that, the row expand icon is not shown on the rows that do not have any children; hence, the expand icon will not be visible on the level 0 row, also, if it doesn’t have any children to expand.

    Regards

    updatedSample.zip

  • nilesh_nichal

    Posted 6 June 2025, 9:43 am EST - Updated 6 June 2025, 9:48 am EST

    Hi Team,

    Thank you for your response.

    We’re now able to implement our solution. Just one more thing—we’d like to know how to disable or hide the icon for a grouped row. Let me know how to do it with condition based hide

    Like in below screenshot, for the name column we have expand/collapse icon for Jack smith and icon is hidden for Mack Smith(you can assume the condition is based on rate, like if rate > 90 than icon is hidden, or any other condition depend on our use case)

  • vivek.pannu

    Posted 9 June 2025, 3:12 am EST

    Hi Nilesh,

    You can handle the ‘formatItem’ event of the flexgrid for this purpose. You can remove the expand/collapse icon from the cells based on a custom condition as per your needs. Please refer to the updated sample for the same. In the sample, the expand/collapse icon is removed for the group rows whose hours are greater than 90.

    Regards

    updatedSample2.zip

Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels

  • © 2023 MESCIUS USA, Inc. All Rights Reserved.  ·  1.800.858.2739

    All product and company names herein may be trademarks of their respective owners.