Customization of the Right Click functionality - Ultimate Flex DataGrid

clock January 30, 2015 11:21 by author Flexicious

Recently got a few good questions about how to customize the right click functionality:

 

  • Is there a build in mechanism to disable and “grey out” certain menu items of the “CustomContextMenu” ?
  • Moreover: is it possible to add Icons before the menu item?
  • Is there a possibility to rename the build in menu items?
  • Moreover I’d like to provide my custom menu items at first, can I reorder this?

The answer to the first three questions is yes, and it is fairly straight forward to do so. The grid exposes a customContentMenuItems array, which is nothing but a data provider used to populate the customContextMenu (also exposed as a public property btw). So all that needs to be done is to provide a menu item that has a enabled=false flag. Same applies to the second question, all that needs to be done is to provide a icon property. Here is the code:

 

protected function flexdatagrid1_itemRightClickHandler(event:FlexDataGridEvent):void{
   grid.customContextMenuItems = [{type:'Separator'}
     ,{type:'Disabled Item',caption:'This is a disabled item',enabled:false}
     ,{type:'Item with icon',caption:'This is item with icon',icon:previous}
     ,"Custom Column Action: " + event.cell.column.headerText];}

 

 


For the built in items, there are 5 properties exposed as can be seen in the following code:

 

 

  1. copyCellMenuText
  2. copySelectedRowMenuText
  3. copyAllRowsMenuText
  4. copySelectedRowsMenuText
  5. copySelectedCellsMenuText

 

 

Finally, the fourth question unfortunately requires a little extension. You can create custom extension to FlexDataGrid and override onRightClick method.

Below is default implementation,

          

            /**
            * If enable custom right click is true, we handle it in this function.
            */        
            protected function onRightClick(event:MouseEvent):void            {
                   if(ToolTipManager.currentToolTip){
                        ToolTipManager.destroyToolTip(ToolTipManager.currentToolTip);
                        ToolTipManager.currentToolTip=null;
                   }
               //we are over a column header
                  var items:Array=[];
                  if(currentCell is IFlexDataGridCell ){
                        //contextMenu.customItems=cmis;
                        items.push({caption:this.copyCellMenuText});
                        items.push({caption:this.copySelectedRowMenuText});
                        items.push({caption:this.copyAllRowsMenuText});
                        items.push({caption:this.isRowSelectionMode?copySelectedRowsMenuText:copySelectedCellsMenuText});
                  }
                  if(currentCell)
                  {
                        var evt:FlexDataGridEvent = new FlexDataGridEvent(FlexDataGridEvent.ITEM_RIGHT_CLICK, this, currentCell.level, currentCell.column, currentCell, currentCell.rowInfo.data,event);
                        dispatchEvent(evt);
                  }

                  for each(var rightClickItem:Object in customContextMenuItems)
                  {
                        if(rightClickItem is String)
                        {
                              items.push({caption:rightClickItem});     
                        }
                        else
                        {
                              items.push(rightClickItem);
                        }                                        

                  }
                  if(items.length>0){
                        //UIUtils.addPopUp(menu,FlexGlobals.topLevelApplication as DisplayObject,false);
                        customContextMenu.labelField = "caption";
                        customContextMenu.dataProvider=items;                    

                        if(customContextMenu.visible){
                              customContextMenu.hide();
                        }
                        customContextMenu.show(event.stageX,event.stageY);
                        cellUnderRightClick=currentCell;
                  }
            }     

Finally, below is the screenshot and the code:


 

 

RightClick.mxml (3.22 kb)



Show a filter image in Datagrid header when a filter is applied

clock January 29, 2015 05:17 by author Flexicious

Just got an interesting question from a customer :

"It is a way to show a filter image() in my Datagrid header when a filter is applied"?

This is actually possible if you use a custom header renderer. Basically, the idea is that when the grid renders, it calls the set data method on each renderer, including header renderers. Armed with this knowledge, it is easy to accomplis this. 

Lets take a look at the markup required to do this

<?xml version="1.0" encoding="utf-8"?>

