FLEX DataGrid Column Modification - actionscript-3

I am new in Flex. I want to display data in attached grid format. I found best way to display in DataGrid. But the CIs column has multiple entries so because of that other columns will duplicate. I want to avoid duplicate data in other columns. Attached screenshot is of excel, i want to achieve same format in Flex. I am using Flex 4.5

Best way I see to do what you want is to create a custom item renderer for the CLS column and have it render as a list control. That way, the CLS item in each row will only take up one row instead of multiple rows.

You can get some idea by following code... you can build logic using below concept for your implementation. Below example is sample not complete according to your requirement: -
<?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>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.core.UIComponent;
import mx.events.AdvancedDataGridEvent;
import mx.events.ListEvent;
[Bindable]
private var dpHierarchy:ArrayCollection= new ArrayCollection
([
{name:"Barbara Jennings", address: "Arizona", contact:999970, orders:["1"]},
{name:"Dana Binn", address: "Arizona", contact:9999130, orders:["2"]},
{name:"Joe Smith", address: "California", contact:9992929, orders:["3"]},
{name:"Alice Treu", address: "California", contact:9999230, orders:["4"]}
]);
private function addOrder():void
{
for(var i:int = 0 ; i < dpHierarchy.length; i++)
{
if(dropDownID.selectedItem.name == dpHierarchy[i].name)
{
var itemUpdated:Array = dpHierarchy[i].orders;
itemUpdated.push(orderNumber.text);
dpHierarchy[i].orders = itemUpdated;
dpHierarchy.itemUpdated(dpHierarchy[i]);
break;
}
}
}
]]>
</fx:Script>
<mx:VBox x="30" y="30" width="450" height="400">
<s:HGroup>
<s:Button label="Add Order" click="addOrder()"/>
<s:DropDownList id="dropDownID" dataProvider="{dpHierarchy}" labelField="name" selectedIndex="0"/>
<s:TextInput id="orderNumber" width="100"/>
</s:HGroup>
<mx:AdvancedDataGrid id="myADG"
dataProvider="{dpHierarchy}"
variableRowHeight="true" wordWrap="true">
<mx:columns>
<mx:AdvancedDataGridColumn dataField="name" headerText="Name"/>
<mx:AdvancedDataGridColumn dataField="address" headerText="Address"/>
<mx:AdvancedDataGridColumn dataField="contact" headerText="Contact"/>
<mx:AdvancedDataGridColumn dataField="orders" headerText="Orders" itemRenderer="OrderItemRenderer"/>
</mx:columns>
</mx:AdvancedDataGrid>
</mx:VBox>
</s:Application>
Item Reenderer Name: - OrderItemRenderer
<?xml version="1.0" encoding="utf-8"?>
<s:MXAdvancedDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
focusEnabled="true" width="90%" height="90%">
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
private var initDG:ArrayCollection = new ArrayCollection();
override public function set data(value:Object):void
{
super.data = value;
initDG = new ArrayCollection(value.orders)
}
]]>
</fx:Script>
<mx:DataGrid id="dataGrid" dataProvider="{initDG}" headerHeight="0" rowCount="{initDG.length}"/>
</s:MXAdvancedDataGridItemRenderer>

Related

Borders of AdvancedDataGrid disappears in popup

