I have an issue on the AdvancedDataGrid that the verticalLines are not always drawn correctly when the Grid is scrolled
Screenshot:
As you can see it afflicts the entire row up to first groupedColumn.
This happens only when it's upscrolling.
First I thought that it's probably an issue with my itemRenderer
but that is not the case because I found that it's only happing when I set the lockedColumnCount property.
In my case it is set to 10, just to scroll only the groupedColumns.
Without lockedColumnCount there is no such an issue with the lines.
It has nothing to do neither with the footer row, I had the same issue already before I added it.
Anyone has the same problem and found a workaround?
After some painful investigations I found the reason or at least the origin of this behaviour.
It happens only when:
*using grouped columns
*set lockedColumnCount for the ADG
*using a subclass of MXAdvancedDataGridItemRenderer for your itemRenderers
this will produce the bug you can see above when the adg is scrolled up
(it newer happens when it's scrolled down)
it disappears when the grid is redrawn
(after sort or column drag etc.)
and comes back most time (but not every time) when it is rescrolled...
Conclusion:
Don't use the MXAdvancedDataGridItemRenderer when you have groupedColumns and a lockedColumnCount
Create a class which implements:
IDataRenderer, IDropInListItemRenderer, ILayoutManagerClient, IListItemRenderer, IStyleClient
(subclass something like "Group" so you don't have to implement everything,
get inspired from the default renderer AdvancedDataGridItemRenderer for the rest of the implementation)
and use that class for your renderer
and no scrolling drawVerticalLine bug should appear...
Related
I am having serious problems trying to resize columns in a DataGrid. I've been at it for over a day now and am at my wit's end with a headache to boot.
Essentially, I have a TabNavigator component with NavigatorContent children inside. In each one of the NavigatorContent children, I have a DataGrid to which I'm setting the width to 100% (this is needed to be able to handle resizing of the browser window). I am using the excellent filterable DataGrid from Iwo Banas as the DataGrid in each tab.
Now, I am making visible/invisible some columns in each of the DataGrids and this is working fine. However, I find that the column widths are not being set correctly. Whenever I set the column widths (using this code), all of the columns seem to be set to the correct width except for the ones that I have recently made visible and the column immediately to the left of these. The ones recently made visible are very small (though I set their width to 30) and the one to the left of these columns is very large (though I've also set its width to 30).
I think it's something to do with the life cycle of the DataGrids because the first DataGrid behaves fine. It's when I click on the other tabs that I find that the widths of the other DataGrids have not been set correctly.
However, if I "see" one of those problem DataGrids (i.e. it appears on the screen) and the code which resizes the columns runs again, the columns are correctly sized.
I have tried a number of things recommended all over the internet including the questions listed below but to no avail.
This is the code I'm using to resize the columns (taken from this answer)
public static function resizeColumn(col:DataGridColumn, size:int):void
{
var owner:* = col.mx_internal::owner
col.mx_internal::owner = null;
col.width = size;
col.mx_internal::owner = owner;
}
Any and all help would be greatly appreciated.
I have already looked at the following answers.
Flex DataGrid column width: one column to rule them all?
Flex 3 DataGrid Column Width Problem
Flex DataGrid Column Width (<-- this answer got me closest)
Unable to change the column width dynamically in flex datagrid
So, after a huge amount of head wrecking, I finally found a solution (at least to my problem, not sure if it would help anyone else but thought I'd post it here anyway as you never know what could help someone else).
I decided that since calling the resize code when the DataGrid is on screen works then I needed to just do that. So I thought of putting the resize code for the relevant DataGrid depending on the tab clicked. Not that straightforward as there didn't seem to be a straightforward way to implement a click handler for the tabs. I did a quick Google and found this solution.
Essentially, you add a click handler for each tab button by cycling through the children of the tab navigator, getting the button and adding an event listener.
Then, you do what you need to do in the handler.
Code example (slightly different to one from website):
protected function tbGridArea_creationCompleteHandler(event:FlexEvent):void
{
for ( var i:int=0; i < tbGridArea.getChildren().length; i++ )
{
var tab:Object = tbGridArea.getTabAt(i);
tab.addEventListener( FlexEvent.BUTTON_DOWN,myTabClickHandler );
}
}
private function myTabClickHandler(event:Event):void {
switch(event.currentTarget.label) {
// do whatever you need to do here
}
}
I have mx DataGrids with custom item renderers on one column based on HBox. I tried to optimize them using the spark MXDataGridItemRenderer class, but using it results in the first row of the column being 2px shorter than the rest, as if the first row got hidden under the grid header. From the second row onwards the height is ok, but the first row problem results in every row being shifted up 2px. When selected, it looks just bad.
Any ideas would be much appreciated.
I have seen this issue before as well. I am not sure what the RIGHT answer is but to solve it for my app I stopped using the spark crap. I see the benefits of spark but for me, its frustration level outweighs its usefulness. So the way I see it, you have 2 options:
1: Create MXDataGridItemRenderer for each grid column so that they are all uniform.
2: Don't try to optimize them and just stick with the HBox solution (thats what I did).
I'm trying to make a Flex (Advanced)DataGrid component with some mechanism where the user can toggle the visibility of the columns. I've crudely implemented this by reading in the columns into the right-click menu, and when a column name is selected here, the visibility is toggled. It works, but it's not the most elegant solution.
Specifically, I'm trying to emulate the "datagrid" that Mozilla Thunderbird uses to display emails. Here is an image:
In the upper right, there is an icon over the scroll bar. If there is no scrollbar, the icon remains in the same place. When clicking the icon, it opens up a menu that shows all the possible columns, with the visible ones having a check mark next to them, like this:
Also, the scroll bar always appears under this button, never "pushing" it over into it's own column.
I'd like to re-create this in Flex. I believe the menu part and creating a column with a button headerRenderer is easy enough. But I can't figure out how (if at all possible) to do this with the scrollbar, because the scrollbar always seems to be "its own column". Any ideas or help would be appreciated. Thank you.
Ian
One dirty solution comes to mind. Create a component based on Canvas, then add an AdvancedDataGrid by overriding createChildren. Override updateDisplayList as well and add a button like the one in Thunderbird to the upper right of the Canvas. This will cause the button to appear over the DataGrid. Problemo solved?
I have the following scenario :
A Flex 3 DataGrid is sitting here
At runtime, a column is added to this grid
The column has a custom ItemRenderer
The ItemRenderer inherits from HBox, and adds a few items to the HBOx dynamically
My problem is that the width of the column doesn't change. As a consequence, my column stays small, and an ugly horizontal scrollbar is displayed in the line, instead of my content (which is completely unreadable).
I would like the column to adapt its width to the content of the HBox in the ItemRenderer. I tried the following :
Setting the 'percentWidth' of the ItemRenderer to '100'
Invalidating the properties of the ItemRenderer after adding the items
The only thing that has a "visible" effect it to force the width of the DataGridColumn. Obviously this is not acceptable since I'm dynamically adding components to the ItemRenderer, and I don't know how many or how big they are.
Besides, when I am in the ItemRenderer, I have no access to the column itself (or do I ?) so I cannot force the size of the column from here.
So is there a way around this ? Would AdvancedDataGrid help here (notwhistanding the fact that I cannot really use it for other reasons ...)
Alternatively, I would be happy enough if someone has a solution where the column cell is displayed without the ugly horizontal scrollbar (don't mention setting horizontalScrollPolicy to "off", been there, tried that, lost shirt ;) ).
Thanks
PH
I did not found a solution for the size, however I found the way to remove the scrollbar ; you must put the "horizontalScrollPolicy : 'off'" in the list of properties of the itemRenderer Factory (rather then on the itemRenderer itself).
I've noticed that the default behaviour for a DataGrid's vertical scroll bar is to scroll one row at a time. This is all well and good when the rows are all uniform and small (e.g. displaying a single line of text), but gets really ugly as soon as you have rows with variable heights.
I'm curious, is there a way to make DataGrid scrolling "smooth"? For instance, is there a way to have the DataGrid scroll by a set number of pixels, lines of text, etc. rather than scrolling one row at a time?
So far, the only solution I've managed to come up with is to place the DataGrid in a Canvas and have the Canvas do the scrolling instead of the DataGrid. The issue with this approach, though, is that as soon as the Canvas scrolls far enough, the DataGrid headers scroll off-screen. Ideally, I'd like to get the smooth-scrolling nature of the Canvas, but also keep the DataGrid headers visible. Is that possible?
The way that ItemRenderer's work in Flex 3 makes smooth scrolling difficult to achieve. Basically Flex recycles item renderers scrolled off of the top of the list as the display objects used for new data at the bottom of the list. Adobe's implementation of most list components in Flex 3 creates and adds these items as they come on to the screen rather than just off the screen, so they "pop in" and smooth scrolling isn't available. I'm not sure why they couldn't have done it in a similar manner for items +/- one position above or below the current scroll pane, but they didn't, and we're stuck with sticky scrolling by default.
Work-arounds do exist, though the one you've noted (dropping the datagrid into a canvas) negates the display-object saving intention of item renderers and incurs a performance cost. This will be fixed for most list-based Flex components in Flex 4, though it won't be fixed immediately for DataGrid. The DataGrid / AdvancedDataGrid component is maintained by a separate team based in India, last time I heard, and so it tends to be a bit behind the rest of the SDK.
I'd recommend trying something similar to this implementation of a smooth-scrolling list by Alex Harui. I'm not sure exactly how well it'd work for DataGrid or AdvancedDataGrid, but this is the most intuitive technique I can think of for making the list scroll correctly.
Try this... It's still based on Alex's code that was mentioned above. His should still be a great start for removing the snap-to-row behavior. Original source:
http://blogs.adobe.com/aharui/2008/03/smooth_scrolling_list.html
Alex's original some code for smooth vertical scrolling but that was not an issue I had with the DataGrid. It was smooth scrolling horizontally that I needed. I am using the DataGrid in an unorthodox manner for analyzing plain text reports output by our database (great way of providing visual feedback on a document). The code below allows content to go off screen and the user can scroll without that snap-to-column behavior.
You can adapt this to use the same math routines for vertical scrolling and then it will make scrolling possible and ignore the snap to row behavior. In particular switch the usage of the listContent.move method to move the contents vertically and use a inverse of the rounded pixel value you calculate from the vertical scroll bar (as opposed to my using the horizontal).
This method is bit simpler than Alex's method from the link above - a lot less code so try adapting and see how it works.
override protected function scrollHandler(event:Event):void
{
// Override the default scroll behavior to provide smooth horizontal scrolling and not the usual "snap-to-column" behavior
var scrEvt:ScrollEvent = event as ScrollEvent;
if(scrEvt.direction == ScrollEventDirection.HORIZONTAL) {
// Get individual components of a scroll bar for measuring and get a horizontal position to use
var scrDownArrow:DisplayObject = horizontalScrollBar.getChildAt(3);
var sctThumb:DisplayObject = horizontalScrollBar.getChildAt(2);
// I replaced maxHorizontalScrollPosition in Alex's code with "1300" to fix my exact application. In other situations you may finding using some property or different value is more appropriate. Don't rely on my choice.
var hPos:Number = Math.round((sctThumb.y - scrDownArrow.height) / (scrDownArrow.y - sctThumb.height - scrDownArrow.height) * 1300);
// Inverse the position to scroll the content to the left for large reports
listContent.move(hPos * -1, listContent.y);
}
// Go ahead and use the default handler for vertical scrolling
else {
super.scrollHandler(event);
}
}