Here is my dataGrid:
How can I get all the selected values of check
<mx:DataGrid id="dg"
dataProvider="{listOfItems}" verticalAlign="middle" rowHeight="20" rowCount="30"
selectable="true" verticalScrollPolicy="on" >
<mx:columns >
<mx:DataGridColumn id="col1"
dataField="value"
headerText="Item Name">
<mx:itemRenderer>
<mx:Component>
<mx:CheckBox label="{data.vlaue}" paddingLeft="5" />
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
I have a button below that:
<mx:Button x="25" label="Get Selected Items" width="100" click="getSelItems()" cornerRadius="7" fontSize="12" id="itmSel" />
I could find some ways to get the individually selected row by setting change="" method, but how to get all the selected items.
One simple solution I found so far is, to iterate my dataprovider checking, if the item is selected or not.
And here you go!
var tmpList:ArrayCollection = ArrayCollection(dg.dataProvider);
var obj:Object;
for (var i:int=0; i < tmpList.length; i++)
{
if (tmpList[i].Selected == true)
{
//Added to my array collection.
}
}
Related
I need your help on following.
I have one datagrid which use an arraylist as a data provider. Now my requirment is in that arraylist i have one statusId as one variable or say property which i display as one of the column in datagrid. now i have another column where i have to display three links like edit, delete and view which will be based on the statusid. can you give me some idea or example
I'm no Flex expert, but usually when you want to customise the appearance of a column in a DataGrid you use an ItemRenderer, as indicated by your tag. Within the item renderer, you could use Label components and set a selection of attributes that make them look like links, and then enable/disable them depending on your condition.
Here's some example code off the top of my head, with the following caveats:
I'm using an MX DataGrid instead of the Spark DataGrid.
I'm using an inline item renderer for convenience, but it is better practice to externalise your item renderers into separate MXML files.
<mx:DataGrid id="dataGrid" dataProvider="{dataProvider}" ...>
<mx:columns>
<mx:DataGridColumn id="status_id_column" dataField="statusId" headerText="Status" />
<mx:DataGridColumn id="action_column">
<mx:itemRenderer>
<fx:Component>
<mx:Label text="View" paddingLeft="10" useHandCursor="true" buttonMode="true" mouseChildren="false" enabled="Your condition goes here" />
<mx:Label text="Edit" paddingLeft="10" useHandCursor="true" buttonMode="true" mouseChildren="false" enabled="Your condition goes here" />
<mx:Label text="Delete" paddingLeft="10" useHandCursor="true" buttonMode="true" mouseChildren="false" enabled="Your condition goes here" />
</fx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
thanks avik for your help it is partially correct as for me there are lot of condition i can not put that in enabled attribute. anyway i got the solution from my side :)
here is the syntax.
<mx:HBox width="100%">
<mx:DataGrid id="reportDataGrid" dataProvider="{reportDataGridArrayCollection}"
variableRowHeight="true" editable="false" rowHeight="75"
width="100%" height="400" allowDragSelection="false"
draggableColumns="false" textAlign="center">
<mx:columns>
<mx:DataGridColumn sortable="false" dataField="reportId" resizable="false" headerText="" width="0.06" editable="false" textAlign="center"/>
<mx:DataGridColumn resizable="false" headerStyleName="centered" textAlign="left" dataField="reportStatusId" headerWordWrap="true" headerText="Status" width="0.21">
</mx:DataGridColumn>
<mx:DataGridColumn resizable="false" headerStyleName="centered" textAlign="left" dataField="lockedByUser" headerWordWrap="true" headerText="Locked (Worked) By" width="0.10"/>
<mx:DataGridColumn resizable="false" headerStyleName="centered" textAlign="left" dataField="" headerWordWrap="true" headerText="Acion" width="0.20">
<mx:itemRenderer>
<fx:Component>
<mx:HBox textAlign="left" width="100%" creationComplete="init1()" >
<fx:Script>
<![CDATA[
public function init1():void {
if(data.reportStatusId==0) {
viewLnk.visible = true;
viewLnk.includeInLayout = true;
// this is my condition which you can ignore.... if((data.entityId==1 || data.entityId==2 || data.entityId==3 || data.entityId==4) ){
editLnk.visible = true;
editLnk.includeInLayout = true;
}
}
if(data.reportStatusId==1
) {
editLnk.visible = true;
editLnk.includeInLayout = true;
}
if(data.reportStatusId==2) {
reviewLnk.visible = true;
reviewLnk.includeInLayout = true;
}
if(data.reportStatusId==3) {
saveXMLLnk.visible = true;
saveXMLLnk.includeInLayout = true;
}
}
]]>
</fx:Script>
<mx:LinkButton id="editLnk" visible="false" includeInLayout="false" label="Edit" click="outerDocument.editReport(data.reportId)"/>
<mx:LinkButton id="viewLnk" visible="false" includeInLayout="false" label="View" click="outerDocument.viewReport(data.reportId)"/>
<mx:LinkButton id="reviewLnk" visible="false" includeInLayout="false" label="Review" click="outerDocument.reviewReport(data.reportId)"/>
<mx:LinkButton id="saveXMLLnk" visible="false" includeInLayout="false" label="Save XML" click="outerDocument.saveXMLReport(data.reportId)"/>
</mx:HBox>
</fx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
</mx:HBox>
I have this code. I want to add Buttons in the second column of the data grird.
<mx:DataGrid width="100%" height="95%" id="id_variableRefList" >
<mx:columns>
<mx:DataGridColumn id="id_name" dataField=""/>
<mx:DataGridColumn id="id_strip" dataField="">
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
How can I add buttons in second column using an ItemRenderer?
There are many ways you can do this.
You could use an inline itemRenderer like so:
<fx:Script>
public function myButton_clickHandler(event:Event):void
{
Alert.show("My button was clicked!");
}
</fx:Script>
<mx:DataGrid width="100%" height="95%" id="id_variableRefList" >
<mx:columns>
<mx:DataGridColumn id="id_name" dataField=""/>
<mx:DataGridColumn id="id_strip" dataField="">
<mx:itemRenderer>
<fx:Component>
<mx:VBox>
<mx:Button label="My Button" click="outerDocument.myButton_clickHandler(event);" />
</mx:VBox>
</fx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
Or you could create a custom component and set the itemRenderer property of the DataGridColumn.
<mx:DataGrid width="100%" height="95%" id="id_variableRefList" >
<mx:columns>
<mx:DataGridColumn id="id_name" dataField=""/>
<mx:DataGridColumn id="id_strip" dataField="" itemRenderer="MyCustomItemRenderer"/>
</mx:columns>
</mx:DataGrid>
UPDATE:
To get the id of the button that was clicked, you can use the currentTarget property of the event that gets passed to your eventListener.
public function myButton_clickHandler(event:Event):void
{
Alert.show("Button " + Button(event.currentTarget).id + " was clicked!");
}
i have this code
<mx:DataGrid id="tempListDG" itemDoubleClick="doubleClickHandler(event)" width="100%" height="100%" rowHeight="110"
draggableColumns="false" sortableColumns="false" allowMultipleSelection="false">
<mx:columns>
<mx:DataGridColumn id="chkSel" headerText=" " width="15" sortable="false">
<mx:itemRenderer>
<mx:Component>
<mx:HBox horizontalScrollPolicy="off" verticalScrollPolicy="off" paddingLeft="3">
<mx:Script>
<![CDATA[
]]>
</mx:Script>
<mx:CheckBox name="chkSel" selected="false" />
</mx:HBox>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
<mx:DataGridColumn id="sum" dataField="#summary" headerText="Summary Description" width="280" >
<mx:itemRenderer>
<mx:Component>
<mx:HBox name="thumbs" creationComplete="setThumbnailImage(event)" verticalAlign="top" verticalScrollPolicy="off">
<mx:Script>
<![CDATA[
import mx.controls.Text;
import com.azaaza.containers.HBox;
import com.azaaza.controls.Image;
import com.hwakin.tavi.model.ModelLocator;
import mx.controls.DataGrid;
private function setThumbnailImage(e:Event):void{
var dg:DataGrid = DataGrid(e.target.parent.parent);
var dCounter:int = TemplateOpenPanel(dg.parent.parent).dCount;
if (dCounter+1 > XMLList(dg.dataProvider).length()){
dg.validateDisplayList();
return;
}
img.load(ModelLocator.getInstance().StringToBitmap(XMLList(dg.dataProvider)[dCounter].#thumbStr));
img.width = 80;
img.height = 110;
txt.htmlText = XMLList(dg.dataProvider)[dCounter].#summary;
txt.maxHeight = 110;
dCounter++;
TemplateOpenPanel(dg.parent.parent).dCount = dCounter;
}
]]>
</mx:Script>
<mx:Image id="img">
</mx:Image>
<mx:Text id="txt">
</mx:Text>
</mx:HBox>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
<mx:DataGridColumn dataField="#dateCreated" headerText="Date Created" width="100" />
<mx:DataGridColumn dataField="#dateModified" headerText="Date Modified" width="100"/>
<mx:DataGridColumn dataField="#guid" headerText="guid" visible="false"/>
<mx:DataGridColumn dataField="#fileName" headerText="File Name" visible="false"/>
<mx:DataGridColumn dataField="#tempXml" headerText="tempXml" visible="false"/>
</mx:columns>
</mx:DataGrid>
the datagridcolumn id named "sum" creates images and text given by the XML i loaded
but i got error when i use the scroll of the datagrid. and the images get disaligned and all of the data like the dateCreated and dateModified are shuffled or something.
please help me with this one.. thanks
If you are still looking for answer add this into your code.
1)
protected function dgtempListDG_scrollHandler(event:ScrollEvent):void
{
// TODO Auto-generated method stub
tempListDG.invalidateDisplayList();
}
2)
scroll = "dgtempListDG_scrollHandler(event)"
Add this in mx:datagrid.
remember that item renderers are recycled and reused, so you should not use creationCompelte events, (if only 5 item renderers are visible, only 7 are created and then they are reused, but they are created only once so creation complete only fires once)
I like to use dataChange events, they work upon creation and each time the data of the itemRenderer changes.
I have some data passed into the flex via webservices, and want to create a timetable. As of current, I have a timetable but the day is a column, time is a column and so on, by mapping the datafield to those columns.
I need to flip this around and have all day columns and one time column, with each day column filter to the day property, if you get what i mean.
HOw would i go about doing this? Is there a datafield property to filter this way, or is there a better way?
It sounds like what you want is something similar to the Outlook calendar. You want a column for each weekday, and a row for each hour in the day.
DataGrids display the members of the collection bound to their dataProvider property as rows. However, it seems that your ArrayCollection contains value objects that correspond to an event that occurs at a specific time, rather than a time that contains an event.
I would write another value object to represent a time of day. This object would contain data members corresponding to each weekday that would hold the class name.
public class TimeOfDayVO {
public var monday:String;
public var tuesday:String;
public var wednesday:String;
public var thursday:String;
public var friday:String;
}
Then write a function that will create one of these objects for each hour in the day.
public function createTimeOfDayArray(oldArray:ArrayCollection) {
for (var hour:int = 0; hour < 24; hour++) {
var timeVO:TimeOfDayVO = new TimeOfDayVO();
newArray.addItem(timeVO);
}
for each (obj in oldArray) {
switch (obj.day) {
case "Monday":
newArray[obj.time].monday = obj.classname;
break;
//repeat for each day
}
}
}
Bind newArray to your DataGrid instead of the old array.
Assuming I understand what you're looking for correctly, here's what I came up with.
Basically, just create a column for each day in your datagrid and bind them to whatever value you want in your ArrayCollection. Then set the visible property for that day's column to true based on the values in the ArrayCollection. I hope this helps!
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:ArrayCollection id="arrColl">
<mx:source>
<mx:Array>
<mx:Object theClass="Class1" time="10:00" day="Monday"/>
<mx:Object theClass="Class1" time="2:00" day="Wednesday"/>
<mx:Object theClass="Class2" time="8:00" day="Tuesday"/>
<mx:Object theClass="Class3" time="9:30" day="Tuesday"/>
<mx:Object theClass="Class4" time="10:00" day="Friday"/>
<mx:Object theClass="Class4" time="12:00" day="Thursday"/>
</mx:Array>
</mx:source>
</mx:ArrayCollection>
<mx:DataGrid id="dataGrid"
dataProvider="{arrColl}"
width="400"
rowCount="6">
<mx:columns>
<mx:DataGridColumn dataField="theClass" />
<mx:DataGridColumn dataField="time" />
<mx:DataGridColumn headerText="Monday" dataField="time">
<mx:itemRenderer>
<mx:Component>
<mx:HBox>
<mx:Label text="{data.time}" visible="{data.day == 'Monday'}" />
</mx:HBox>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
<mx:DataGridColumn headerText="Tuesday" dataField="time">
<mx:itemRenderer>
<mx:Component>
<mx:HBox>
<mx:Label text="{data.time}" visible="{data.day == 'Tuesday'}" />
</mx:HBox>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
<mx:DataGridColumn headerText="Wednesday" dataField="time">
<mx:itemRenderer>
<mx:Component>
<mx:HBox>
<mx:Label text="{data.time}" visible="{data.day == 'Wednesday'}" />
</mx:HBox>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
<mx:DataGridColumn headerText="Thursday" dataField="time">
<mx:itemRenderer>
<mx:Component>
<mx:HBox>
<mx:Label text="{data.time}" visible="{data.day == 'Thursday'}" />
</mx:HBox>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
<mx:DataGridColumn headerText="Friday" dataField="time">
<mx:itemRenderer>
<mx:Component>
<mx:HBox>
<mx:Label text="{data.time}" visible="{data.day == 'Friday'}"/>
</mx:HBox>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
</mx:Application>
I didn't get the problem precisely but may be it is similar to a problem I had with advanceddatagrid some time back. May be the solution by Robusto might be useful here as well. Pasting it below fo your reference.
<mx:Repeater id="rp" dataProvider="{yourArrayCollection}">
<mx:AdvancedDataGridColumns dataField="{rp.currentItem.fieldName}" visible="{rp.currentItem.show}">
</mx:Repeater>
I have a datagrid with different types of columns, like I have checkboxes, combo boxes and text Inputs as the column types.
Now I want one of the column type to a link, with the label "view". All the rows in that column are link with the same label "View" and on clicking it, I want a Pop up window to be opened?
This is my code:
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%">
<mx:Script>
<![CDATA[
[Bindable]
private var defectDetails:ArrayCollection = new ArrayCollection([ ]);
private function addDefect():void{
defectDG.dataProvider.addItem(
{CommentHistory:"View"}
);
defectDG.height += 30;
}
private function defectCommentsPopUp():void{
var helpWindow:defectCommentsLookUp=defectCommentsLookUp(PopUpManager.createPopUp(this, defectCommentsLookUp, true));
}
]]>
</mx:Script>
<mx:DataGrid id="defectDG" dataProvider="{defectDetails}" variableRowHeight="true" width="100%" height="75" >
<mx:columns>
<mx:DataGridColumn headerText="Select" dataField="Select" itemRenderer="mx.controls.CheckBox" width="50" textAlign="center" />
<mx:DataGridColumn headerText="Defect Id" dataField="DefectId" itemRenderer="mx.controls.TextInput" textAlign="center"/>
<mx:DataGridColumn headerText="Status" dataField="Status" itemRenderer="mx.controls.ComboBox" textAlign="center"/>
<mx:DataGridColumn headerText="Severity" dataField="Severity" itemRenderer="mx.controls.ComboBox" textAlign="center" />
<mx:DataGridColumn headerText="Comment History" dataField="CommentHistory" itemRenderer="mx.controls.Text" textAlign="center" headerWordWrap="true" />
</mx:columns>
</mx:DataGrid>
<mx:Button styleName="buttonStyle" label="Add New Defect" click="addDefect()"/>
</mx:VBox>
I didn't know how to bring a link in the datagrid. So used the Text control to display the "View" label. Now If I click this item, "View" in the datagrid, I want the Pop up function, i.e.,defectCommentsPopUp() to be called.
How to do this?
Assign values to commentHistory that would help to identify the row.
<mx:DataGridColumn dataField="commentHistory">
<mx:itemRenderer>
<mx:Component>
<mx:Label text="View" click="outerDocument.onViewClick(data)"/>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
in the script:
private function onViewClick(item:Object):void
{
//item contains the commentHistory value of the clicked row.
showPopUp(item);
}