<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx" width="400" height="300" xmlns:grids="com.flexicious.grids.*" xmlns:columns="com.flexicious.grids.columns.*">

      

       <grids:ExtendedAdvancedDataGrid dataProvider="{Font.enumerateFonts(true)}" enableFilters="true"
filterPageSortChange="grid.invalidateList()"

id="grid">
              <grids:columns>
                     <columns:ExtendedAdvancedDataGridColumn dataField="fontName" filterControl="TextInput">
                           <columns:headerRenderer>
                                  <fx:Component>
                                         <mx:HBox verticalScrollPolicy="off" horizontalScrollPolicy="off">
                                                <fx:Script>
                                                       <![CDATA[                                                            

                                                              import mx.controls.advancedDataGridClasses.AdvancedDataGridListData;                                                             

                                                              [Bindable]
                                                              [Embed(source="/../assets/images/16x16/filterShowHide.png")]
                                                              private var previous:Class;

                                                             

                                                              [Bindable]
                                                              [Embed(source="/../assets/images/16x16/filterShowHideInverted.png")]
                                                              private var next:Class;

                                                              public override function set data(val:Object):void{
                                                                     super.data=val;
                                                                     img.source=outerDocument.grid.getFilterValue('fontName')?previous:next;
                                                             }
                                                       ]]>
                                                </fx:Script>
                                                <mx:Label text="Font Name"/>
                                                <mx:Image id="img" />
                                         </mx:HBox>
                                  </fx:Component>
                           </columns:headerRenderer>
                     </columns:ExtendedAdvancedDataGridColumn>
                     <columns:ExtendedAdvancedDataGridColumn dataField="fontType" filterControl="TextInput"/>             
              </grids:columns>
       </grids:ExtendedAdvancedDataGrid>
</s:Group>

HeaderWithFilterImage.mxml (1.71 kb)



Drag Drop Grouping For Ultimate Flex DataGrid

clock January 26, 2015 22:56 by author Flexicious

In the upcoming release, we have added support for Drag Drop Grouping. This is an exciting new feature that a number of you have asked for, and it is finally being added. As a part of this release, there is a new component, a DragGroupingBar, which will work hand in hand with the grid to make it simple for you to enable Drag and Drop grouping. All you have to do is to drop the grouping bar on the screen and wire it up to the grid like below:

 

      <grouping:GroupingDragBar id="groupByTestButton">

      </grouping:GroupingDragBar>

      <nestedtreedatagrid:FlexDataGrid groupingDragBar="{groupByTestButton}" styleName="myGridStyle" id="grid" width="100%" height="100%" enablePrint="true" enablePreferencePersistence="true"

 

                                                       enableExport="true" enableCopy="true" preferencePersistenceKey="simpleGrid"

And the grid will take care of the rest!

Below is a screenshot:


 

And here is a video of the grouping in action:

https://www.youtube.com/watch?v=2TL_EFfxcGs



Custom Chart Painters and Customization

clock January 17, 2015 21:40 by author Flexicious

We recently had an interesting query from a company evaluating our software. 

"We would need to show 6 values on a candle, while here only 4 values are available(Open, Close, High, Low). (the 6 values we use are: minimum, average, maximum, maximum for 95% of the data, maximum for 75% of the data and maximum for 50% of the data).   We are interested in getting all the 6 values into the same dashboard block. These are statistic values related to an attribute.  For example for a Line chart we would need only one vertical line with 6 values. "

Since our drawing mechanism is extensible for all our charts, this is possible, if you know the right extension points. For this example, we chose the HLOCChart, since it draws 4 values, we just need to repurpose it to draw 6. Although the HLOCCharrt has a specific purpose (Drawing stock charts), its quite easy to extend the drawing mechanism for it. In this case the user just wants 6 dots in a line. Turns out, not that hard to do:

  1. Extend the HLOCChart initialize the ExtendedHLOCPainter.
  2. Extend the HLOCPainter, implement the painting code on basis of the built in painting code.
  3. Extend the HLOCSeries, add the 2 fields.

The whole thing took about 15 minutes to do!

