Images in DataGrid depending on data
Line Break
Author: Arjan (47 Articles) - Author Website
Arjan is a SAP Consultant specialized in ABAP and Front End development techniques like Web Dynpro, Adobe Interactive Forms, Flex and AIR. In his free time he likes to create examples for Flex-Blog and other applications using Flex, AIR and PHP. Other hobbies are movies and music. He is also the co-owner of Flex-Blog.com.
Flex DataGrids are usually used to give the user some overview of data. Sometimes we want to use a certain value in the data to describe something else (derive a value from the data).
For example, we want to display if a product is in stock yes or no using the following data:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <?xml version="1.0" encoding="UTF-8"?> <Products> <Product> <Name>Product One</Name> <InStock>0</InStock> </Product> <Product> <Name>Product Two</Name> <InStock>1</InStock> </Product> <Product> <Name>Product Three</Name> <InStock>10</InStock> </Product> <Product> <Name>Product Four</Name> <InStock>0</InStock> </Product> </Products> |
We can now easily display the number of items in stock using a datagrid:
A more clear definition would be to have an icon or image to display whether the item is in stock at all, the answer is the use of an ItemRenderer to render the appropriate image using a simple comparison.
You can view the source code of both examples using right mouseclick > view source.
Related posts:
- Style AdvancedDataGrid depending on data example
- Image as Button in a DataGrid
- Tree in Advanced DataGrid Example
- Progressbar in Datagrid Example
- Searching Data using a Class Example
Written by · Filed Under Examples
Was this post useful to you?
Please rate this post, follow us @ twitter, or link to this page from your website!
(2 votes, average: 4.50 out of 5)
Loading ...Comments
7 Responses to “Images in DataGrid depending on data”
Hello!
Very Interesting post! Thank you for such interesting resource!
PS: Sorry for my bad english, I’v just started to learn this language
See you!
Your, Raiul Baztepo
Thank you for this wonderful tutorial.
It helps a lot.
one suggestion, provide more information regarding the itemrenderer so users will not just copy/paste the code, they will understand it.
This doesn’t work very well…You can’t click on the field to select the item in the grid and if you size the field or scroll it doesn’t work right either…
Thanks a lot ,but The last part maybe remove ” imageReference = img;” this would be better.
Thx a lot… you cann’t imagine how much this post helped me..!
thx for the example, but i saw an error, when you move the mouse over the “In Stock” column the rollover effect doesn’t work.
I add
super.data = value
at the end of the function and works ok.
If we have lot of record then scrolling causes images to change dynamically, arjan can you help on this.
THanks in advance