Item Renderer in AdvancedDataGrid
In this example you can see how we can use a item renderer property in AdvanceddataGrid control.
In this example you can see how we can use a item renderer property in AdvanceddataGrid control.Item Renderer in AdvancedDataGrid:
In this example you can see how we can use a item renderer property in AdvanceddataGrid control.
The tag of item renderer property is:
<mx:rendererProviders>
<mx:AdvancedDataGridRendererProvider
dataField="SubjectMarks"
renderer="chartrendererinadvanceddatagrid"
columnIndex="0"
columnSpan="0"/>
</mx:rendererProviders>
It has the following property: column, columnIndex, columnSpan, dataField, depth, renderer, rowSpan. In this example we use a pie chart as a item renderer and displayed in AdvancedDataGrid.
Example:
|
<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"> <fx:Script> <![CDATA[ import mx.collections.ArrayCollection; [Bindable] private var student:ArrayCollection= new ArrayCollection([ {Name:"Amit", TotalMarks:317, children:[ {SubjectMarks:[{Marks:68},{Marks:62},{Marks:74},{Marks:56},{Marks:57}]}]}, {Name:"Sumit", TotalMarks:297, children:[ {SubjectMarks:[{Marks:50},{Marks:60},{Marks:62},{Marks:70},{Marks:55}]}]}, {Name:"Reena", TotalMarks:340, children:[ {SubjectMarks:[{Marks:76},{Marks:71},{Marks:73},{Marks:55},{Marks:65}]}]}, {Name:"Bikrant", TotalMarks:382, children:[ {SubjectMarks:[{Marks:82},{Marks:61},{Marks:75},{Marks:87},{Marks:77}]} ]} ]); ]]> </fx:Script> <s:Panel title="Item Renderer in AdvancedDataFrid Example" width="545" height="393"> <mx:AdvancedDataGrid id="adg" variableRowHeight="true" x="11" y="11" height="339" width="522"> <mx:dataProvider> <mx:HierarchicalData source="{student}"/> </mx:dataProvider> <mx:columns> <mx:AdvancedDataGridColumn dataField="Name" headerText="Student Name"/> <mx:AdvancedDataGridColumn dataField="TotalMarks" headerText="Total Marks (IN 500)"/> </mx:columns> <mx:rendererProviders> <mx:AdvancedDataGridRendererProvider dataField="SubjectMarks" renderer="chartrendererinadvanceddatagrid" columnIndex="0" columnSpan="0"/> </mx:rendererProviders> </mx:AdvancedDataGrid> </s:Panel> </s:Application> |
Renderer component chartrendererinadvanceddatagrid.mxml
|
<?xml version="1.0"?> <mx:VBox height="200" width="100%" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:s="library://ns.adobe.com/flex/spark"> <fx:Declarations> <mx:SolidColor id="sc1" color="blue" alpha=".3"/> <mx:SolidColor id="sc2" color="red" alpha=".3"/> <mx:SolidColor id="sc3" color="green" alpha=".3"/> <mx:SolidColor id="sc4" color="gray" alpha=".3"/> <mx:SolidColor id="sc5" color="black" alpha=".3"/> </fx:Declarations> <mx:PieChart dataProvider="{data.SubjectMarks}" width="100%" height="100%" showDataTips="true"> <mx:series> <mx:PieSeries labelPosition="callout" field="Marks" fills="{[sc1, sc2, sc3, sc4, sc5]}" /> </mx:series> </mx:PieChart> </mx:VBox> |
Output:
Running Application:
To view this page ensure that Adobe Flash Player version 10.0.0 or greater is installed.
