AdvancedDataGrid dynamic text Value Coloring - ItemRenderer problem - apache-flex

In my AdvancedDataGrid,
I am adding dynamic values to cells by dragging a cell value to other cells. While copying, I am setting the value to listData and setting the Red color to the value in ItemRenderer. Everything is working fine, but when I scroll down/up, the values remains in the cells where thay are supposed to be(as I am setting to listData) but the coloring behaves wierd(as I am trying to set the color in ItemRenderer).
I don't want to store the color of the value, but I should be able to see the dynamically created values in Red color.
Is there a way, I can do this? Do I need to set the color to actual dataprovider object and then check in ItemRenderer?
Can anyone help me with this?
public class CustomItemRenderer extends AdvancedDataGridItemRenderer
{
private var _isDynamicValue:Boolean;
....
....
//_isDynamicValue is set to true if the value is dynamic
if(_isDynamicValue && listData.label) {
setStyle("color", 0xFF0000);
setStyle("fontWeight", "bold");
}
else {
setStyle("color", 0x000000);
}

I didn't found a way to store those values temporarily. I stored the colored values indexes and checked them in ItemRenderer.

Related

Format datagrid column color

I have a advanced datagrid label function like this:
private function dgFormat(item:Object, column:AdvancedDataGridColumn):String{
var v3:int = item.value1 - item.value2;
return "Total: " + v3;
}
How can I change the text color of v3 dynamically? I want it to be red if it's less than zero & black otherwise.
thanks!
There's a few ways of doing this, but personally if I were you, I'd just create a custom item renderer for the columns that you want the color to change and do something like:
<s:Label text="Total: {data}" color="{data < 0?0xFF0000:0x000000}" />
This way, you bind the difference right off the bat without having to add 'total' in your data, and bind the color change as well.
You'll need a custom item renderer for your AdvancedDataGridColumn. The item renderer will check the value being set, and update the color of the text depending on its content.
This should get you started.

Conditional coloring on spark RichText component

I have a spark RichText that I want to change his color according with the value on text property.
Negative values get red, positives blue...
When I declare the component, I call a method to set up the css style, but when the value changes, the color is not updated.
How can I put a conditional CSS Style?
Is possible to create custom skins to RichText component?
Thanks
Here is a example of my code:
<s:RichText id="txtOsc" styleName="{getCorOs(txtOsc.text)}" columnCount="1" kerning="on" text="10" whiteSpaceCollapse="preserve" x="460" y="103"/>
..
private function getCorOs(_text:String):String{
if(_text.indexOf("-") > -1){
return "RED";
}else{
//positivo
return "BLUE";
}
}
]]>
..
It creates ok, but if I change the value at runtime to -10, for instance, the color doesn't change.
You need to re-apply the new style: yourText.thePortionToColor.setStyle('color', 0xFFFFFF); or string value - it doesn't matter.
FTQuest

Hide ColumnSeries in Flex Chart

I have a clustered chart with 2 column series. The problem is that sometimes one column's values are so large, the other column is dwarfed. So I added checkboxes to show/hide a given column, and set the visibility of the ColumnSeries as such:
visible="{checkbox.selected}" includeInLayout="{checkbox.selected}"
This shows/hides the given column correctly, the problem is that it does not reset the Y-Axis, so the other column never actually grows in height (when the column with the larger values is hidden). I've tried resetting the data provider, validating/invalidating the chart, and nothing seems to work.
Anyone have any ideas?
Thanks!
I would imagine from your description that you actually need to remove the series from the chart. So
public function onToggle(){
var newSeries:Array = [];
if(bigSeries.selected) {
newSeries.push(bigSeries);
}
if(smallSeries.selected) {
newSeries.push(smallSeries);
}
chart.series = newSeries;
}

Flex DataGrid Column Width