The borders of AdvancedDataGrid are disappearing. I am using the same instance of popup object to show at different times.
For the first time the popup and ADG borders are fine but when i launch the popup next time, the borders get disappeared. Though borders reappear if i try to adjust column size. I am not able to get the cause of this issue and therefore not able to rectify it either.
I tried to readjust visibility of ADG and also tried to call invalidateDisplayList(), but no success.
*ADG = AdvancedDataGrid
I am attaching code snippets.
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" creationComplete="onCC()" width="1500" height="1000">
<s:layout>
<s:VerticalLayout />
</s:layout>
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.controls.advancedDataGridClasses.AdvancedDataGridSortItemRenderer;
import mx.managers.PopUpManager;
[Bindable]private var dp:ArrayCollection = new ArrayCollection();
private function onCC():void
{
var obj1:Object = new Object();
obj1.col1 = "col11";
obj1.col2 = "col12";
obj1.col3 = "col13";
dp.addItem(obj1);
obj1 = new Object()
obj1.col1 = "col21";
obj1.col2 = "col22";
obj1.col3 = "col23";
dp.addItem(obj1);
}
var popup:PopupPanel = new PopupPanel();
private function launchPopup():void
{
PopUpManager.addPopUp(popup, this as DisplayObject);
PopUpManager.centerPopUp(popup);
}
]]>
</fx:Script>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<mx:AdvancedDataGrid sortableColumns="false" sortItemRenderer="{null}" dataProvider="{dp}" draggableColumns="false" >
<mx:groupedColumns>
<mx:AdvancedDataGridColumn headerText="PM1" dataField="col1" />
<mx:AdvancedDataGridColumnGroup headerText="PM2" >
<mx:AdvancedDataGridColumn headerText="NE" dataField="col2" />
<mx:AdvancedDataGridColumn headerText="FE" dataField="col3"/>
</mx:AdvancedDataGridColumnGroup>
</mx:groupedColumns>
</mx:AdvancedDataGrid>
<mx:Button label="launch popup" click="launchPopup()" />
</s:WindowedApplication>
<?xml version="1.0" encoding="utf-8"?>
<s:TitleWindow xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" width="1000" height="750"
close="titlewindow1_closeHandler(event)">
<s:layout>
<s:HorizontalLayout paddingLeft="20" paddingRight="20" paddingTop="20" paddingBottom="20"/>
</s:layout>
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.events.CloseEvent;
import mx.managers.PopUpManager;
[Bindable] private var dp:ArrayCollection = new ArrayCollection();
protected function titlewindow1_closeHandler(event:CloseEvent):void
{
// TODO Auto-generated method stub
PopUpManager.removePopUp(this);
}
]]>
</fx:Script>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<mx:AdvancedDataGrid id="dg1" sortableColumns="false" sortItemRenderer="{null}" dataProvider="{dp}" draggableColumns="false" width="100%" height="100%">
<mx:groupedColumns>
<mx:AdvancedDataGridColumn headerText="PM1" dataField="col1" />
<mx:AdvancedDataGridColumnGroup headerText="PM2" >
<mx:AdvancedDataGridColumn headerText="NE" dataField="col2" />
<mx:AdvancedDataGridColumn headerText="FE" dataField="col3"/>
</mx:AdvancedDataGridColumnGroup>
</mx:groupedColumns>
</mx:AdvancedDataGrid>
<mx:AdvancedDataGrid id="dg2" sortableColumns="false" sortItemRenderer="{null}" dataProvider="{dp}" draggableColumns="false" width="100%" height="100%">
<mx:groupedColumns>
<mx:AdvancedDataGridColumn headerText="PM1" dataField="col1" />
<mx:AdvancedDataGridColumnGroup headerText="PM2" >
<mx:AdvancedDataGridColumn headerText="NE" dataField="col2" />
<mx:AdvancedDataGridColumn headerText="FE" dataField="col3"/>
</mx:AdvancedDataGridColumnGroup>
</mx:groupedColumns>
</mx:AdvancedDataGrid>
</s:TitleWindow>
I created a public method that the instance is non-null calls invalidateList() of the grid. Example:
// Update grids when the display is already instantiated
public function updates():void{
its grid.invalidateList();
}

How to update dataprovider data?

