Navigation Tree icon and labels in AdvancedDataGrid
In this example you can see how we can change the label and icon of the navigation tree in AdvancedDataGrid control.
In this example you can see how we can change the label and icon of the navigation tree in AdvancedDataGrid control.Navigation Tree icon and labels in AdvancedDataGrid in Flex4:
In this example you can see how we can change the label and icon of the navigation tree in AdvancedDataGrid control. You can use the style property for change the icon and label of the tree. These are following: defaultLeafIcon, disclouserCloseIcon, disclosureOpenIcon, folderCloseIcon, folderOpenIcon.
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", children: [ {CourseName:"B.Sc.", children:[ {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}]}, {CourseName:"B.tech.", children:[ {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}]}, {CourseName:"B.Pharma.", children:[ {Branch:"Pharmacy", Girls:70, Boys:130, TotalStudent:200, PASSinper:99.8, FAILinper:0.2}]}, {CourseName:"M.B.A.", children:[ {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}]}, {CourseName:"M.C.A.", children:[ {Branch:"Computer Science", Girls:30, Boys:90, TotalStudent: 120, PASSinper:99.1, FAILinper:0.9}]} ]} ]); ]]> </fx:Script> <s:Panel title="Navigation tree icons and labels in AdvancedDataGrid" height="419" width="699"> <mx:AdvancedDataGrid sortExpertMode="true" height="363" x="13" y="13" width="669" defaultLeafIcon="{null}" folderOpenIcon="@Embed (source='C:/work/bikrant/flex4component/navigationiconinadvanceddatagrid/folder-open.gif')" folderClosedIcon="@Embed (source='C:/work/bikrant/flex4component/navigationiconinadvanceddatagrid/close_folder.gif')"> <mx:dataProvider> <mx:HierarchicalData source="{student}"/> </mx:dataProvider> <mx:columns> <mx:AdvancedDataGridColumn dataField="Course"/> <mx:AdvancedDataGridColumn dataField="CourseName" headerText="CourseName"/> <mx:AdvancedDataGridColumn dataField="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.
