How to skin spark List component so that every adjacent itemRenderer has different color (something like mx DataGrid)?
You can do this by creating a custom renderer derived from ItemRenderer and overriding the itemIndex setter. In your overridden method, set the background color based on whether the item index is odd or even. The Adobe docs have an example of this which you can find in this section:
http://help.adobe.com/en_US/flex/using/WS03d33b8076db57b9-23c04461124bbeca597-8000.html#WS03d33b8076db57b9-43c4a246124bc002543-8000
Hope that helps.
Related
QSS allows styling QTreeView and has a set of predefined child elements, e.g. QTreeView::item.
I would like to add finer model-driven granularity to it using property selector (QTreeView::item[myproperty=myvalue]). This way I could have data-driven display and at the same time it would be customizible via QSS.
Is there a way I could access the item of QTreeView (note, not the QTreeWidget), so that I could set a property on it based on the data returned from the model?
Are there any other ways of driving which style to apply to a given item from the model (other than returning font, color etc)?
How to Set alternat Row Color In Flex 4.5 MobileApplication For Spark Data Grid. The Main Problem Of SparkDataGrid in Mobile Application not Allowed to Add Skin.
Use the alternatingRowColors style. To quote the docs:
Type: Array Format: Color CSS Inheritance: no Theme: spark
Used to initialize the DataGrid's rowBackground skin part. If the
alternatingRowColors style is specified, then use the
alternatingRowColorsBackground skin part as the value of the
rowBackground skin part. The alternating colors for the grid rows are
defined by successive entries in the Array value of this style.
If you want to change how this style is rendered, replace the
alternatingRowColorsBackground skin part in the DataGridSkin class. If
you want to specify the background for each row, then initialize the
rowBackground skin part directly.
The default value is undefined.
Add the following style to your application:
s|DataGrid
{
alternatingRowColors:#FFFFFF,#CCCCCC;
}
This will make the odd rows white and the even rows gray. Now, I have not tested this using Mobile so it may or may not work. Please follow up with results.
-Vic
I have a custom item renderer which I use for my DataGrid. The DataGrid has specified selectionColor, rollOverColor and themeColor. The Problem is that the custom item renderer, does ignore those colors, and doesn't give any Feedback...
I tried to add the lines:
setStyle("selectionColor", 0xEDF1F7);
setStyle("rollOverColor", 0xE1F5DE);
setStyle("themeColor", 0x3569B0);
But with no effect...
Who can help on that?
Thanks,
Markus
Those styles won't apply to the component you are using for your itemRenderer (which you don't mention). They're styles of the DataGrid itself.
So let's say you're using a Canvas. Try setting the backgroundAlpha of the Canvas to 0.0 so that your DataGrid's selection and other colors will show through.
I have datagrid in my page and I want to change particular cell background color. I don't want to use itemrenderer. Is there any alternate ?
Here is an example of changing the selection color: Flex Examples
If you want to do more than that, I'm afraid you will have to use an itemRenderer.
You could subclass DataGrid and override the protected drawRowBackground() method or possibly drawColumnBackground(). These are intended to draw the background for an entire row or column but you may be able to get it to draw a special color only for the cell(s) you want.
I have a quick question about rendering the advanceddatagrid cells.
I need to programatically color the cell of the datagrid based on the conditions. Lets say, the stock quotes. If there is an increase from the previous day, I need to have the cell colored in GREEN and in RED, when there is a decrease.
Now, the important part here is, I need to do these things dynamically, which means, when the user enables the comparison/conditions, then the cells are colored. And when the user disables the comparison, then it again goes back to its default behavior.
I know I have to use renderers. But not sure, how to use it for the cells and that too dynamically. Can anyone please explain how to go for it?
Thanks
Item renderers are components used to define the appearance of a component's "items" or subcomponents. In the case of the ADG, the "items" are the individual cells. You can create a completely custom class to function as the renderer (given it implements certain required interfaces) or, in most cases, you extend an existing component. Since the default renderer for ADG cells doesn't support background colors, you have to create or extend a component that does and use that as the renderer. That is the basic premise that these tutorials, linked to in the following question, work from:
Setting background color for datagrid row in Adobe Flex
After creating an itemRenderer that supports a background color, you have two options as to where you can define your "conditions"; inside of the itemRenderer or using the ADG's styleFunction (additionally requiring that your itemRenderer defines a "background" style).
In your case, you could include both today's and yesterday's stock price values in the data sent to each cell and compare the two to determine the color used to draw the background. Again, more on that in the tutorial links provided above. In either the itemRenderer or the styleFunction, you would compare properties on the itemRenderer's/styleFunction's data object (corresponding to the row you're looking at), e.g.:
if(data.today > data.yesterday)
{
// set color or return style
}
else ...
To "toggle" custom cell colors, switch between your custom renderer and the default (colorless) renderer. In other words, set the itemRenderer property to your custom itemRenderer class when you need display the colors and set it to "null" when you want the "default behavior".