I'm using Flash Builder 4.6 to create a schedule for the next 12 hours. The rows hold employees and the columns represent the hours. I want one GridItemRenderer that can be used by all cells to display the info appropriately.
I'm currently setting a GridItemRenderer in the GridColumn to try and accomplish this. I can get it to recognize data related to the row, but I can not get the renderer to recognize the column it is being applied to, so I can calculate if the current cell is between the start/end times for the current employee.
Any thoughts?
use "column" property in your item renderer.
override public function set data(value:Object):void {
if( value != null ) {
super.data = value;
if( column.dataField == "col1" ) {
myLabel.text = data.col1;
} else {
myLabel.text = data.col2;
}
}
}
I find the answer from this:
Flex: get column index in custom itemrenderer for spark datagrid
and tested, it's ok.
Related
I have a generic Grid List Control. Which let me Bind the Item Source and ItemTemplate and it will generates the Column and Rows based on Number of Items or Based on how Users set the Rows and Columns. Its perfect until here. It supports all the generics I needed.
Now the Problem part:
I have a ContentView which will be used as Item Template for the Grid. This Template will be used for Multiple Data Types. I'm able to do it properly. Now I have one Data Type Where the First Cell should have RowSpan if it meets certain condition: The code below works perfect. It creates the RowSpan perfectly.
bool isYearBuilt = false;
bool isAny = false;
public FilterItemView()
{
InitializeComponent();
}
protected override void OnBindingContextChanged()
{
base.OnBindingContextChanged();
var context = BindingContext as PropertyFilterItem;
if (context == null)
return;
if(context.FilterType==PropertyFilterTypes.YearBuilt)
{
if(context.IsAny)
{
isYearBuilt = true; isAny = true;
}
}
}
protected override void OnParentSet()
{
base.OnParentSet();
GridList grid = this.Parent as GridList;
if (grid == null)
return;
if(isYearBuilt && isAny)
{
Grid.SetRowSpan(this, 2);
}
}
These are the Images; which will describe it more perfectly:
This is how it looks based on above code. We can see that it is creating RowSpan.
This is what I'm expecting to do.
The only problem is - While Setting RowSpan it is not refreshing the subsequent cells. Because, I'm applying the RowSpan in Runtime after the Grid and all the Cells are created. How can I refresh the Grid and other remaining cells to moved to their own cells?
Thank you for helping me.
Set the grid list's ItemsSource = null and set it back again to the item source you want.
Cause of the problem:
As you have said, While Setting RowSpan it is not refreshing the subsequent cells.
Solution:
After you have set rowspan using Grid.SetRowSpan(this, 2); you have to bind the datasource again.
Since I had my own Custom Grid List control. I implemented more Properties which let me know When I have to RowSpan for Child View in Grid and Adjust subsequent Child items. That was the only best way to deal with this problem rather than re-assigning the ItemSource property. Because, If we assign item source it will redraw all the items (including the rows and columns - not row/colspans). So we would still end up with same issue.
Solution: Added RowSpan logic in my Grid Control.
By default, whenever you rollOver/mouseOver (not sure of the difference) an item in a Datagrid or a List, that item is highlighted with the component's rollOverColor. I'm just wondering if there's any way to do that programmatically. I haven't been able to find much help on the issue. For example, suppose I have two DataGrids. When I rollOver an item in the first DataGrid, I want to highlight the corresponding index in the second one as well. Basically, as if two separate cursors were rollOver'ing two separate DataGrids. How can I do this?
Ian
You can listen for the datagrid's itemRollOver event and then select a row in the other datagrid by using it's selectedIndex or selectedItem properties.
1) Create a custom DataGrid with this function :
public function indicesToItemRenderer(rowIndex:int, colIndex:int):IListItemRenderer
{
var firstItemIndex:int = verticalScrollPosition - offscreenExtraRowsTop;
if (rowIndex < firstItemIndex ||
rowIndex >= firstItemIndex + listItems.length
)
{
return null;
}
return listItems[rowIndex - firstItemIndex][colIndex];
}
2) When you want to hightlight an item, call this code :
youCustomADG.indicesToItemRenderer(idxRow, idxCol).dispatchEvent(new MouseEvent(MouseEvent.MOUSE_OVER);
Question for Flex guys.
How can I use multiple item renderers in mx:Tree depending on item's depth/level in tree?
For example. For the first level items I want to use label with button and for second level items combobox.
Is this somehow possible?
Here is solution:
In extended Tree just override function getItemRendererFactory(data:Object):IFactory and do neccessary logic to select proper itemRenderer.
Hope this will help also someone else
That conditional logic should be implemented in a single itemrenderer. You can't set multiple renderers.
Here is a receipe how this can be implemented: http://cookbooks.adobe.com/post_How_do_I_create_a_Tree_itemRenderer_-62.html
override public function set data(value:Object):void
{
if(value != null)
{
super.data = value;
if(TreeListData(super.listData).hasChildren)
{
setStyle("color", 0x660099);
setStyle("fontWeight", 'bold');
}
else
{
setStyle("color", 0x000000);
setStyle("fontWeight", 'normal');
}
}
}
That 'if' statement shows you if you have inner nodes or not. You also can specify additional property when generating the data provider.
How can I filter a datagrid based on the value in the combo box? Can anyone show me some good examples on it?
In my application, I already filter a datagrid based on the text entered by the user. I check if the entered string matches the column entry of the datagrid and if a match is found,the filterFunction on the dataprovider is called. All this I did with the help of a tutorial only, as I'm learning flex as I do my project.
This is that code:
<mx:FormItem direction="horizontal">
<mx:ComboBox id="searchCriteria1" dataProvider="{criteriaDP1}" change="searchFunction()"/>
<mx:TextInput id="search" change="searchFunction()"/>
<mx:Button label="Clear Search" click="clear()" />
</mx:FormItem>
private function searchFunction():void{
defectList.filterFunction = filterItems;
defectList.refresh();
}
private function filterItems(item:Object):Boolean
{
var isMatch:Boolean = false
if(searchCriteria1.selectedItem.label == "Defect Id")
{
if(item.defId.toString().search(search.text.toString()) != -1)
{
isMatch = true
}
}
else if(searchCriteria1.selectedItem.label == "Review Id")
{
if(item.revId.toString().search(search.text.toString()) != -1)
{
isMatch = true
}
}
return isMatch;
}
Here defectList is the dataprovider to the Data Grid, revId,defId are the columns of the data grid .
Now how do I filter, with combo boxes. I have a combo box called "priority" with values "high","medium","low","all". If I select all,no filtering is done. If I select "high" only those fields with priprity column value as "high" should appear.
EDIT
I even tried like this:
if(searchCriteria2.selectedItem.label=="Priority")
{
if (item.revType.toLowerCase().search(searchCriteria.selectedLabel.toLowerCase()) != -1)
{
Alert("yes");
isMatch=true
}
}
searchCriteria is the comboBox,where I have the items, "ALL","HIGH"...
I have two rows with value "high" and I get the Alert "yes" for two times only..
But in the data grid all the four rows are displayed.
You appear to be searching on the revType column, rather than the Priority column.
It may be worth finding a way to reduce the amount of duplicated code in your app to help avoid bugs like this. For example, your list of fields could look like this:
[Bindable]
var criteriaDP1:ArrayCollection = new ArrayCollection([{label:"Review ID", value:"RevID"},
{label:"Defect Id", value:"DefID"}]);
Setting it up like that would let you use the value field as an index on your dataProvider, like this:
public function search_clickHandler():void
{
defectList.filterFunction = function(item:Object):Boolean
{
var gridValue:String = item[searchCriteria.selectedItem.value].toString().toLowerCase();
var searchValue:String = search.text.toLowerCase();
if(gridValue.search(searchValue) != -1)
{
return true;
}
return false;
};
defectList.refresh();
}
Does anyone know how to programmatically expand the nodes of an AdvancedDataGrid tree column in Flex? If I was using a tree I would use something like this:
dataGrid.expandItem(treeNodeObject, true);
But I don't seem to have access to this property in the AdvancedDataGrid.
AdvancedDataGrid has an expandItem() method too:
http://livedocs.adobe.com/flex/3/langref/mx/controls/AdvancedDataGrid.html#expandItem()
Copy the sample found at the aforementioned url and call this function:
private function openMe():void
{
var obj:Object = gc.getRoot();
var temp:Object = ListCollectionView(obj).getItemAt(0);
myADG.expandItem(temp,true);
}
You could also open nodes by iterating through the dataProvider using a cursor. Here is how I open all nodes at a specified level:
private var dataCursor:IHierarchicalCollectionViewCursor;
override public function set dataProvider(value:Object):void
{
super.dataProvider = value;
/* The dataProvider property has not been updated at this point, so call
commitProperties() so that the HierarchicalData value is available. */
super.commitProperties();
if (dataProvider is HierarchicalCollectionView)
dataCursor = dataProvider.createCursor();
}
public function setOpenNodes(numLevels:int = 1):void
{
dataCursor.seek(CursorBookmark.FIRST);
while (!dataCursor.afterLast)
{
if (dataCursor.currentDepth < numLevels)
dataProvider.openNode(dataCursor.current);
else
dataProvider.closeNode(dataCursor.current);
dataCursor.moveNext();
}
dataCursor.seek(CursorBookmark.FIRST, verticalScrollPosition);
// Refresh the data provider to properly display the newly opened nodes
dataProvider.refresh();
}
Would like to add here that the AdvancedDataGrid, in spite of having an expandAll() method, has a property called displayItemsExpanded, which set to true will expand all the nodes.
For expanding particular children, the expandChildrenOf() and expandItem() methods can be used, as can be verified from the links given above.