ReefKey Software Inc

While writing Sunspot, I incorporated an algorithm that would remove all the columns of a data grid and add them again on a per search basis. This added flexibility for the Solr client but introduced a small problem. Whenever you delete a column or columns (via the data provider) the width of the column is not remembered. This is especially true is the user has customized the width of the column and is then redefining their search which new columns.

To solve this, I created a simple associative array with the key being the name of the column. So as the column is added to the data grid, its width is set to the value found in the associative array. If the value is not found in the associative array, then the width is set by flash. Here is the code that looks the entries up to see of a value exits:

    /* set the column size */
    if(cSize[tempFieldList[i]]==null){
        tc.width=this.fieldList.(@name==tempFieldList[i]).@width;
    }else{
        tc.width=cSize[tempFieldList[i]];
    } 
    tempColumns.push(tc);   

In this case the associative array cSize contains mapping of column sizes to column widths and the tempFieldList is an array of column names to be added to the data grid. So, what this if statement is saying is, "if a key with the name tempFieldLIst[i] exists in the cSize array, set the width of the column to that value". If the value doesn't exits, the width property is not set ( Flex will automatically set the size). Here is an example view of the cSize array:

Adding values to the cSize Array

To add values to the cSize array, we need to tell Flex to listen for re-size events on the data grid. If you're not familiar with events, now is the time to checkout the Flex manual. Here is the code needed to create the data grid and listen for the column width change event:

<mx:DataGrid itemClick="showDebug(event)" columnStretch="saveSizes(event)" width="100%" height="80%" id="solrDataGrid" dataProvider="{solrResults}" />

The columnStrectch Event will be triggered whenever the user re-sizes a column. Here is the method definition for saveSizes:

            public function saveSizes(event:DataGridEvent):void{
                
                var columns:Array = this.solrDataGrid.columns;
                cSize[columns[event.columnIndex].headerText]=columns[event.columnIndex].width;
                
            }

This two line function is easy to explain. When the column is re-sized by the user, an event is passed to this method. In this case, the event is a DataGridEvent. This DataGridEvent has all the information we need to about the column which was just re-sized. This first line gets the list of columns from the data grid. This is important because we need to know the name of the column which was re-sized. This name is the key of our cSize array entry. The second line is a bit more complicated: Lets break this up into Left Hand Side (LHS) and Right Hand Side (RHS) for simplicity sake.

LHS:

event.columnIndex is the array index of the column which was just re-sized. When used as an index to the columns array, we are able to access the object which is the actual column object which was resized:

columns[event.columnIndex]

Now that we have the column object, to get the actual column name we access the headerText property. So, columns[event.columnIndex].headerText is the name of the column and the key value of the cSize associative array.

RHS

The right hand side of this equation is much simpler. Here we are using the same index (passed to use via the DataGridEvent and accessing the index of the array column which was re-sized:

columns[event.columnIndex]

Now, we just need to get its width property:

columns[event.columnIndex].width;

Re-visiting the equation:

cSize[columns[event.columnIndex].headerText]=columns[event.columnIndex].width;

We can see that we are adding or updating a value of the associate array to the width of the recently resized column.

Conclusion

This is a simple article which makes life a little easier for end users of your data grid. Nothing fancy, but effective. This technique is use in sunspot which is available here.

--Keith Lee