I had a need to bold the data in only one row of a Flex DataGrid. There were some solutions posted on-line (especially ninjacaptain) but honestly I could not get them to work the way I wanted. So, using their examples as a starting place, I created an extremely simple ItemRenderer which would bold the row desired. The key to getting it to work is to have some property in your dataProvider which you can use to determine whether to bold or not. In the example, I actually added an additional property called 'fontWeight' and set the value to either 'bold' or 'normal' depending on the results I wanted. You can potentially key off of any existing data element from your dataProvider, such as a property having a value greater or equal to some other value. Basically, whatever that is available to make the determination to bold or not. Lastly, instead of fontWeight, you could set any of the additional style properties available for the DataGridItemRender class. Here is the example with the source code. Here is the code for the itemRenderer.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | package com.othenos.renderer { import mx.controls.dataGridClasses.DataGridColumn; import mx.controls.dataGridClasses.DataGridItemRenderer; public class MyDataGridItemRenderer extends DataGridItemRenderer { public function MyDataGridItemRenderer() { super(); } override public function set data(value:Object):void { super.data=value; /** * First insure the value is non-null and not a DataGridItem type but of the type that you are expecting * as the value. In this case, it is an Object. **/ if (value && !(value is DataGridColumn) && value is Object) /** * In the example, there is a property on each value that is * named fontWeight and has the value of either 'normal' or 'bold'. * * Of course, you could do this in many different ways. For example, * you may want to bold the line only when a certain property equals * a certain value. Or when the property exceeds a certain value. In these * cases, you may or may not have multiple lines of the grid which are 'bold'. * * This example sets the fontWeight style. You could, of course, set one or many of the style * properties that are available to the DataGridItemRenderer. The result would apply to the * DataGrid row associated with this value. **/ setStyle('fontWeight', value.fontWeight); } } } } |
Works great. Something to keep in mind though. If you set the weight using a conditional instead of embedding the value in the data as above, you need to make sure that the weight gets set back to normal when the condition is false.