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)