Many times, a bunch of things you ask for are not quite possible by just setting a few flags. Sometimes, these require extending our API, or otherwise customizing the product. Below is a list of such customizations (and some frequently asked questions) that we are publishing for the benefit of the community.

 

1) How can I draw a custom cell border?

  • Use the cell border function.

Screenshot:

Code:

CellBorderFunction.mxml (1.44 kb)

 

2)When I run my application, the print/preview/export/settings window looks weird, or the MultiSelectCombobox looks like buttons instead of checkboxes.

Screenshot:

  • This most often happens when you use modules. Fix is to add a blank copy of ExtendedDataGrid/ExtendedAdvancedDataGrid/FlexDataGrid in the top level application.

<grids:ExtendedDataGrid>
Or
<grids:ExtendedAdvancedDataGrid>
Or
<flxs:FlexDataGrid>

As an FYI, this same issue sometimes will cause errors like:

TypeError: Error #1007: Instantiation attempted on a non-constructor.
     at
mx.controls::PopUpButton/calcArrowButtonSize()[

OR

ArgumentError: Error #2004: Uno de los parámetros no es válido.
  at flash.display::Graphics/drawRect()

3) How can I add a custom right click menu item to a column?

  • Use the ContextMenu.MENU_SELECT event.

Code:

ColumnContextMenu.mxml (1.65 kb)

 

4)When I enter text into an editable cell, and hit return, the editor automatically opens up the cell immediately below it for editing. When we are done editing a cell, and close the edit session by hitting return or clicking elsewhere, we just want the editing to stop - no auto-advance. How can I prevent this auto-advance feature from happening when the current editing session ends?

  • This is standard behavior on the SDK datagrids as well. You can potentially do something like listen for itemEditEnd, and do a callLater endEdit.

itemEditEnd="grid_itemEditEndHandler(event)"

protected function grid_itemEditEndHandler(event:FlexDataGridItemEditEvent):void

{

callLater(endEdit);

}

public function endEdit():void{

grid.bodyContainer.endEdit(grid.bodyContainer.getCurrentEditor());

grid.bodyContainer.getCurrentEditor().drawFocus(false);

focusManager.setFocus(grid);

}

 

5) When "selectionMode='multipleRows'" I would like that you need to hold down ctrl-key to add/remove multiples, and shift key to do ranges, while a normal click kills the current selection and just selects the row that was clicked. How do I enable this?

  • This was added in 2.7. Just set enableStickyControlKeySelection=true.


6) The box containing the sort direction icon / sort order number is way too big and frequently obscures the column labels. How can I reduce the size of this box?

  • You can set headerSortSeparatorRight style to reduce the width of the box. You can even customize the cell so it shows the box differently.

Screenshot:

Code:

MyHeaderCell.as (1.07 kb)

CustomHeaderCell.mxml (1.30 kb)


7) How can I apply custom styles to the print version of the grid?

  • Just add the custom styles for print to your style sheet for the appropriate print component. If the component is a ExtendedDataGrid, this is a ExtendedPrintDataGrid. IF it is an ExtendedAdvancedDataGrid, this is an printAdvancedDataGrid. If it is FlexDataGrid(Ultimate) then this is a PrintFlexDataGrid.

Code:

CustomStyles.txt (242.00 bytes)


8) How to I center the print/export popup?

  • You can use the popupParent property of the print/exportOptions for this.

Code:

ExcelExportCenterWindow.mxml (1.13 kb)


9) How can I localize the various strings used through out the library? The Export, Print, Preview, Settings, windows. I do not have the source code.

  • In your application initialize, load up your resource bundle, and set the appropriate properties on the Constants class.

Code:

Localization.mxml (5.72 kb)


10) I am using variableRowHeight, but the rows are not sizing to fit my content

  • First, ensure that you have set wordWrap on atleast one column that you need the text to wrap (and thus need to use variableRowHeight) for.
  • Second, if you are using itemRenderers, by default, Ultimate does not take these into account for performance reasons. In 2.8, a flag has been added, variableRowHeightUseRendererForCalculation. You can turn this on.
  • Third, instead of the flag above, you can control the row height calculation mechanism altogether. Attached is an example.

Code:

GetRowHeightFunction.mxml (1.09 kb)

 

11) I installed the latest file but still it get the following issue

TypeError: Error #2007: Parameter colors must be non-null.
                at flash.display::Graphics/beginGradientFill()
                at com.flexicious.nestedtreedatagrid.utils::ExtendedUIUtils$/gradientFill()
OR
TypeError: Error #1010: A term is undefined and has no properties.
at com.flexicious.nestedtreedatagrid.cells::CellUtils$/getBackgroundColors()[
  • This happens if you either use modules OR link our swc indirectly.
  • If you use modules, add a blank copy of the FlexDataGrid in the top level application <nestedtreedatagrid:FlexDataGrid/>
  • If you link our swc indirectly, please use the following steps.
  1. Make a copy of the swc on your desktop
  2. Rename it to swc.zip
  3. Open it up, extract the defaults.css in there
  4. Place the defaults.css in your application, rename it to flexiciousdefaults.css, and import it into your Main application file as <fx:Style source=”flexiciousdefaults.css”/>

 

12) For Ultimate, When the hierarchy's columns width in the top level is smaller than the next level's width (and the horizontal scroll policy of the grid is "on"/"auto"), the horizontal scroller will be calculated only by the top level's width, making some columns in the next level unreachable.

  • This one is actually a design limitation of the grid. The grid will measure the top level columns to define its width. One of the things other customers have done is that give a large column width to the last top level column, which is large enough so that sum of column widths at top level is larger than the sum of column widths at the bottom level.

13) My pager control is too wide for the width of my grid, and my buttons are being cutoff. What can I do?

  • There are a couple of options with this. In the first option, you can consider using the PagerControlAS that was released with 2.7. If your wide pager is being caused because of too many toolbar actions, this control can resolve the issue inherently.
  • Alternatively, you can use the FlowBox control from FlexLib. This basically creates a flow layout like the one below. It breaks the pager into two rows based on the width of the grid. Here is an example FlowPager.txt (8.30 kb) (this is for Classic, but Ultimate would be the same approach). Please ensure you provide a higher value for the pagerRowHeight so the flow layout has enough space to layout the contents.