I have a datagrid with editable option set to true. If i change data in the grid view the same changes should apply to dataprovider.I am new to flex can any one help me to solve this.
My idea is we need to use ArrayCollection properties or itemUpdate method.
Have a look at my code.
I have one field in the data provider. In the data grid a have added this field twice to let you see the effect of editing. If you edit values in the second column and press Enter, you can see the result in the first one.
So your data provider is always up to date.
Here is the working example.
Let me know if you meant something else.
<?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 myDP:ArrayCollection = new ArrayCollection([
{myfield:"Hello"},
{myfield:"World"}
]);
]]>
</fx:Script>
<s:DataGrid id="myDG" x="30" y="30" height="120" dataProvider="{myDP}" editable="true">
<s:columns>
<s:ArrayList>
<s:GridColumn dataField="myfield" headerText="My Field" width="120"/>
<s:GridColumn dataField="myfield" headerText="My Field Edit" editable="true" rendererIsEditable="true" width="120">
<s:itemRenderer>
<fx:Component>
<s:GridItemRenderer>
<fx:Script>
<![CDATA[
import spark.events.TextOperationEvent;
protected function textinput_changeHandler(event:TextOperationEvent):void
{
var value:String = (event.currentTarget as TextInput).text
data[column.dataField] = value;
}
]]>
</fx:Script>
<s:TextInput text="{data['myfield']}" change="textinput_changeHandler(event)"/>
</s:GridItemRenderer>
</fx:Component>
</s:itemRenderer>
</s:GridColumn>
</s:ArrayList>
</s:columns >
</s:DataGrid>
</s:Application>

How to hide the contents of a flex data grid?

