Posts

Showing posts with the label advanceddatagrid

Word wrap in AdvancedDataGrid

So getting a column field to wrap in an AdvancedDataGrid isn't as easy as just setting the "wordWrap" property to true. Maybe it should be, but it isn't. First thing's first. Do you have an itemRenderer on the column you're trying to wrap. If the answer is yes you have to make sure that itemRenderer is based on a wrappable component. For argument's sake, lets say you have a Label itemRenderer, well you're going to have to change that to be based on Text, and you're going to have to give it a width to give it the capability to wrap (percentWidth = 100 works nicely). Then set your wrap-able column to wordWrap = true . Finally set your AdvancedDataGrid to have property variableRowHeight = true . Here is a link to an example with the view source enabled.

Flex DataGrid sorts

Sometimes your data is in a specific order, but not ordered on anything you can really sort by via a data grid. So sometimes you apply a sort with the data grid (or advanced data grid), which is great and everything, but what do you do when you want to reset the data back to the original order? this.mydatagrid.dataProvider.sort = null; this.mydatagrid.dataProvider.refresh(); Done!

Flex AdvancedDataGrid Header bug?

I was building an AdvancedDataGrid today, and the 2nd header was supposed to be a date. Easy enough right? Not so much... I put it as a String, as a Date, as a formatted Date... and every time the last character was begging cut off. No reason why. I tried putting the Date in a String variable... still cut the last character off... but ONLY when it was in the format 5/11/09 or similar... any other string worked fine. I eventually had to use the headerRenderer... all the renderer (extends Text) does is override the updateDisplayList with this.text = data.headerText.toString(); . Works like a charm. What a messed up bug...

Removing column header separator lines (flex)

Image
This took me a while to figure out so I thought I would post it on here just in case someone else is having the same problem. I have an Advanced Data Grid, but I don't want any separator lines between the headers. There are 2 styles and 1 property you need to set in an AdvancedDataGrid to make this happen. The styles are: header-separator-skin header-sort-separator-skin The property is: sortExpertMode I figured setting the styles to "null" would work, but it doesn't. Here is what you need to do: headerSortSeparatorSkin="mx.skins.ProgrammaticSkin" headerSeparatorSkin="mx.skins.ProgrammaticSkin" sortExpertMode="true" Or if you'd rather set the styles in CSS: header-separator-skin: ClassReference("mx.skins.ProgrammaticSkin"); header-sort-separator-skin: ClassReference("mx.skins.ProgrammaticSkin"); Sample with source Thanks to http://theflexguy.com/index.php?option=com_idoblog&task=viewpost&id=104&Itemid=54...

Flex Advanced Data Grid remove item

This shouldn't have taken me this long to figure this out... it is really quite simple actually. I have an AdvancedDataGrid with a Hierarchical data provider. I have a delete button. The behavior I want is when the user clicks the delete button whatever row is highlighted (selected) in the ADG is removed. To do this you need to use two methods. The first is the removeChild method. Use this on the dataprovider of the ADG. It takes two arguments, the parent node, and the object to be removed. IF you're object is at the top mode, pass null for the parent node argument. removeChild(parent,object) The second is the getParentItem method. This method, you guessed it, returns the parent of the item passed to it. getParentItem(Object); Use them together to remove the selected item in your ADG. myADG.dataProvider.removeChild( myADG.dataProvider.getParentItem(myADG.selectedItem), myADG.selectedItem ); Note, make sure your data provider is bound to the ADG.

Flex Advanced Data Grid - header properties to know

I'm working with another advanced data grid. The grid has a lot of columns and fitting it on one screen without a horizontal scroll is proving challenging. Here are a couple properties regarding headers that I found helpful: sortExpertMode - Setting this property to true removes that little vertical bar next to your header text. That frees up some horizontal space. headerWordWrap - Setting this property to true allows multi-line headers. You will need to set the Column width to force the text to wrap, and you'll probably need to set the header height since the default isn't tall enough to fit two lines of text. folderClosedIcon & folderOpenIcon - Setting these properties to {null} will remove the little folder icon next to the grouped item. You can also use these properties to show a custom icon.

Flex Advanced Data Grid collapses on refresh

I was having this problem with my Advanced Data Grid. Every time the data refreshed the whole thing collapsed, which isn't a good thing when users have drilled down 3 levels. I know this is probably a bad way of doing this, but it is the only way I could get to work. All the examples I've seen of this say to just assign the saved openNodes Object to the openNodes property, like this... myOpenNodes = new Object(); myOpenNodes = IHierarchicalCollectionView(myADG.dataProvider).openNodes //refresh here IHierarchicalCollectionView(myADG.dataProvider).openNodes = myOpenNodes; but that doesn't work!! Here is what I did: On the refresh method set the following variables (these variables need to be accessible from all methods inside the component, so put them in your model or make them global, whatever). These variables hold the state of the ADG before the refresh. //Object holding all currently open nodes myOpenNodes = new Object(); myOpenNodes = IHierarchicalCollectionView(myADG.d...

Flex Advanced Data Grid helpful link

http://livedocs.adobe.com/flex/3/html/help.html?content=advdatagrid_06.html I keep going back here for info... so I am guessing I should make a note of it.