The code is attached at the bottom of this post, and here is the result:

 

ExtendedHLOCChart.as (1.62 kb)

ExtendedHLOCChartPainter.as (4.31 kb)

ExtendedHLOCSeries.as (1.73 kb)

HLOCCharts.mxml (3.21 kb)



Some recent FAQs

clock January 8, 2015 04:45 by author Flexicious

Recently, quite a few of you have asked some common questions which we wanted to summarize here:

 

Q : I would like to allow multiple row selection only by clicking any cell and using the control key (enableStickyControlKeySelection="true") OR by using the "FlexDataGridCheckBoxColumn" without using the control key.

A : We have added this behavior to the upcoming 3.3 release. Please request a build.


Q: For Spark DataGrid, if I define a custom skin, the filters are not visible.

A: The Flexicious Spark DataGrid (ExtendedSparkDataGrid) has its own skin. Moreover, the skin is also different if you use Apache Flex 4.10 + vs Flex 4.5 - 4.9. All of these skins are attached below.

For SDK 4.10 + : ExtendedSparkDataGridSkin.mxml (16.96 kb)

 

Q : I have a data provider as an ArrayCollection (not hierarchical collection) and also multi level footers.I am trying to control the outcome of the footer values in footerLabelFunction2. I cannot use columnLevel of cell to determine levels because at the time of export it would fail since there is no cell at that point.

A : You are correct, during export, there is no cell so footerLabelFunction2 (and labelFunction2) both will not work, since the cell parameter will be null. In that case, you can refer to grid.recordBeingExported (this was added in a recent release).

 

Q: In the MultiSelectCombBox, if I selected one item and press Ok button, I cannot disselect this item. 

A: We have added additional flag–

      <controls:MultiSelectComboBox allowNoneSelection="true" id="mcboGrade" label="Grade" dataProvider="{gradeList}" dataField="GradeCode" labelField="GradeName" height="26" minWidth="100"

                                                 />

Q:  I know how to remove header text via  hideHeaderText  but  that is not the effect I want. How can I disable headers completely for Child rows

A: Set headerHeight=0

 

 Q: For the DateComboBoxFilter, your grid component gives (All,This Quarter,Last Quarter etc.) I want to add more filters (Current date, Last Week, Last Month , Last 15 Days etc.) 

A: In a recent release, we have added support for registering custom date ranges. Please request a build, the sample code now includes an example that adds custom date ranges.

 

Q : I've just found that the build in "Copy Selected Rows" feature doesn't work with a Tree grid with “Dynamic levels”. 

A :This was fixed in the upcoming 3.3 release, please request a build.

 

Q : We use Flexicious MultiSelectComboBox Filter , but some fields content is not working.

For example, If the field's content is "", then this value can be filterred after choosing filter= [None]. 
However, if the field's content is null, then this value can't be filterred after choosing filter=[None]. 

 A : Use the useLabelFunctionForFilterCompare   flag : <flxs:FlexDataGridColumn dataField="zipCode" filterControl="MultiSelectComboBox" filterComboBoxBuildFromGrid="true" useLabelFunctionForFilterCompare="true"/>

 

Q : We need to show some keywords in different colors within one grid's cell.  How can we do that?

For example, one cell's content is "Today is Sunday !".  The keyword: "Sunday" should be in red color, the rest words should be in black color. 

 A : Create an ItemRenderer, that extends from label, override the text setter and set htmlText instead. Make sure the data has HTML. Example code for both above questions is below

HTMLLabel.as (235.00 bytes)



Flexicious 3.2 Released!

clock August 4, 2014 06:44 by author Flexicious

====

To upgrade to 3.2, please request a build at http://www.flexicious.com/Home/RequestBuild

Please ensure your subscription to support and updates has not expired prior to submitting build request.

====

 