NOTE: I'm using FLEX 4.
Hi, I want to know if there is a way to hide the data of a data grid without hiding the data grid itself? I want the screen to open with the data grids appearing empty. I only want the contents of the data grid to be visible once the user has selected an option from a combo box. Is there a way to do this? (The reasons for this are sort of involved and not pleasant to explain, but it's something I have to do.)
Thanks!
You could set dataProvider of the data grid to null or an empty collection until ready to display your data.
By default, initialize null or an empty collection to the data grid. Then, when the desired combo box option is selected set the data grid data provider to valid data:
<?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">
<fx:Script>
<![CDATA[
import mx.collections.ArrayList;
import spark.events.IndexChangeEvent;
[Bindable]
public var data:ArrayList = new ArrayList([ "one", "two", "three" ]);
protected function combobox1_changeHandler(event:IndexChangeEvent):void
{
switch (comboBox.selectedItem)
{
case "Show data":
dataGrid.dataProvider = data;
break;
default:
dataGrid.dataProvider = null;
break;
}
}
]]>
</fx:Script>
<s:layout>
<s:VerticalLayout />
</s:layout>
<s:DataGrid id="dataGrid"
dataProvider="{null}" />
<s:ComboBox id="comboBox"
change="combobox1_changeHandler(event)">
<s:dataProvider>
<s:ArrayList>
<fx:String>Show data</fx:String>
<fx:String>Hide data</fx:String>
</s:ArrayList>
</s:dataProvider>
</s:ComboBox>
</s:Application>
Another approach would be to use Flex state system.
You could define two states to control visibility of data in the data grid. Then, set the data provider according to the current state:
<?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"
currentState="hideData">
<s:states>
<s:State name="showData" />
<s:State name="hideData" />
</s:states>
<fx:Script>
<![CDATA[
import mx.collections.ArrayList;
import spark.events.IndexChangeEvent;
[Bindable]
public var data:ArrayList = new ArrayList([ "one", "two", "three" ]);
protected function combobox1_changeHandler(event:IndexChangeEvent):void
{
switch (comboBox.selectedItem)
{
case "Show data":
currentState = "showData";
break;
default:
currentState = "hideData";
break;
}
}
]]>
</fx:Script>
<s:layout>
<s:VerticalLayout />
</s:layout>
<s:DataGrid id="dataGrid"
dataProvider.hideData="{null}"
dataProvider.showData="{data}" />
<s:ComboBox id="comboBox"
change="combobox1_changeHandler(event)">
<s:dataProvider>
<s:ArrayList>
<fx:String>Show data</fx:String>
<fx:String>Hide data</fx:String>
</s:ArrayList>
</s:dataProvider>
</s:ComboBox>
</s:Application>

Disable alternatingItemColor property for AdvancedDataGrid if the rows are empty

I have a custom AdvancedDataGrid and we use alternatingItemColors property which shows two different colors for rows of the AdvancedDataGrid. Now sometimes the datagrid has 15 rows but only 5 would have data and we want only first 5 rows to display alternating colors and rest of the rows should only display one color. Has anyone done this in past and if someone can please explain how to do this would be really appreciated.
Thanks in advance.
You have to override the Datagrid and override drawRowBackground method, if the rowInd is more than the number of rows then set the default color. See the code snippet mentioned given below -
public class CustomDataGrid extends AdvancedDataGrid
{
protected override function drawRowBackground(s:Sprite, rowIndex:int, y:Number, height:Number, color:uint, dataIndex:int):void{
var XMLdata:XML=rowNumberToData(dataIndex) as XML;
if(XMLdata!=null){
if(XMLdata.attribute(Constants.col) != undefined && XMLdata.attribute(Constants.col) != ""){
color=XMLdata.attribute(Constants.col);
}else{
color=0xFFFFFF;
}
}
super.drawRowBackground(s,rowIndex,y,height,color,dataIndex);
}
}
Either set rowCount to the actual row count when you have fewer rows than the height allows for, or override drawRowBackground.
Try by using Item renderer for your ADG: -
<?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>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.events.FlexEvent;
[Bindable]
private var dpHierarchy:ArrayCollection= new ArrayCollection([
{name:"A", region: "Arizona"},
{name:"B", region: "Arizona"},
{name:"C", region: "California"},
{name:"D", region: "California"}
]);
]]>
</fx:Script>
<mx:AdvancedDataGrid id="myADG"
width="500" height="500"
paddingBottom="0" paddingLeft="0" paddingRight="0" paddingTop="0"
dataProvider="{dpHierarchy}"
itemRenderer="DrawAlternateRowColor">
<mx:columns>
<mx:AdvancedDataGridColumn dataField="name" headerText="Name" />
<mx:AdvancedDataGridColumn dataField="region" headerText="Region" />
</mx:columns>
</mx:AdvancedDataGrid>
</s:Application>
//ItemRenderer name: - DrawAlternateRowColor -- you can use the same concept with you CADG.
<?xml version="1.0" encoding="utf-8"?>
<s:MXAdvancedDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
focusEnabled="true" alternatingItemColors="[#0000FF, #FF0000]"
width="100%" height="100%">
<s:Label id="lblData" verticalAlign="middle" text="{listData.label}" />
</s:MXAdvancedDataGridItemRenderer>

How to add items to a datagrid at runtime in flex4?

My UserInfromation form contains two input fields username,location(city) and one radio button as gender and two buttons add and reset.when I click on add button that data will be added in datagrid at runtime.
I am unable to reproduce how will i do this.
can anyone help me on this with example?
Here is a sample app (with code):
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<s:layout>
<s:VerticalLayout/>
</s:layout>
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
private var ac:ArrayCollection = new ArrayCollection();
protected function addBtn_clickHandler(event:MouseEvent):void
{
var obj:Object = new Object();
obj.userName = userNameTI.text;
obj.location = locationTI.text;
ac.addItem(obj);
}
]]>
</fx:Script>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<mx:Form width="100%">
<mx:FormItem label="UserName:">
<s:TextInput id="userNameTI"/>
</mx:FormItem>
<mx:FormItem label="Location:">
<s:TextInput id="locationTI"/>
</mx:FormItem>
</mx:Form>
<s:Button id="addBtn" label="Add" click="addBtn_clickHandler(event)"/>
<mx:DataGrid id="dg" width="100%" dataProvider="{ac}"/>
</s:WindowedApplication>
Couple of things are left for you as an exercise :)