As Wi-Fi growth and popularity continues to climb, not everyone understands the risks that come with connecting to public Wi-Fi or even offering Wi-Fi to employees, visitors and guests. Download the resource kit to make sure your safe wherever business takes you!
AdvancedDataGrid Tree Structure
AdvancedDataGrid Query:
1. As shown in the sample image i need to add multiple filter child nodes dynamically.
Here in this case ClusterBy,FilterComponent,
2.For the added child nodes i need show delete button so that i can delete that added node dynamically
Refer the sample image.
1. As shown in the sample image i need to add multiple filter child nodes dynamically.
Here in this case ClusterBy,FilterComponent,
2.For the added child nodes i need show delete button so that i can delete that added node dynamically
Refer the sample image.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" creationComplete="init()">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.controls.Alert;
import mx.controls.listClasses.IListItemRenderer;
private function init():void {
//attributeType.setFocus();
}
[Bindable]
private var student:ArrayCollection = new ArrayCollection(
[
{Course:"Filter", children: [
{Course:"ClusterBy", children:[
{Course:"AttributeType", Boys:120, TotalStudent:180, PASSinper:98.0, FAILinper:2.0}
]
},
{Course:"FilterComponent", children:[
{Course:"ClusterAggregateFunction", Boys:120, TotalStudent:180, PASSinper:98.0, FAILinper:2.0}
]
},
{Course:"AbstractQuestionSpecification", children:[
{Course:"AttributeType", Boys:80, TotalStudent:180, PASSinper:98.0, FAILinper:2.0},
{Course:"NodeColourRegex",Boys:80, TotalStudent:120, PASSinper:95, FAILinper:5},
{Course:"NavigationStrategyComponentAlias", Boys: 80, TotalStudent:90, PASSinper:97.5, FAILinper:2.5},
{Course:"Context", children:[
{Course:"QuestionTypeHandler", children:[
{Course:"AttributeType",Boys:80, TotalStudent:180, PASSinper:98.0, FAILinper:2.0},
{Course:"Value",Boys:80, TotalStudent:180, PASSinper:98.0, FAILinper:2.0}
]
}
]
},
]
},
{Course:"Operator", children:[
{Course:"FilterComponentOperatorType", Boys: 80, TotalStudent:90, PASSinper:97.5, FAILinper:2.5}
]
},
]
}
]);
private function save():void{
Alert.show("Saved...");
}
private function add():void {
var item:Object = {};
if(student.length == 1){
var course:Object = student.getItemAt(0);
if(course != null){
var o:Object;
o = findCourse(course.children[0], "AttributeType");
if(o != null)
item.attributeType = o.Value;
o = findCourse(course.children[1], "ClusterAggregateFunction");
if(o != null)
item.clusterAggregateFunction = o.Value;
o = findCourse(course.children[2], "AttributeType");
if(o != null)
item.abstractAttributeType = o.Value;
o = findCourse(course.children[2], "NodeColourRegex");
if(o != null)
item.nodeColourRegex = o.Value;
o = findCourse(course.children[2], "NavigationStrategyComponentAlias");
if(o != null)
item.navigationStrategyComponentAlias = o.Value;
o = findCourse(course.children[2], "Value");
if(o != null)
item.value = o.Value;
}
}
dg.dataProvider.addItem(item);
}
private function findCourse(parent:Object, name:String):Object{
for(var i:uint = 0; i < parent.children.length; i++){
var child:Object = parent.children[i];
if(child.Course == name){
return child;
}else if(child.hasOwnProperty("children")){
return findCourse(child, name);
}
}
return null;
}
]]>
</mx:Script>
<mx:Panel title="Include Filter" height="600" width="699">
<mx:AdvancedDataGrid id="treeDg" sortExpertMode="true" displayItemsExpanded="true" height="363" x="13" y="13" width="669"
defaultLeafIcon="{null}"
folderOpenIcon="{null}"
folderClosedIcon="{null}">
<mx:dataProvider>
<mx:HierarchicalData source="{student}" />
</mx:dataProvider>
<mx:columns>
<mx:AdvancedDataGridColumn dataField="Course" />
<mx:AdvancedDataGridColumn dataField="Value">
<mx:itemRenderer>
<mx:Component>
<mx:Canvas width="100%">
<mx:Script>
<![CDATA[
override public function set data(value:Object):void{
super.data = value;
if(data != null)
ti.text = data.Value;
}
private function setValue(event:Event):void{
if(data != null)
data.Value = event.target.text
}
]]>
</mx:Script>
<mx:TextInput id="ti" visible="{data.hasOwnProperty('Boys')}" width="98%" change="setValue(event)"/>
</mx:Canvas>
</mx:Component>
</mx:itemRenderer>
</mx:AdvancedDataGridColumn>
</mx:columns>
</mx:AdvancedDataGrid>
<mx:HBox width="100%" horizontalAlign="right" paddingRight="10" paddingBottom="10">
<mx:Button label="Add" click="add()"/>
</mx:HBox>
<mx:DataGrid id="dg" horizontalCenter="0" verticalCenter="0" dataProvider="[]">
<mx:columns>
<mx:DataGridColumn dataField="attributeType"/>
<mx:DataGridColumn dataField="clusterAggregateFunction" width="150" />
<mx:DataGridColumn dataField="abstractAttributeType"/>
<mx:DataGridColumn dataField="nodeColourRegex"/>
<mx:DataGridColumn dataField="navigationStrategyComponentAlias"/>
<mx:DataGridColumn dataField="value"/>
</mx:columns>
</mx:DataGrid>
<mx:ControlBar>
<mx:Spacer width="80%"/>
<mx:Button paddingRight="20" label="Save" click="save()"/>
</mx:ControlBar>
</mx:Panel>
</mx:Application>
Who is Participating?
can you describe more about :
" As shown in the sample image i need to add multiple filter child nodes dynamically.
Here in this case ClusterBy,FilterComponent,
" As shown in the sample image i need to add multiple filter child nodes dynamically.
Here in this case ClusterBy,FilterComponent,
Thanks for your sol.
Can you redesign my screen according to the below sample image which is my actual requirement.
If you observe in the sample image when we expand clusterby by default it should contain Attributetype form without remove button for it. Next when we click on add button next to cluserby it should add mulitple nodes dynamically with Attributetype and it should contain remove button for those added nodes.And when we click on remove button it should remove that added nodes dynamically.
Simillarly for others also
1.ClusterBym
AttributeType
2.FilterComponent
ClusterAggregateFunction
3.AbstractQuestionSpecific
AttributeType
NodeColourRegex
NavigationStrategyComponen
Below is my current working code.
Thanks,
Alam.
Can you redesign my screen according to the below sample image which is my actual requirement.
If you observe in the sample image when we expand clusterby by default it should contain Attributetype form without remove button for it. Next when we click on add button next to cluserby it should add mulitple nodes dynamically with Attributetype and it should contain remove button for those added nodes.And when we click on remove button it should remove that added nodes dynamically.
Simillarly for others also
1.ClusterBym
AttributeType
2.FilterComponent
ClusterAggregateFunction
3.AbstractQuestionSpecific
AttributeType
NodeColourRegex
NavigationStrategyComponen
Below is my current working code.
Thanks,
Alam.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.controls.Alert;
import mx.controls.listClasses.IListItemRenderer;
import mx.core.mx_internal;
[Bindable]
private var student:ArrayCollection = new ArrayCollection(
[
{Course:"Filter", children: [
{Course:"ClusterBy", showButtons:true, children:[
{Course:"AttributeType", Boys:120, TotalStudent:180, PASSinper:98.0, FAILinper:2.0}
]
},
{Course:"FilterComponent",showButtons:true, children:[
{Course:"ClusterAggregateFunction", Boys:120, TotalStudent:180, PASSinper:98.0, FAILinper:2.0}
]
},
{Course:"AbstractQuestionSpecification", showButtons:true, children:[
{Course:"AttributeType", Boys:80, TotalStudent:180, PASSinper:98.0, FAILinper:2.0},
{Course:"NodeColourRegex",Boys:80, TotalStudent:120, PASSinper:95, FAILinper:5},
{Course:"NavigationStrategyComponentAlias", Boys: 80, TotalStudent:90, PASSinper:97.5, FAILinper:2.5},
{Course:"Context", children:[
{Course:"QuestionTypeHandler", showButtons:true, children:[
{Course:"AttributeType",Boys:80, TotalStudent:180, PASSinper:98.0, FAILinper:2.0},
{Course:"Value",Boys:80, TotalStudent:180, PASSinper:98.0, FAILinper:2.0}
]
}
]
},
]
},
{Course:"Operator", children:[
{Course:"FilterComponentOperatorType", Boys: 80, TotalStudent:90, PASSinper:97.5, FAILinper:2.5}
]
},
]
}
]);
private function save():void{
Alert.show("Saved...");
}
private function add():void {
var item:Object = { };
var flag:Boolean = true;
if(student.length == 1){
var course:Object = student.getItemAt(0);
if(course != null){
var o:Object;
o = findCourse(course.children[0], "AttributeType");
if (o != null) {
if(o.Value!=null && o.Value!="")
item.attributeType = o.Value;
else
flag=false;
}
o = findCourse(course.children[1], "ClusterAggregateFunction");
if (o != null) {
if(o.Value!=null && o.Value!="")
item.clusterAggregateFunction = o.Value;
else
flag=false;
}
o = findCourse(course.children[2], "AttributeType");
if (o != null) {
if(o.Value!=null && o.Value!="")
item.attributeType2 = o.Value;
else
flag=false;
}
o = findCourse(course.children[2], "NodeColourRegex");
if (o != null) {
if(o.Value!=null && o.Value!="")
item.nodeColourRegex = o.Value;
else
flag=false;
}
o = findCourse(course.children[2], "AttributeType");
if (o != null) {
if(o.Value!=null && o.Value!="")
item.attributeType3 = o.Value;
else
flag=false;
}
o = findCourse(course.children[2], "NavigationStrategyComponentAlias");
if (o != null) {
if(o.Value!=null && o.Value!="")
item.navigationStrategyComponentAlias = o.Value;
else
flag=false;
}
o = findCourse(course.children[2], "Value");
if (o != null) {
if(o.Value!=null && o.Value!="")
item.value = o.Value;
else
flag=false;
}
o = findCourse(course.children[3], "FilterComponentOperatorType");
if (o != null) {
if(o.Value!=null && o.Value!="")
item.operator = o.Value;
else
flag=false;
}
if (flag)
dg.dataProvider.addItem(item);
else
Alert.show("Please Enter Required Values.");
}
}
}
private function findCourse(parent:Object, name:String):Object{
var a:Array = treeDg.mx_internal::rendererArray;
for(var i:uint = 0; i < parent.children.length; i++){
var child:Object = parent.children[i];
if(child.Course == name){
return child;
}else if(child.hasOwnProperty("children")){
return findCourse(child, name);
}
}
return null;
}
]]>
</mx:Script>
<mx:Panel title="Include Filter" height="600" width="699">
<mx:AdvancedDataGrid id="treeDg" sortExpertMode="true" displayItemsExpanded="true" height="363" x="13" y="13" width="669"
defaultLeafIcon="{null}"
folderOpenIcon="{null}"
folderClosedIcon="{null}">
<mx:dataProvider>
<mx:HierarchicalData source="{student}" />
</mx:dataProvider>
<mx:groupItemRenderer>
<mx:Component>
<mx:AdvancedDataGridGroupItemRenderer width="100%">
<mx:Script>
<![CDATA[
import mx.collections.HierarchicalCollectionView;
import mx.controls.AdvancedDataGrid;
import mx.controls.Button;
private var button:Button;
override protected function createChildren():void
{
super.createChildren();
button = new Button();
button.label = "+";
button.width = 35;
button.height = 22;
button.addEventListener(MouseEvent.CLICK, addAttributeType);
addChild(button);
}
private function addAttributeType(event:MouseEvent):void{
var dp:HierarchicalCollectionView = outerDocument.treeDg.dataProvider as HierarchicalCollectionView;
dp.addChild(data, {Course:"ClusterBy", children:[
{Course:"AttributeType", Boys:120, TotalStudent:180, PASSinper:98.0, FAILinper:2.0}
]
});
}
override public function set data(value:Object):void{
super.data = value;
if(data != null){
button.visible = (data.showButtons == true);
}
}
override protected function updateDisplayList(unscaledWidth:Number,
unscaledHeight:Number):void
{
super.updateDisplayList(unscaledWidth, unscaledHeight);
button.x = unscaledWidth - button.width - 5;
}
]]>
</mx:Script>
</mx:AdvancedDataGridGroupItemRenderer>
</mx:Component>
</mx:groupItemRenderer>
<mx:columns>
<mx:AdvancedDataGridColumn dataField="Course">
<mx:itemRenderer>
<mx:Component>
<mx:AdvancedDataGridGroupItemRenderer width="100%">
<mx:Script>
<![CDATA[
import mx.collections.HierarchicalCollectionView;
import mx.controls.AdvancedDataGrid;
import mx.controls.Button;
private var button:Button;
override protected function createChildren():void
{
super.createChildren();
button = new Button();
button.label = "-";
button.width = 35;
button.height = 22;
button.addEventListener(MouseEvent.CLICK, removeAttributeType);
addChild(button);
}
private function removeAttributeType(event:MouseEvent):void{
var parentItem:Object = AdvancedDataGrid(owner).getParentItem(data);
var parentItem1:Object = AdvancedDataGrid(owner).getParentItem(parentItem);
var dp:HierarchicalCollectionView = AdvancedDataGrid(owner).dataProvider as HierarchicalCollectionView;
dp.removeChild(parentItem1, parentItem);
}
override public function set data(value:Object):void{
super.data = value;
if(data != null){
button.visible = (data.Course == 'AttributeType');
}
}
override protected function updateDisplayList(unscaledWidth:Number,
unscaledHeight:Number):void
{
super.updateDisplayList(unscaledWidth, unscaledHeight);
button.x = unscaledWidth - button.width - 5;
}
]]>
</mx:Script>
</mx:AdvancedDataGridGroupItemRenderer>
</mx:Component>
</mx:itemRenderer>
</mx:AdvancedDataGridColumn>
<mx:AdvancedDataGridColumn dataField="Value">
<mx:itemRenderer>
<mx:Component>
<mx:Canvas width="100%">
<mx:Script>
<![CDATA[
override public function set data(value:Object):void{
super.data = value;
if(data != null)
ti.text = data.Value;
}
private function setValue(event:Event):void{
if(data != null)
data.Value = event.target.text
}
]]>
</mx:Script>
<mx:TextInput id="ti" visible="{data.hasOwnProperty('Boys')}" width="98%" change="setValue(event)"/>
</mx:Canvas>
</mx:Component>
</mx:itemRenderer>
</mx:AdvancedDataGridColumn>
</mx:columns>
</mx:AdvancedDataGrid>
<mx:HBox width="100%" horizontalAlign="right" paddingRight="10" paddingBottom="10">
<mx:Button label="Add" click="add()"/>
</mx:HBox>
<mx:DataGrid id="dg" horizontalCenter="0" verticalCenter="0" dataProvider="[]">
<mx:columns>
<mx:DataGridColumn dataField="attributeType" headerText="AttributeType"/>
<mx:DataGridColumn dataField="clusterAggregateFunction" headerText="ClusterAggregateFunction" width="150"/>
<mx:DataGridColumn dataField="attributeType2" headerText="AttributeType" />
<mx:DataGridColumn dataField="nodeColourRegex" headerText="NodeColourRegex"/>
<mx:DataGridColumn dataField="navigationStrategyComponentAlias" headerText="NavigationStrategyComponentAlias"/>
<mx:DataGridColumn dataField="attributeType3" headerText="AttributeType"/>
<mx:DataGridColumn dataField="value" headerText="Value"/>
<mx:DataGridColumn dataField="operator" headerText="Operator"/>
</mx:columns>
</mx:DataGrid>
<mx:ControlBar>
<mx:Spacer width="80%"/>
<mx:Button paddingRight="20" label="Save" click="save()"/>
</mx:ControlBar>
</mx:Panel>
</mx:Application>
That totally different what you draw on your top picture. Now you don't want to use new rows instead creating a Form as item rendere
Yes, we need to create forms for clusterBy,FilterComponent,
Can you provide me the sample code.
Thanks,
Alam.
Can you provide me the sample code.
Thanks,
Alam.
I spent 3 hours for creating this sample.
Now you're asking to rewrite from begging.
I would liketo get points for my time first. Before starting a new design.
Now you're asking to rewrite from begging.
I would liketo get points for my time first. Before starting a new design.
Question has a verified solution.
Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.
Have a better answer? Share it in a comment.
All Courses
From novice to tech pro — start learning today.
Why you cannot start working yourself?
Open in new window