Flex Examples
Filtering an MX DataGrid control by date range using Flex
The following example shows how you can filter an MX DataGrid control in Flex using two MX DateField control’s and filtering the ArrayCollection data provider.
<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2010/02/01/filtering-an-mx-datagrid-control-by-date-range-using-flex/ --> <mx:Application name="MX_DataGrid_filter_DateField_test" xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white" initialize="init();"> <mx:Script> <![CDATA[ protected const MIN_DATE:Date = new Date(2010, 0, 1); protected const MAX_DATE:Date = new Date(2010, 11, 31); protected function date_labelFunc(item:Object, col:DataGridColumn):String { var time:Number = Date.parse(item[col.dataField]); return new Date(time).toDateString(); } protected function arrColl_filterFunc(item:Object):Boolean { var cDate:Number = Date.parse(item.holidayDate); if (!sDate || !eDate) { return true; } if (sDate.selectedDate && eDate.selectedDate) { return (sDate.selectedDate.time <= cDate) && (eDate.selectedDate.time >= cDate); } else if (sDate.selectedDate) { return sDate.selectedDate.time <= cDate; } else if (eDate.selectedDate) { return eDate.selectedDate.time >= cDate; } else { return true; } } protected function init():void { sDate.selectedDate = MIN_DATE; sDate.selectableRange = {rangeStart:MIN_DATE, rangeEnd:MAX_DATE}; eDate.selectedDate = MAX_DATE; eDate.selectableRange = sDate.selectableRange; } ]]> </mx:Script> <mx:ArrayCollection id="arrColl" filterFunction="arrColl_filterFunc"> <mx:source> <mx:Array> <mx:Object holidayName="New Years" holidayDate="2010/1/1" /> <mx:Object holidayName="Martin Luther King, Jr. Day" holidayDate="2010/1/18" /> <mx:Object holidayName="Groundhog Day" holidayDate="2010/2/2" /> <mx:Object holidayName="Chinese New Year" holidayDate="2010/2/14" /> <mx:Object holidayName="Valentine's Day" holidayDate="2010/2/14" /> <mx:Object holidayName="President's Day" holidayDate="2010/2/15" /> <mx:Object holidayName="Ash Wednesday" holidayDate="2010/2/17" /> <mx:Object holidayName="Daylight Saving Time starts" holidayDate="2010/3/14" /> <mx:Object holidayName="St. Patrick's Day" holidayDate="2010/3/17" /> <mx:Object holidayName="First Day of Spring" holidayDate="2010/3/20" /> <mx:Object holidayName="April Fool's Day" holidayDate="2010/4/1" /> <mx:Object holidayName="Easter" holidayDate="2010/4/4" /> <mx:Object holidayName="Administrative Professional's Day" holidayDate="2010/4/21" /> <mx:Object holidayName="Earth Day" holidayDate="2010/4/22" /> <mx:Object holidayName="Cinco De Mayo" holidayDate="2010/5/5" /> <mx:Object holidayName="Mothers Day" holidayDate="2010/5/9" /> <mx:Object holidayName="Armed Forces Day" holidayDate="2010/5/15" /> <mx:Object holidayName="Memorial Day" holidayDate="2010/5/31" /> <mx:Object holidayName="Flag Day" holidayDate="2010/6/14" /> <mx:Object holidayName="Father's Day" holidayDate="2010/6/20" /> <mx:Object holidayName="Summer Begins" holidayDate="2010/6/21" /> <mx:Object holidayName="Independence Day/July 4th" holidayDate="2010/7/4" /> <mx:Object holidayName="Labor Day" holidayDate="2010/9/6" /> <mx:Object holidayName="Grandparents Day" holidayDate="2010/9/12" /> <mx:Object holidayName="First Day of Autumn" holidayDate="2010/9/23" /> <mx:Object holidayName="Columbus Day" holidayDate="2010/10/11" /> <mx:Object holidayName="United Nations Day" holidayDate="2010/10/24" /> <mx:Object holidayName="Halloween" holidayDate="2010/10/31" /> <mx:Object holidayName="All Saints' Day" holidayDate="2010/11/1" /> <mx:Object holidayName="Daylight Saving Time Ends" holidayDate="2010/11/7" /> <mx:Object holidayName="Veteran's Day" holidayDate="2010/11/11" /> <mx:Object holidayName="Thanksgiving" holidayDate="2010/11/25" /> <mx:Object holidayName="Wright Brothers Day" holidayDate="2010/12/17" /> <mx:Object holidayName="First Day Winter" holidayDate="2010/12/21" /> <mx:Object holidayName="Christmas" holidayDate="2010/12/25" /> <mx:Object holidayName="New Years Eve" holidayDate="2010/12/31" /> </mx:Array> </mx:source> </mx:ArrayCollection> <mx:ApplicationControlBar dock="true"> <mx:Form> <mx:FormItem label="Start date:"> <mx:DateField id="sDate" change="arrColl.refresh();" /> </mx:FormItem> <mx:FormItem label="End date:"> <mx:DateField id="eDate" change="arrColl.refresh();" /> </mx:FormItem> </mx:Form> </mx:ApplicationControlBar> <mx:DataGrid id="dGrid" dataProvider="{arrColl}" width="400"> <mx:columns> <mx:DataGridColumn dataField="holidayName" /> <mx:DataGridColumn dataField="holidayDate" labelFunction="date_labelFunc" /> </mx:columns> </mx:DataGrid> </mx:Application>
View source is enabled in the following example.
Peter deHaan
Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.
-
Add Widgets (Content Sidebar)
This is your Content Sidebar. Edit this content that appears here in the widgets panel by adding or removing widgets in the Content Sidebar area.
19 Responses to Filtering an MX DataGrid control by date range using Flex
-
Categories
- Accordion
- AccordionHeader
- ActionScript
- AddChild
- AdvancedDataGrid
- Alert
- alpha
- Animate
- AnimateProperties
- Application
- Application (Spark)
- ArrayCollection
- BarChart
- baseColor
- beta
- beta1
- beta2
- Bitmap
- Bitmap/BitmapData
- BitmapData
- BitmapFill
- BitmapFill (Spark)
- BitmapGraphic
- BitmapImage
- BitmapImage (Spark)
- BitmapImageResizeMode
- Border (Spark)
- BorderContainer (Spark)
- Box
- BuildInfo
- Button
- Button (Spark)
- ButtonBar
- ButtonBar (Spark)
- ByteArray
- Camera
- Charting
- CheckBox
- CheckBox (Spark)
- ClassFactory
- CollectionEvent
- Color
- ColorPicker
- ColorUtil
- ComboBox
- ComboBoxArrowSkin
- Compiler
- Component
- Component (Spark)
- Configuration
- Container
- ContextMenu
- ContextMenuEvent
- ContextMenuItem
- CSSCondition
- CSSSelector
- CSSStyleDeclaration
- CurrencyFormatter
- CursorManager
- Data Binding
- DataGrid
- DataGrid (Spark)
- DataGridColumn
- Date
- DateBase
- DateChooser
- DateField
- DateFormatter
- Debugging
- DefaultComplexItemRenderer
- DefaultTileListEffect
- DropDownList
- DropDownList (Spark)
- DropDownListButtonSkin
- DropDownListSkin
- DropShadowFilter
- E4X
- Effects
- Ellipse
- EmailValidator
- Embed
- Event
- Fade
- FileFilter
- FileReference
- fill
- Filters
- Flash
- Flash Integration
- FlashVars
- Flex 3 SDK
- Flex Builder
- Flex Builder 3
- Flex SDK
- Flex4
- FLVPlayback
- FocusManager
- FontLookup
- Fonts
- Form
- Form (Spark)
- FormHeading (Spark)
- FormItem
- FormItem (Spark)
- Forms
- FTETextField (Spark)
- FullScreen
- FullScreenEvent
- FxAnimateColor
- FxButtonBar
- FxCheckBox
- FXG
- FxHScrollBar
- FxHSlider
- FxList
- FxNumericStepper
- FxRadioButton
- FxRotate3D
- FxScroller
- FxTextArea
- FxTextInput
- FxToggleButton
- FxVScrollBar
- FxVSlider
- getStyleDeclaration()
- GradientEntry
- Graphic (Spark)
- HBox
- HDividedBox
- HGroup (Spark)
- HorizontalLayout
- HorizontalList
- HSBColor (Spark)
- HScrollBar (Spark)
- HSlider
- HSlider (Spark)
- HTML template
- ID3Info
- Image
- Image (Spark)
- ImageSnapshot
- itemRenderer
- JointStyle
- Label
- Label (Spark)
- Legend
- LegendItem
- LigatureLevel
- Line
- LinearGradientStroke
- LineScaleMode
- LinkBar
- LinkButton
- List
- List (Spark)
- Menu
- MenuBar
- Metadata
- MetadataEvent
- Model
- Mouse
- MouseCursor
- MouseEvent
- Move
- Namespace
- NavigatorContent (Spark)
- needsSWF
- NetConnection
- NetStream
- Nightly Builds
- NumberBaseRoundType
- NumberFormatter
- NumberValidator
- NumericCompare
- NumericStepper
- NumericStepper (Spark)
- ObjectProxy
- ObjectUtil
- paddingLeft
- paddingRight
- Panel
- Panel (Spark)
- Parallel
- Path
- PieChart
- PieSeries
- PieSeriesItem
- PopUpAnchor (Spark)
- PopUpButton
- PopUpManager
- ProgrammaticSkin
- ProgressBar
- PropertyChangeEvent
- QName
- RadialGradient
- RadioButton
- RadioButton (Spark)
- RadioButtonGroup
- RadioButtonGroup (Spark)
- Rect
- RegExp
- Regular Expressions
- Repeater
- RichEditableText
- RichText
- RichText (Spark)
- RichTextEditor
- Rotate
- Rotate3D (Spark)
- Scroller (Spark)
- Sequence
- setStyle()
- SimpleText
- SimpleText (Spark)
- skinClass
- Slider
- SliderEvent
- SolidColor
- SolidColorStroke
- Sort
- SortField
- Sound
- SoundEffect
- Spinner (Spark)
- SpriteVisualElement (Spark)
- StageDisplayState
- States
- StringUtil
- StringValidator
- StyleManager
- Styles
- SWFLoader
- SWFObject
- System
- SystemManager
- TabBar
- TabBar (Spark)
- TabNavigator
- TabStopFormat
- Text
- Text Layout Framework (TLF)
- TextArea
- TextArea (Spark)
- TextBox
- TextConverter
- TextEvent
- TextFlow
- TextFlowUtil
- TextFormat
- TextGraphic
- TextInput
- TextInput (Spark)
- TextLayoutFormat
- TextView
- Themes
- TileLayout
- TileList
- TileOrientation
- Timer
- TitleWindow
- TitleWindow (Spark)
- TLF
- ToggleButton (Spark)
- ToggleButtonBar
- ToolTip
- Transition
- Tree
- TruncationOptions
- UIComponent
- UIFTETextField
- Updater
- URLLoader
- URLRequest
- URLUtil
- URLVariables
- ValidationResultEvent
- Validator
- Validators
- VBox
- VDividedBox
- Vector
- VerticalLayout
- VerticalLayout (Spark)
- VGroup (Spark)
- Video
- VideoDisplay
- VideoElement
- VideoElement (Spark)
- VideoEvent
- VideoPlayer (Spark)
- VideoPlayerScrubBar
- ViewStack
- VScrollBar (Spark)
- VSlider
- VSlider (Spark)
- XML
- XMLList
- XMLListCollection
- ZipCodeValidator
- ZipCodeValidatorDomainType
- Zoom
-
Articles
- December 2010
- November 2010
- October 2010
- September 2010
- August 2010
- July 2010
- June 2010
- May 2010
- April 2010
- March 2010
- February 2010
- January 2010
- December 2009
- November 2009
- October 2009
- September 2009
- August 2009
- July 2009
- June 2009
- May 2009
- April 2009
- March 2009
- February 2009
- January 2009
- December 2008
- November 2008
- October 2008
- September 2008
- August 2008
- July 2008
- June 2008
- May 2008
- April 2008
- March 2008
- February 2008
- January 2008
- December 2007
- November 2007
- October 2007
- September 2007
- August 2007
- July 2007
-
Meta


