Greg Brown's Blog

Creating Fixed-Column Tables in Pivot

I came across this Flex demo the other day that demonstrates the use of fixed columns in a Flex data grid:

I wanted to see how this might work in Pivot. Here's what I came up with:

This is the WTKX source I used to create the table. One TableView and TableViewHeader set is placed in the scroll pane's row header and corner to create the fixed column, and another set is placed in the view and column header to create the scrollable columns. The same data is used to drive both tables:

<Border styles="{padding:0, borderColor:'#cccac2'}"
    xmlns:wtkx="http://pivot.dev.java.net/wtkx/2008" xmlns="pivot.wtk">
    <ScrollPane horizontalScrollBarPolicy="fillToCapacity">
        <view>
            <TableView wtkx:id="primaryTableView" selectMode="single"
                styles="{selectionColor:'#ffffff', inactiveSelectionColor:'#ffffff',
                    selectionBackgroundColor:'#14538B', inactiveSelectionBackgroundColor:'#14538B',
                    showHighlight:false}">
                <columns>
                    <TableView.Column name="colA" headerData="Column A"/>
                    <TableView.Column name="colB" headerData="Column B"/>
                    <TableView.Column name="colC" headerData="Column C"/>
                </columns>
                <tableData wtkx:id="tableData">
                    <row name="User 1" colA="1.A" colB="1.B" colC="1.C" />
                    <row name="User 2" colA="2.A" colB="2.B" colC="2.C" />
                    <row name="User 3" colA="3.A" colB="3.B" colC="3.C" />
                    <row name="User 4" colA="4.A" colB="4.B" colC="4.C" />
                    <row name="User 5" colA="5.A" colB="5.B" colC="5.C" />
                    <row name="User 6" colA="6.A" colB="6.B" colC="6.C" />
                    <row name="User 7" colA="7.A" colB="7.B" colC="7.C" />
                    <row name="User 8" colA="8.A" colB="8.B" colC="8.C" />
                </tableData>
            </TableView>
        </view>
        <columnHeader>
            <TableViewHeader wtkx:id="primaryTableViewHeader" tableView="$primaryTableView"/>
        </columnHeader>
        <rowHeader>
            <TableView wtkx:id="fixedTableView" tableData="$tableData" selectMode="single"
                styles="{selectionColor:'#ffffff', inactiveSelectionColor:'#ffffff',
                    selectionBackgroundColor:'#14538B', inactiveSelectionBackgroundColor:'#14538B',
                    showHighlight:false, includeTrailingVerticalGridLine:true}">
                <columns>
                    <TableView.Column name="name" headerData="Name"/>
                </columns>
            </TableView>
        </rowHeader>
        <corner>
            <TableViewHeader wtkx:id="fixedTableViewHeader" tableView="$fixedTableView"
                styles="{includeTrailingVerticalGridLine:true}"/>
        </corner>
    </ScrollPane>
</Border>

The Pivot version does require a little more code than the Flex version, primarily to keep the selection state of the two tables in sync - the Java source for the demo is here. The gradients used to create the look and feel of the Flex version also look a little nicer. However, scrolling and column resizing in the Pivot table is much smoother. Additionally, the Pivot version addresses some issues raised by readers of the original article:

"Is there a way to not have the scrollbar under the first column so the scrollbar component does not span the whole datagrid but just the columns that can scroll? This would be better for the user."

"Is there a way to remove that black vertical grid line. Tried a number of ways, sounds impossible."

So, it wasn't especially tough to implement, and it compares pretty favorably overall to the Flex version.

Comments

• Hi Greg,

  RE: "Is there a way to remove that black vertical grid line. Tried a number of ways, sounds impossible."

  Create a class as below:

  package
  {
  import mx.skins.halo.DataGridHeaderSeparator;

  public class DataGridHeaderSeparator extends mx.skins.halo.DataGridHeaderSeparator
  {
  override public function get measuredWidth():Number
  {
  return 0;
  }
  
  override public function setActualSize(newWidth:Number, newHeight:Number):void
  {
  graphics.clear();
  }
  }
  }

  Then in your DataGrid params use:

  verticalLockedSeparatorSkin="DataGridHeaderSeparator"

  That should do the trick :)

  Cheers,

  Simon

  newtriks dot com

  Posted by: newtriks on December 10, 2008 at 02:23 PM

• Hi Simon,
  Thanks for the advice, but I wasn't actually asking that question myself - that was a quote from a comment on the original article (http://blog.flexexamples.com/2007/08/15/locking-columns-in-a-horizontally-scrolling-datagrid-control). You may want to post your suggestion there.
  Greg

  Posted by: gkbrown on December 10, 2008 at 05:35 PM

• Ooops :P will do. Sorry about that Greg!

  Posted by: newtriks on December 11, 2008 at 02:41 AM

This work is licensed under a Creative Commons License.