Home Tutorial Flex Flex4 Components Separate column for the navigation tree in AdvancedDataGrid

 
 

Separate column for the navigation tree in AdvancedDataGrid
Posted on: June 16, 2010 at 12:00 AM
In this example display a hierarchical data in AdvancedDataGrid but the navigation tree has a separate column.

Separate column for the navigation tree in AdvancedDataGrid :

In this example display a hierarchical data in AdvancedDataGrid but the navigation tree has a separate column. You can set the folderClosedIcon, folderOpenIcon, defaultLeafIcon property as a null and provide a AdvancedDataGridColumn for this tree.The open and close icon will be displayed in this column and the label will not be displayed in this column.

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([

{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="Separate Column for the navigation tree in AdvancedDataGrid" height="419"

 width="728">

<mx:AdvancedDataGrid

sortExpertMode="true"

height="363"

x="13" y="13"

width="703"

folderClosedIcon="{null}"

folderOpenIcon="{null}"

defaultLeafIcon="{null}">

<mx:dataProvider>

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

</mx:dataProvider>

<mx:columns>

<mx:AdvancedDataGridColumn headerText="" width="60"/>

<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 Separate column for the navigation tree 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.