Item Renderer in AdvancedDataGrid


 

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">

0

<mx:dataProvider>

<mx:HierarchicalData source="{student}"/>

</mx:dataProvider>

1

<mx:columns>

<mx:AdvancedDataGridColumn dataField="Name" headerText="Student Name"/>

<mx:AdvancedDataGridColumn dataField="TotalMarks" headerText="Total Marks (IN 500)"/>

2

</mx:columns>

<mx:rendererProviders>

<mx:AdvancedDataGridRendererProvider

3

dataField="SubjectMarks"

renderer="chartrendererinadvanceddatagrid"

columnIndex="0"

4

columnSpan="0"/>

</mx:rendererProviders>

</mx:AdvancedDataGrid>

5

</s:Panel>

</s:Application>

Renderer component chartrendererinadvanceddatagrid.mxml

<?xml version="1.0"?>

6

<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">

7

<fx:Declarations>

<mx:SolidColor id="sc1" color="blue" alpha=".3"/>

<mx:SolidColor id="sc2" color="red" alpha=".3"/>

8

<mx:SolidColor id="sc3" color="green" alpha=".3"/>

<mx:SolidColor id="sc4" color="gray" alpha=".3"/>

<mx:SolidColor id="sc5" color="black" alpha=".3"/>

9

</fx:Declarations>

<mx:PieChart dataProvider="{data.SubjectMarks}"

width="100%"

0

height="100%"

showDataTips="true">

<mx:series>

1

<mx:PieSeries

labelPosition="callout"

field="Marks"

2

fills="{[sc1, sc2, sc3, sc4, sc5]}" />

</mx:series>

</mx:PieChart>

3

</mx:VBox>

Output:

4

Running Application:

To view this page ensure that Adobe Flash Player version 10.0.0 or greater is installed.

Download this code

5

Download renderer file code

   

Ads