1 Reply Latest reply on Feb 22, 2007 10:48 PM by jpwrunyan

    Grouped DataGrid Columns

    Josh Johnson Level 1
      I'm trying to find an example of a dataGrid that supports the grouping of columns under a common heading. This is usually done by creating a second header row above the existing row and having the group name span the columns which belong to that group. Has anyone seen, or better yet created something like this?
        • 1. Grouped DataGrid Columns
          jpwrunyan Level 1
          Here's what I did:

          1) made a header renderer with a VBox and HBox:
          <VBox>
           <Label text="Main Header" />
           <HBox>
            <Label text="A" />
            <VRule />
            <Label text="B" />
            <VRule />
            <Label text="C" />
           </HBox>
          </VBox>

          *not shown: height and width settings. be sure to set those appropriately or your header will be HUGE.

          2) simimarly, make a cell renderer using HBox:
          <HBox>
           <Label="{data.a}" />
           <VRule />
           <Label text="{data.b}" />
           <VRule />
           <Label text="{data.c}" />
          </HBox>

          *not shown: height/width settings, interface implementation (<- perhaps not necessary)

          I think that will get you off on the right track.

          There is one drawback: a blank row will not include a blank version of this cell renderer so the lines drawn by the VRules will not display. This makes it look like the sub-header lines are cut off in the middle of the grid if the data count doesn't fill the grid's rowCount. If that last paragraph isn't clear, implement it and you'll see what I mean right away. I haven't found a solution to this. Please post it if you find it on your own.

          Finally, you may have to set the height and padding values very carefully and explicitely to get the display effect you are looking for.