In my flex app I store the widths and visiblility of columns in an xml file. When the app loads it reads from the xml file and sets he columns values as applicable:
for(i = 0; i < columnsOrder.length; i++){
newOrder[i] = myDG.columns[Number(columnsOrder[i]) - 1];
newOrder[i].visible = (Number(columnsVisiblity[i]) == 1);
newOrder[i].width = Number(columnsWidth[i]);
}
myDG.columns = newOrder;
myDG.invalidateList();
The problem appears to be setting the visibility (it sets the visible field correctly but messes up the width)... I've tried setting it after setting the width (outside of the loop) and before the loop as well. It resizes the columns properly if I don't do anything with the visibility.
Any ideas?
Add an import statement at the top of your class file:
import mx.core.mx_internal;
Then remove using the mx_internal namespace, remove the owner of the column, change the width and then reasign the parent:
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;
}
This ought to do the trick (well, it did for us after a couple of days of swearing)
Is you horizontalScrollPolicy set to false on the datagrid?
"If the DataGrid's horizontalScrollPolicy property is false, all visible columns must fit in the displayable area, and the DataGrid will not always honor the width of the columns if the total width of the columns is too small or too large for the displayable area."
http://livedocs.adobe.com/flex/3/langref/mx/controls/dataGridClasses/DataGridColumn.html#width
I was able to get it to work by calling the above loop in a function twice... the first time it add the visible columns, the second time it sets the correct width. Not the best solution but I cannot spend any more time on it.

In a QTableWidget, changing the text color of the selected row

I'm using a QTableWidget to display several rows. Some of these rows should reflect an error and their text color is changed :
Rows reflecting that there is no error are displayed with a default color (black text on white background on my computer).
Rows reflecting that there is an error are displayed with a red text color (which is red text on white background on my computer).
This is all fine as long as there is no selection. As soon as a row is selected, no matter of the unselected text color, the text color becomes always white (on my computer) over a blue background.
This is something I would like to change to get the following :
When a row is selected, if the row is reflecting there is no error, I would like it to be displayed with white text on blue background (default behavior).
If the row is reflecting an error and is selected, I would like it to be displayed with red text on blue background.
So far I have only been able to change the selection color for the whole QTableWidget, which is not what I want !
Answering myself, here is what I ended up doing : a delegate.
This delegate will check the foreground color role of the item. If this foreground color is not the default WindowText color of the palette, that means a specific color is set and this specific color is used for the highlighted text color.
I'm not sure if this is very robust, but at least it is working fine on Windows.
class MyItemDelegate: public QItemDelegate
{
public:
MyItemDelegate(QObject* pParent = 0) : QItemDelegate(pParent)
{
}
void paint(QPainter* pPainter, const QStyleOptionViewItem& rOption, const QModelIndex& rIndex) const
{
QStyleOptionViewItem ViewOption(rOption);
QColor ItemForegroundColor = rIndex.data(Qt::ForegroundRole).value<QColor>();
if (ItemForegroundColor.isValid())
{
if (ItemForegroundColor != rOption.palette.color(QPalette::WindowText))
{
ViewOption.palette.setColor(QPalette::HighlightedText, ItemForegroundColor);
}
}
QItemDelegate::paint(pPainter, ViewOption, rIndex);
}
};
Here is how to use it :
QTableWidget* pTable = new QTableWidget(...);
pTable->setItemDelegate(new MyItemDelegate(this));
What you'll want to do is connect the selectionChanged() signal emitted by the QTableWidget's QItemSelectionModel to a slot, say OnTableSelectionChanged(). In your slot, you could then use QStyleSheets to set the selection colours as follows:
if (noError)
{
pTable->setStyleSheet("QTableView {selection-background-color: #000000; selection-color: #FFFFFF;}");
}
else
{
pTable->setStyleSheet("QTableView {selection-background-color: #FF0000; selection-color: #0000FF;}");
}
It looks ok, but you might want to look at the documentation of QStyleOption it can tell you wether the item drawn is selected or not, you don't have to look at the draw color to do that. I would probably give the model class a user role that returns whether the data is valid or not and then make the color decision based on that. I.e. rIndex.data(ValidRole) would return wether the data at this index is valid or not.
I don't know if you tried overriding data for the BackgroundRole and returning a custom color, Qt might do the right thing if you change the color there
You could, of course, inherit from the table widget and override the paint event, but I don't think that is what you want to do.
Instead, should use the QAbstractItemDelegate functionality. You could either create one to always be used for error rows, and set the error rows to use that delegate, or make a general one that knows how to draw both types of rows. The second method is what I would recommend. Then, your delegate draws the rows appropriately, even for the selected row.
You could use e.g. a proxy model for this where you return a different color if you have an error for the specific modelindex;
QVariant MySortFilterProxyModel::data(const QModelIndex & index, int role = Qt::DisplayRole) {
// assuming error state and modelindex row match
if (role==Qt::BackgroundRole)
return Qt::red;
}

Resources