As with our previous releases, 3.2 has been shipping for a while to our early adopters, and we figured since there have been no major issues, it would be a good time to release it to all of you! Similar to 3.1, this is a rather large release, we listened to your feedback and spaced out our releases so that you dont have to upgrade every few weeks. Consequently, the releases now have a TON of functionality. Major chunks of functionality have their own blog posts linked to from this one. That said, with no further ado, presenting, Flexicious 3.2!!

 

  • Enhancement, Ultimate: New Settings popup that support for reordering columns. Support for controlling visibility of inner level columns. More details here
  • Enhancement, All Products: Support for pre and post print pages. More details here.
  • Enhancement, Ultimate: Added support for inner level filters. Click here for a screenshot
  • Enhancement, Ultimate: Added support for "sticky headers". This allows you to lock the inner level header rows as you scroll through the child items. Click here for a screenshot
  • Enhancement, Dashboard : A Number of enhancements were added to the Pie Chart. Full details here.
    • animationMode: fade,sweep,explode,explodeAndSweep. How to animate the pie chart. Supported modes are fade,sweep, and explode.
    • totalDegrees : The max degrees for this pie. Defaults to 360. Max 360.
    • startAngle : The angle for the first pie.
    • pieSelectedOffset : How far out to draw the selected pie slice.
    • pieSliceRadiusPercent : What percent of the overall chart should the pie take. If the chart is 50x50, and the pieSliceRadiusPercent is 50, then the pie will be of 25 radius. This is useful when you want to have large labels that sit outside the individual pie slices.
    • drawArcUsingGraphicsPath : Boolean flag that instructs the painter to use the Graphics path based drawing for regular charts. Only supported for 2d pie chart.
    • bezelBrightness : How much to darken the pie color by for the bezel. Only for 2d Pie charts.
    • bezelDistance : The distance of the bezel for 2d pie charts.
    • threeDShadeIntensity : Default shading intensity for the 3d pie painter
    • showLabelsOnPie : Flag to show text input labels with percentages on the pies.
    • pieLabelOffset : How far out (or in) to draw the label relative to the edge of the pie
    • pieLabelFunction : The label function for the label on the pie slice. Should take a PlotPoint, and return an String
  • Bug Fix, Ultimate : Preferences were not saving sort order for multiple column sort
  • Enhancement, Ultimate: Parameterized constants used on settings popup
  • Enhancement, Dashboard: Extended Calendar to support multi day items. Addition of support for stacking multi day items via the stackMultiDayItems boolean flag.
  • Enhancement, Dashboard: Extended Calendar to support deletion of events. New events added:
    • public static const CALENDAR_ITEM_ADDED:String = "calendarItemAdded";           
    • public static const CALENDAR_ITEM_DELETED:String = "calendarItemDeleted";
  • Enhancement, All Products: Intrinsic support for Unicode excel export. Added a flag, prependUnicodeMarkers, to ExportOptions. This will save the file with a unicode BOM. This makes the file unicode enabled without the need to save it in a non-native HTML format, instead of the regular CSV format.
  • Enhancement, Classic : Performance improvements for flat grids with filter/paging enabled.
  • Enhancement, Dashboard: Better mouse tracking of rollover points on Cartesian charts. Instead of having to hover over the very small rectangle around a plot point, now as you move the mouse along the axis, it will recognize the point within that vertical or horizontal cross section and show the tooltip for that point. Added support for enableSeriesHighlight. This highlights the series for multi series charts that is being highlighted.
  • Bug Fix, Dashboard: The position of Cartesian charts was off by half a bar.
  • Enhancement, Ultimate : Added support for copy selected cells, similar to excel. For contiguous selection (assuming all selected cells belong to the same column), a new menu item "Copy Selected Cells" is added. Hitting CTRL-C will also trigger this same behavior.
  • Enhancement, All Products : Performance improvement on MultiSelectCombBox with a large number of items to choose from.
  • Enhancement, All Products: Addition of the blankValuesLabel to the column. This allows for a new item added to the list of filter choices. Allows you to filter on null/blank values.
  • Bug Fix, Ultimate : For Boolean fields with dot notation based dataField, sorting was not working
  • Enhancement (Work In Progress), All Products : Spark version of all filter controls. We now have a SWC where we have ported a few of the filter controls, like to Spark based versions.
  • Bug Fix, Dashboard : Issue with 3d Pie chart where it was drawing a part of the slice outside the main pie.
  • Enhancement, Utlimate : Added editorHeightOffset, editorWidthOffset, editorXOffset, and editorYOffset for better control over the positioning of the itemEditor.
  • Bug Fix, Ultimate : For header heights, the column group height is now based off headerHeight instead of rowHeight.
  • Bug Fix, Classic : Better support for ArrayList dataprovider as opposed to ArrayCollection
  • Enhancement, Ultimate: Support for column header menu operations.
  • Enhancement, Ultimate: Added ability to define split headers at each level. Previously, this was a global setting.
  • Enhancement, Ultimate: Added iconPlacementFunction:A function that allows you to position the icon when you provide an iconFunction or iconUrl. By default, we use the iconLeft, iconRight, iconTop and iconBottom style properties. However incase of hierarchical grids, you may want to control the positioning of the icon. Takes a FlexDataGridCell object, and a Image object. The image object is already positioned x,y at the result of the calculation based upon iconLeft, Right, Top and Bottom properties for you to make additional adjustments.
  • Bug fix, Ultimate : Fix when a row is both selectable/disabled. Disabled rows should not be selectable.
  • Enhancement, All Products: Added a new value for filterTriggerEvent : enterKeyUpOrFocusOut. This triggers the filter when the user hits the Enter Key OR the user tabs out after entering something into the field.
  • Enhancement, Dashboard: Added support for selectable legends. Added show the hide this item checkbox. For Multi series chart, we allow the user to select which series to view if there are more than 1 visible series. For single series pie/funnel/pyramid charts, we use it as a filter on the dataprovider . Flag is named enableHideCheckbox
  • Enhancement, Dashboard : Added startAngle and endAngle to the Pie Chart, to draw partial pie charts
  • Enhancement, Ultimate: Added flag inExport¸and   recordBeingExported. This flag is set to true while the export is running, so you can embed custom logic in labelFunctions, etc.
  • Enhancement, Ultimate : Added a callback function, headerTextFunction. A function that determines the header text for a column. This method is called in 3 different contexts.
    • 1) When the grid is rendered and the header cells are drawn
    • 2) When the user clicks on export or print or sort and it shows the list of columns
    • 3) When the export is run, and the records are being exported.
  •  In each context we get different types of information that helps us determine the correct text to return. When the grid is being rendererd, the method gets a value of type IFlexDataGridCell for the cell parameter. This will let you determine the cell.rowInfo.data object being rendered. In the export or print popups, you will get the column, and no row context can be determined since there is none. You can use the defaultHeaderText property to figure out what you specified as the original headertext. NOTE : DO NOT use the .headerText in here, since it will cause a recursive loop. Finally, in case of an actual exprot, you can check to see grid.inExport, and determine the value to display on basis of the grid.recordBeingExported. This is usually the parent level record when the header is being written out.  Example: public function getHeaderText(col:FlexDataGridColumn, cell:IFlexDataGridCell=null):String
  • Enhancement, All Products: Added a custom Constants.NEW_LINE, which is determined on basis of the operating system that the application is running on.
  • Enhancement, Ultimate : Added support for custom right click menu. Full details about this enhancement are included in this blog post.
  • Bug Fix, Ultimate : The dropdown for enableColumnHeaderOperations was not being destroyed in certain circumstances after mouseout
  • Enhancement, Ultimate : Added MultiSelectComboBoxEx. a searchable Multi Select Combo Box.
  • Enhancement, Dashboard: Added support for a background striped pattern for all the Charts. The following properties were added to make this happen:

+                      /**

+                      *  The part that draws the background

+                      */                   

+                      public var backgroundPattern:Group;

+                      /**

+                      *  If this flag is set to true, the stripes are drawn vertically,

+                      * otherwise they are drawn horizontally.

+                      */                   

+                      public var backgroundStripesVertical:Boolean=false;

+                      /**

+                      * Flag to enable background stripes for this chart.

+                      */                   

+                      public var enableBackgroundStripes:Boolean=true;

  • Added support to darken/lighten the series on rollover : +                /**

+                      * If you set this to true, the  chart will darken the series on rollover.

+                      */                   

+                      public var darkenOnRollOver:Boolean=true;

+                      /**

+                      * If you set this darkenOnRollOver to true, the chart will darken the series on rollover.

+                      * The darkening will happen by this amount

+                      */                   

+                      public var darkenOnRollOverOffset:int=-0x30;

+                      /**

+                      * When using the default fills (which are colors), you can control apply a global alpha value.

+                      */                   

+                      public var defaultItemAlpha:Number=.8;

 

  • Enhancement, Dashboard: Added support multiple axes. More details in this blog post.
  • Enhancement, Dashboard: Added support scrollable charts. More details in this blog post.
  •  Enhancement, All Products : Moved the include files into a shared location to avoid issues wrt parent folders. e.g. instead of - include "../../../../../../../FlexGrid/includes/ClickPopupInclude.as"; include "C:/Code/flxssrc/includes/ClickPopupInclude.as";
  • Enhancement, All Products: Added support for persisting custom data as a part of preferences.
  • Enhancement, Dashboard: Added labelFunction for all Gauges.
  • Bug Fix, Dashboard: Preferences got corrupted when the preferences were saved with a maximized dashlet.
  • Enhancement, Dashboard: Added custom labels for HLOC chart.

