Displaying hierarchical XML data in AdvancedDataGrid

Home Tutorial Flex Flex4 Components Displaying hierarchical XML data in AdvancedDataGrid

Displaying hierarchical XML data in AdvancedDataGrid
Posted on: June 16, 2010 at 12:00 AM

Hierarchical data is a structure of parent and child items.

Displaying hierarchical XML data in AdvancedDataGrid:

Hierarchical data is a structure of parent and child items. In this example we use a XMLList for providing a hierarchical data to the AdvancedDataGrid. You set the dataField property like dataField="@Course". You will import the two packages :

import mx.collections.HierarchicalData;

import mx.collections.XMLListCollection;

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:Declarations>

<fx:XMLList id="student" xmlns="">

<Branch Branch="Physics" Girls="60" Boys="120" TotalStudent="180" PASSinper="98.0"

FAILinper="2.0"/>

<Branch Branch="Chemistry" Girls="100" Boys="50" TotalStudent="150" PASSinper="97.0"

FAILinper="3.0"/>

<Branch Branch="Mathematics" Girls="50" Boys="150" TotalStudent="200" PASSinper="98.5"

FAILinper="1.5"/>

</Course>

<Branch Branch="CS" Girls="45" Boys="75" TotalStudent="120" PASSinper="99.0"

FAILinper="1.0"/>

<Branch Branch="IT" Girls="55" Boys="65" TotalStudent="120" PASSinper="99.5"

FAILinper="0.5"/>

<Branch Branch="EC" Girls="25" Boys="95" TotalStudent="120" PASSinper="96.7"

FAILinper="3.3"/>

<Branch Branch="EI" Girls="40" Boys="80" TotalStudent="120" PASSinper="95"

FAILinper="5.0"/>

<Branch Branch="Mechanical" Girls="10" Boys="80" TotalStudent="90" PASSinper="97.5"

FAILinper="2.5"/>

<Branch Branch="Civil" Girls="15" Boys="45" TotalStudent="60" PASSinper="92"

FAILinper="8"/>

</Course>

<Branch Branch="Pharmacy" Girls="70" Boys="130" TotalStudent="200" PASSinper="99.8"

FAILinper="0.2"/>

</Course>

<Branch Branch="HR" Girls="48" Boys="72" TotalStudent="120" PASSinper="100"

FAILinper="0"/>

<Branch Branch="Finance" Girls="40" Boys="80" TotalStudent="120" PASSinper="85"

FAILinper="15"/>

<Branch Branch="Marketing" Girls="20" Boys="100" TotalStudent="120" PASSinper="99"

FAILinper="1"/>

<Branch Branch="IT and HR" Girls="30" Boys="90" TotalStudent="120" PASSinper="100"

FAILinper="0"/>

</Course>

<Branch Branch="Computer Science" Girls="30" Boys="90" TotalStudent="120"

PASSinper="99.1" FAILinper="0.9"/>

</Course>

</fx:XMLList>

</fx:Declarations>

<fx:Script>

<![CDATA[

import mx.collections.HierarchicalData;

import mx.collections.XMLListCollection;

]]>

</fx:Script>

<s:Panel title="Displaying Hierarchical XML data in AdvancedDataGrid" height="419"

width="728">

<mx:AdvancedDataGrid

sortExpertMode="true"

height="363"

x="13" y="13"

width="703" dataProvider="{new HierarchicalData(student)}">

<mx:columns>

<mx:AdvancedDataGridColumn dataField="@Course" headerText="Course"/>

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

<mx:AdvancedDataGridColumn dataField="@Girls" headerText="Girls"/>

<mx:AdvancedDataGridColumn dataField="@Boys" headerText="Boys"/>

<mx:AdvancedDataGridColumn dataField="@TotalStudent" headerText="TotalStudent"/>

<mx:AdvancedDataGridColumn dataField="@PASSinper" headerText="PASSinper"/>

<mx:AdvancedDataGridColumn dataField="@FAILinper" headerText="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 Displaying hierarchical XML data in AdvancedDataGrid:

«Previous Index Next»

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.

Tutorial Topics