Home Tutorial Flex Flex4 Components groupIconFunction in AdvancedDataGrid

 
 

groupIconFunction in AdvancedDataGrid
Posted on: June 16, 2010 at 12:00 AM
In this example you can see how we can control the display of the leaf nodes of the navigation tree.

groupIconFunction in AdvancedDataGrid:

In this example you can see how we can control the display of the leaf nodes of the navigation tree. This control achieved by the groupIconFunction property in AdvancedDataGrid. The groupIconFunction property control the icon.

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]

[Embed(source="C:/work/bikrant/flex4component

/groupiconfunctioninadvanceddatagrid/list.gif")]

public var imageicon:Class;

// groupIconFunction as a callback function

public function imageiconfun(item:Object, value:int):Class {

if(value == 1){

return imageicon;

}

else{

return null;

}

}

[Bindable]

private var student:ArrayCollection = new ArrayCollection([

{Course:"Course", categories: [

{Course:"B.Sc.", categories:[

{Branch:"Physics", Girls:60, Boys:120, TotalStudent:180, PASSinper:98.0, FAILinper:2.0},

{Branch:"Chemistry", Girls:100, Boys:50, TotalStudent:150, PASSinper:97.0, FAILinper:3.0},

{Branch:"Mathematics", Girls:50, Boys:150, TotalStudent:200, PASSinper:98.5, FAILinper:1.5}]},

{Course:"B.tech.", categories:[

{Branch:"CS", Girls: 45, Boys:75, TotalStudent:120, PASSinper:99.0, FAILinper:1.0},

{Branch:"IT", Girls: 55, Boys:65, TotalStudent:120, PASSinper:99.5, FAILinper:0.5},

{Branch:"EC", Girls: 25, Boys:95, TotalStudent:120, PASSinper:96.7, FAILinper:3.3},

{Branch:"EI", Girls: 40, Boys:80, TotalStudent:120, PASSinper:95, FAILinper:5},

{Branch:"Mechanical", Girls:10, Boys: 80, TotalStudent:90, PASSinper:97.5, FAILinper:2.5},

{Branch:"Civil", Girls: 15, Boys:45, TotalStudent:60, PASSinper:92, FAILinper:8}]},

{Course:"B.Pharma.", categories:[

{Branch:"Pharmacy", Girls:70, Boys:130, TotalStudent:200, PASSinper:99.8, FAILinper:0.2}]},

{Course:"M.B.A.", categories:[

{Branch:'HR', Girls:48, Boys:72, TotalStudent:120, PASSinper:100, FAILinper:0},

{Branch:'Finance', Girls:40, Boys:80, TotalStudent:120, PASSinper:85, FAILinper:15},

{Branch:'Marketing', Girls:20, Boys:100, TotalStudent:120, PASSinper:99, FAILinper:1},

{Branch:'IT & HR', Girls:30, Boys:90, TotalStudent:120, PASSinper:100, FAILinper:0}]},

{Course:"M.C.A.", categories:[

{Branch:"Computer Science", Girls:30, Boys:90, TotalStudent: 120, PASSinper:99.1,

 FAILinper:0.9}]}

]}

]);

]]>

</fx:Script>

<s:Panel title="groupIconFunction in AdvancedDataGrid" height="419" width="728">

<mx:AdvancedDataGrid

sortExpertMode="true"

height="363"

x="13" y="13"

width="703" groupIconFunction="imageiconfun">

<mx:dataProvider>

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

</mx:dataProvider>

<mx:columns>

<mx:AdvancedDataGridColumn dataField="Course"/>

<mx:AdvancedDataGridColumn dataField="Branch" headerText="Branch"/>

<mx:AdvancedDataGridColumn dataField="Girls"/>

<mx:AdvancedDataGridColumn dataField="Boys"/>

<mx:AdvancedDataGridColumn dataField="TotalStudent"/>

<mx:AdvancedDataGridColumn dataField="PASSinper"/>

<mx:AdvancedDataGridColumn dataField="FAILinper"/>

</mx:columns>

</mx:AdvancedDataGrid>

</s:Panel>

</s:Application>

Output:

Running Application:

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

Download this code

Related Tags for groupIconFunction in AdvancedDataGrid:


Ask Questions?

If you are facing any programming issue, such as compilation errors or not able to find the code you are looking for.

Ask your questions, our development team will try to give answers to your questions.