+                      public var openLabel:String =  "Open\t: ";

+                      public var closeLabel:String = "Close\t: ";

+                      public var highLabel:String =  "High\t: ";

+                      public var lowLabel:String =   "Low\t: ";

  • Bug Fix, Ultimate: In certain scenarios, export did not include inner level records.
  • Enhancement, Ultimate: Added allowLastColumnResize. When the horizontal scroll policy is auto or on, this flag allows resizing of the last column.

 

 

 

 

 



Ultimate Flex DataGrid - Sticky Headers and Inline Filters

clock August 4, 2014 06:41 by author Flexicious

A couple cool new features being shipped with the upcoming 3.2 build:

 

 

Inline Filters:

 



Flex Charts - Numerous Enhancements

clock August 4, 2014 06:04 by author Flexicious

 

The charting library that we initially released a couple years ago has now grown into a fully fledged data visualization library with Tiny Charts, Regular Charts, Gauges, Calendar, Treemap, and many more. In this release, the charts are all getting a facelift. The most amount of work went into the Pie Chart.

A number of API additions were made:

  •  
    • animationMode: fade,sweep,explode,explodeAndSweep. How to animate the pie chart. Supported modes are fade,sweep, and explode.
    • totalDegrees : The max degrees for this pie. Defaults to 360. Max 360.
    • startAngle : The angle for the first pie.
    • pieSelectedOffset : How far out to draw the selected pie slice.
    • pieSliceRadiusPercent : What percent of the overall chart should the pie take. If the chart is 50x50, and the pieSliceRadiusPercent is 50, then the pie will be of 25 radius. This is useful when you want to have large labels that sit outside the individual pie slices.
    • drawArcUsingGraphicsPath : Boolean flag that instructs the painter to use the Graphics path based drawing for regular charts. Only supported for 2d pie chart.
    • bezelBrightness : How much to darken the pie color by for the bezel. Only for 2d Pie charts.
    • bezelDistance : The distance of the bezel for 2d pie charts.
    • threeDShadeIntensity : Default shading intensity for the 3d pie painter
    • showLabelsOnPie : Flag to show text input labels with percentages on the pies.
    • pieLabelOffset : How far out (or in) to draw the label relative to the edge of the pie
    • pieLabelFunction : The label function for the label on the pie slice. Should take a PlotPoint, and return an String

For regular charts, we added support for a background striped pattern for all the Charts. The following properties were added to make this happen:

+                      /**

+                      *  The part that draws the background

+                      */                   

+                      public var backgroundPattern:Group;

+                      /**

+                      *  If this flag is set to true, the stripes are drawn vertically,

+                      * otherwise they are drawn horizontally.

+                      */                   

