No announcement yet.
  • Filter
  • Time
Clear All
new posts

    TreeGrids with groups


    I am using SmartClient Version: v12.1p_2020-08-16/Enterprise Development Only (built 2020-08-16)
    I have a TreeGrid which in addition to having a tree, to also have it grouped by a field.
    Using the example from

      ID: "employeeTree",
        width: 500,
        height: 400,
        dataSource: "employees",
        groupByField: 'Gender',
        autoFetchData: true
    It doesn't show any records.

    Please advise.
    Last edited by dw_qservices; 11th Sep 2020, 07:05. Reason: include smartclient version

    We're not sure what you're expecting to happen. When you group an ordinary ListGrid, group nodes are built to gather together records as leaves that share the same group value, and then the group nodes are assembled into a tree. If you're grouping on multiple fields, there may be more than one level of group nodes. On the other hand, in a TreeGrid, your data itself starts out representing a tree - such as the "employees" DataSource records.

    Were you expecting the code above to show separate trees under each group, or perhaps show groups within all folders that have only leaves? In any event, that configuration isn't currently supported. We'll try to clarify the docs to point that out.


      Thanks for your quick response. I was expecting to show seperate trees under each group.
      I have trees grouped by project. Is it possible to have different styles per record type, so that the project is displayed differently than the rest of the tree? I am having multiple columns in the treegrid, but for the project records, don't want to show the columns. Also I would like to disable the possibility to drag-out/in and reorder the project nodes, while allowing it for the regular tree nodes.

      Please advice.
      Last edited by dw_qservices; 14th Sep 2020, 04:20.


        grid.groupNodeStyle controls how groups look. Set listGridRecord.canDrag to false to disallow dragging of specific records.


          Thanks for your response. The canDrag option worked fine. However I don't think the grid.groupNodeStyle is what I am exactly looking for. I need to set different styles and not show certain columns for different levels in the tree. I need something like the example below.
          Click image for larger version

Name:	grouped_tree example.png
Views:	9
Size:	62.4 KB
ID:	263591


            While overrides of getCellStyle() and getCellCSSText() will allow you to provide whatever CSS you want for any row (including group rows), you are also showing here a weird mixture of two different styles of showing hierarchy with different icons. There are two ways to achieve this:

            1. use a TreeGrid instead, and override getIcon() to switch between the tow different styles of icons as you want here (in addition to applying styling for the borders, through the mechanisms already mentioned)

            2. use a SectionStack to show the groups, then a TreeGrid to show further hierarchy within each section. This won't scale especially well for large numbers of groups, as obviously you'll have a SectionHeader and TreeGrid component for every group.