plz send how flex connected to m s access or ms sql server
send any program
Can you show an example of this flex component? Thanks!!
Added
Hi Peter, I can’t find any place around here to contact you. I hear that you’re the QE for the Flex 4 text components. I’m having trouble embedding tags. Example would be a span of words that are bold and then make one of those words blue. Is that just a limitation with Flex 4 or am I missing something? I have a blog post about using HTML text in Flex 4 text components. If you have an answer I’d really appreciate it if you commented there. http://polygeek.com/2249_flex_display-html-text-in-the-spark-textarea
@polyGeek,
Peter
So beautiful, i looked for this so long..
Hello
What code would I use in the ArrayCollection to get this to work with my PHP data Services?
Thanks
@Brian,
I’d try using HTTPService to connect to the PHP script which returns some XML or something.
Peter
Thanks for this tutorial…
hi..
Datagrid with date field columns should be sorted by current year (eg: 2010 year records alone should display)
help me to achieve this..
@sabeerdeen,
See http://blog.flexexamples.com/2007/08/12/sorting-date-columns-in-a-datagrid/
Peter
Your site is such a big help!!! I’m working on my first major flex app and I’ve found your site to be a sort of Flex Bible!
Anyways I’ve got a similar filter that I’m working on in my app, but I’m having a small problem. I’ve got some items that don’t contain dates (so they don’t appear) and I was wondering how I c0uld modify the code so that items not containing a date are not filtered out?
thanks!
@Adam S,
You could try adding something like the following:
protected function arrColl_filterFunc(item:Object):Boolean { var cDate:Number = Date.parse(item.holidayDate); if (!cDate) { return true; } // ...Now if you have dates that cannot be parsed (or there wasn’t a
holidayDatein the fx:Object, the item will still display and not be filtered out. You may also need to tweak your date formatter function to return an empty string if the date cannot be parsed/formatted, or else you may get something funny like “Invalid date” in the DataGrid.Peter
Hello,
I realize this is an older thread, but wonder if someone can please point me in the right direction.
I am trying to use the code on this page to populate a Flex column chart, so that a user can see a default date range on a chart when the page loads, then use date choosers for start and end dates.
I have the chart working via XML/E4X using HTTPService. I’ve tried adapting the datagrid example here but am not having luck yet.
Thanks for any and all thoughts,
sPlat
I am also working on the same issue. If you get it resolved , can you pls post it here.
how can we include the same date filter in column header renderer?
Thanks a lot Peter for this example.
I would appreciate if anyone in this forum can answer few questions for me.
1)Is there any way to set the end date to current date(present date). I want users to change the start date but by default always set the end date to current date.
Looking forward to hear from you.
Thanks
San
what i want to do is to click on any perticular cell of calenderand a window should be displayed according to the sclected date. how can i do that which control should i use.?
Hi, Peter!
First of all, thank you so much to share all of this stuff with us!
I have a kind of a simple question, how can I filter this ArrayCollection when the User try to search holydays typping the text that they want?
I was thinking about just to save time, because I’m sending a new Remote Object each time that the user whant that….can you help me? tx!
I’m using Flex 4.5.
See ya!