+                      public var backgroundStripesVertical:Boolean=false;

+                      /**

+                      * Flag to enable background stripes for this chart.

+                      */                   

+                      public var enableBackgroundStripes:Boolean=true;

We also added support to darken/lighten the series on rollover : +                      /**

+                      * If you set this to true, the  chart will darken the series on rollover.

+                      */                   

+                      public var darkenOnRollOver:Boolean=true;

+                      /**

+                      * If you set this darkenOnRollOver to true, the chart will darken the series on rollover.

+                      * The darkening will happen by this amount

+                      */                   

+                      public var darkenOnRollOverOffset:int=-0x30;

+                      /**

+                      * When using the default fills (which are colors), you can control apply a global alpha value.

+                      */                   

+                      public var defaultItemAlpha:Number=.8;

 

In addition, we added ability to show/hide series or items.

Lets take a quick look at what this looks like:

 

 

 

 

 

Below is a full flex project with sample code that is used in the screenshots above.

 

ChartSamples.zip (39.48 kb)



Pre and Post Print Pages

clock August 4, 2014 05:47 by author Flexicious

In the last release, we added support for "Print Anything", basically extended the Printing mechanism to not only print the datagrid, but also any flex component that you can render on the stage.

One of the things that a number of our customers have requested is the ability to add a few pages of text (think disclaimers, table of contents). You could do this (sort of) using the ReportHeader and ReportFooter, but this comes with a big caveat that these cannot extend beyond one page. For this purpose, we have added support for the Pre and Post print pages.

The following properties were added to Print Options for this: 

              /**

               * A class factory that is responsible for instantiating a ICustomPrintComponent

               * that will be printed before the report.

               */          

              public var preReportPagesFactory:ClassFactory;

              /**

               * A class factory that is responsible for instantiating a ICustomPrintComponent

               * that will be printed after the report.

               */          

              public var postReportPagesFactory:ClassFactory;

              /**

               * If you define a preReportPagesFactory, you may optionally provide a number

               * for this. If you do, we will not attempt to calculate how many pages by calling

               * calculateTotalPages on your ICustomPrintComponent.

               */          

              public var preReportPages:int=0;

              /**

               * If you define a postReportPagesFactory, you may optionally provide a number

               * for this. If you do, we will not attempt to calculate how many pages by calling

               * calculateTotalPages on your ICustomPrintComponent

               */          

              public var postReportPages:int=0;

The way you wire this up is :

 creationComplete="dgEmployeesUltimate.printOptions.preReportPagesFactory = new ClassFactory(PrePrintPages);

dgEmployeesUltimate.printOptions.postReportPagesFactory = new ClassFactory(PostPrintPages);"

 

The caveat here is that PostPrint and PrePrint pages need to implement implements="com.flexicious.print.customprint.ICustomPrintComponent".

Below is the full set of files that are needed to make this happen.

PostPrintPages.mxml (437.00 bytes)

PrintPreAndPostPages.mxml (6.66 kb)

PrePrintPages.mxml (1.14 kb)



Ultimate Flex DataGrid - New Settings Popup

clock August 4, 2014 05:33 by author Flexicious

As most of you are aware, all the popup windows that the grid launches, like the print, print preview, export, settings, save settings are all plug-ins. You can specify your own popup in case you want to customize their behavior. The latest release, 3.2 has a new popup, SettingsPopupUltimate that has some cool enhancements over the previous version:

  • A Tree based view of the columns that is helpful to show individual columns as well as columns inside column groups
  • A searchable screen to allow large sets of columns to easily be managed.
  • Ability to move columns as well as groups of columns up and down.
  • For grids that have inner level columns (grids inside grids), ability to manage inner level columns.

 

Let us see what this looks like: 

 

 

For those of you who want to further customize this popup, it is attached below.

SettingsPopupUltimate.mxml (13.88 kb)

 

The way you provide your own is:

grid.popupFactorySettingsPopup = new ClassFactory(YourSettingsPopupUltimate);

Hope you find this useful!