Handy Flexicious methods

clock October 31, 2010 02:32 by author Flexicious

"I'm having a problem with the ExtendedAdvancedDataGrid not repainting the screen after applying a filter" OR

"After I add an Item to the data provider, the grid does not refresh" OR

"The multi select combobox does not reflect new values when I refresh my data provider from the server"

 

There are a few methods that we expose, which depending on your situation, would be applicable:

If you want the content to reindex page numbers/re filter: The method you want is processFilter()

If you need the list content to repaint: invalidateList().

FYI – if you need filters/footers to rebuild  : refreshLayout()

If you need MultiSelectOptions to refresh using current state of the data Provider, recreateNonFilteredDataProvider();refreshLayout().

 ============================================

Update: For Ultimate, here are some more handy methods:

Rebuild: Rebuild the entire grid. Iterates through the data provider (current page), re-evaluvates the vertical positions of each item, Drops and recreates all cells. There are four functions that you can use to redraw the grid, on basis of what your needs are.

  • reBuild : Most expensive. Rebuilds the entire grid. This is also the most expensive function
  • reDraw : Removes the cells in view, and redraws them. Should be used when there are no additions/removals to the data provider
  • refreshCells : Resets the text,enabled, styles and border/background etc. of the currently visible cells. See the refreshCells() function for details.
  • invalidateCells : Least expensive. Only resets the border/background of the currently visible cells.

 



Performance, filterComboBoxDataProvider, refreshLayout, displayOrder

clock October 12, 2010 05:46 by author Flexicious

Question: "What is the max number of rows/columns that are able to be supported by this component?  We recently got a project that will have hundreds of thousands if not millions of records and I need to know about where the upper limit would be"

Our maximums will be the same as the Flex SDK maximums. ExtendedDataGrid/ADG inherits from their sdk counterparts, and most of our work is around the chrome area. We have negligible, if any impact on overall performance.

That said, It is usually not a good idea to push down more than a few thousand records to the client. We provider filterPageSortMode property to handle large recordsets. Please read:
http://blog.flexicious.com/post/The-filterPageSortMode-explained.aspx




Question: I would like to populate my filter drop down with data outside the grid data but have not been successful.
<columns:ExtendedDataGridColumn headerText="Header" ...    filterComboBoxDataProvider="{mStatusInfo}" ... />

var mStatusData:ArrayCollection = new ArrayCollection();
for each (var item:Object in items)
 mStatusData.addItem(item);

Answer: Please call grid.refreshLayout() after the items are added.


Question: My toolbar on the grid is coming at the bottom of the grid.
I want to know how to put it on top of the grid like it is displayed on the flexicious website demo..
Answer: Use the displayOrder property. http://blog.flexicious.com/post/The-displayrOrderpagerPosition-properties.aspx








The displayOrder/pagerPosition properties

clock October 11, 2010 19:53 by author Flexicious

Another frequent question:

1) How do I make the pager bar appear on the top/bottom
2) I set pagerPosition, but it seems to have no effect?

Answer:

Use the displayOrder property. Make sure you read the docs for this property, the structure of the ADG and the regular grid make their implementation slightly different.

" The order in which the various sections of the grid are laid out. A comma seperated list of the following strings: filter,body,footer,pager for the Advanced Data Grid, and filter,header,body,footer,pager for the Classic Data Grid. Changes the order in which the grid displays the filter,header,body,footer,pager."

The pagerPosition does not apply if you are using the CustomPagerControl (which most of you are). This is a legacy property that only applies to the basic pager control, the one that we referred to in the earlier post about CustomPagerControl.



The CustomPagerControl/pagerRenderer

clock October 9, 2010 19:25 by author Flexicious

Questions:

1) I just dropped the Flexicious Library into my project, created an ExtendedDataGrid, and the buttons do not show up. OR
2) How do I style the Print Preview/Print Options/Export Options windows?
3) How do I add/remove/re-order buttons that show up in the Flexicious toolbar?

Answer:

The answer to all of these lies in the CustomPagerControl.

There is a bare bones default pager control built into the library, which only contains the four paging buttons (previous, next, first, last). If you do not specify a pagerRenderer and enablePaging, this is what will show up.You can then wire up additional buttons somewhere on the UI to invoke the PrintController, ExportController, Preferences, etc. (See the Flexicious 101 post for details).

However, to eliminate the need to do this, in the sample project, we include a CustomPagerControl, that has these buttons prewired. The custom pager control also hooks up the custom renderers for Print, Preview, Export and Preference Persistence. The idea is that should you need, you can easily modify the UI of the various Flexicious features.

 

So the answer to

Q1 : You do not see them because they are not a part of the core library, but the CustomPagerControl, which you might not have wired up
Q2:  To style these windows, 1) Ensure you are using the CustomPagerControl & 2) Modify the MyPrintOptionsRenderer, MyPreviewRenderer, MyExportOptionsRenderer, SettingsPopup, and SaveSettingsPopup files as you need. Also, please ensure you look at MyPrintOptions and MyExportOptions to understand how the screens are wired.
Q3 : Modify the CustomPagerControl file as you need.

 

To ensure that you are using the Custom Pager Control:


From the sample project, copy all files from the following folder:

1) Sample\src\com\sample\examples\support\print
2) Sample\src\com\sample\examples\support\export
3) Sample\src\com\sample\examples\support\gridSettings
4) Sample\com\sample\examples\support\CustomPagerControl.mxml
5) Sample\com\sample\examples\support\controls\ImageButton.as

Please note, if your folder structure is differnent, you will have to modify the name spaces and imports accordingly.

now, in your grid's declaration, you can hook up the CustomPagerControl like this:

<grids:ExtendedDataGrid .... pagerRenderer="com.sample.examples.support.CustomPagerControl"/>

====================================

Update : For Ultimate, the concepts are the same, but the built in pager control is a lot more functional than the barebones that ships with Classic. Although, the process for customizing the pager control will be very similar. On the demo page, scroll down to the "Styles Demo", which demonstrates how to customize the pager bar. One thing to note - Ultimate needs you to extend IExtendedPager as opposed to IPager. The default pager renderer is available here and the images needed are here. As an FYI, the images are located in a folder as a sibling to the src folder. If your assets folder sits underneath your src folder, you could simply search and replace "/../assets" with "/assets" and you should be good to go. 

Update 2: A complete sample project with a custom pager renderer for ultimate is available here: 

CustomPagerRenderer.zip (57.54 kb)