Remove multiple rows in a Flex Spark datagrid - apache-flex

I want to delete all selected rows in a Spark datagrid.
This code below accounts for the Vector indices but I cannot get it to work. It does not throw out any errors.
What am I doing wrong?
public function deleteItem(event:MouseEvent):void{
var sIndices:Vector.<int> = arrayGrid.selectedIndices;
sIndices.sort(Array.NUMERIC);
for(var index:int = sIndices.length-1; index>=0; index--) {
arrayColl.removeItemAt(sIndices[index]);
}
arrayColl.refresh();
}
private function convertDateFormat(item:Object,column:GridColumn):String {
return simpleDate.format(item.itemStartDate);simpleDate.format(item.itemEndDate);
}
]]>
</fx:Script>
<s:VGroup width="100%" height="100%" >
<s:Button label="Remove Selected Items"/>
<s:Button label="Add New Entry" click="newItem()"/>
<search:searchBar id="SearchBar" searchListCollection="{arrayColl}"
dataGrid="{arrayGrid}"/>
<s:DataGrid id="arrayGrid" width="100%" height="100%" dataProvider="{arrayColl}"
selectionMode="multipleRows" doubleClickEnabled="true">
<s:columns>
<s:ArrayList>
<s:GridColumn dataField="projectName" headerText="Project Name" />
<s:GridColumn dataField="tag" headerText="Priority Code" />
<s:GridColumn width="180" dataField="itemStartDate"
labelFunction="convertDateFormat" headerText="Start Date"/>
<s:GridColumn width="180" dataField="itemEndDate"
labelFunction="convertDateFormat" headerText="End Date"/>
<s:GridColumn dataField="notes" headerText="Notes"/>
<s:GridColumn width="100" dataField="colorCode" headerText="Color HEX"/>
</s:ArrayList>
</s:columns>
</s:DataGrid>

It looks like you forgot to call the deleteItem method.
<s:Button label="Remove Selected Items" click="deleteItem(event)"/>

Related

Provide two data providers at a same time in a data grid in flex 4

Can we provide 2 data providers at a same time in a data grid in flex 4. If yes, how ? Please explain with example.
<s:DataGrid id="dgDest" dataProvider="{destProds && ??}" width="100%" height="100%" editable="true"
selectionMode="multipleRows"
gridItemEditorSessionStarting="dgDest_gridItemEditorSessionStartingHandler(event)"
paste="dgDest_pasteHandler(event)"
>
<s:columns>
<s:ArrayList>
<!--<s:GridColumn width="20" dataField="MNF_DESC" sortCompareFunction="{sortNumeric('MNF_DESC')}" headerText="Manufacturer"
headerRenderer="{new ClassFactory(styleManager.getStyleDeclaration('.generic').getStyle('spreadHeaderRenderer'))}"/>-->
<s:GridColumn width="20" dataField="MNF_DESC" sortCompareFunction="{sortNumeric('MNF_DESC')}" headerText="Manufacturer"
headerRenderer="{ new ClassFactory(styleManager.getStyleDeclaration('.generic').getStyle('spreadHeaderRenderer'))}" />
<s:GridColumn dataField="PRODUCT_DESC" headerText="Products" editable="true"
headerRenderer="{ new ClassFactory(styleManager.getStyleDeclaration('.generic').getStyle('spreadHeaderRenderer'))}"/>
<s:GridColumn dataField="PACK_DESC" headerText="Packs" editable="false"
headerRenderer="{ new ClassFactory(styleManager.getStyleDeclaration('.generic').getStyle('spreadHeaderRenderer'))}"/>
<s:GridColumn dataField="NDF_CODE" headerText="NDF No." width="80" editable="false"
headerRenderer="{ new ClassFactory(styleManager.getStyleDeclaration('.generic').getStyle('spreadHeaderRenderer'))}"/>
</s:ArrayList>
</s:columns>
</s:DataGrid>
I tried like this but this is not working. please explain how this could be possible.
A Spark DataGrid cannot take 2 dataProviders.
If you need to merge the data, do it before you pass it to the DataGrid, on the server code or in the client code.

How to add text Input in data Grid?

I m trying to add a textInput in the datagrid so that users can see that there is a textbox for them to edit. I have a textInputRender so that I can show the textbox in the dataGrid and update the value accordingly.
I also have another dataGrid table to capture the values I have selected in the previous dataGrid table.
The problem is I am able to see the textbox in the dataGrid table. But I have to double click the cell and enter my value to save the value of the cell in the dataGrid back to the data provider.In reality the user will not double click to enter as they might just enter the value in. Is there a way to capture the value without double clicking the cell ??
Next problem after I double click the textBox and enter my new value for the quantity it do not reflect the change in the textbox. But however I can see that the newly entered value is captured.
Pls help me. I have been sruggling with this for very long. Pls can u tell me how I can slove this ?
This is my custom renderer of the textbox I place it within the GridItemRenderer tags :
<s:TextInput id="ti" text="{data.quant}"/>
This is my code:
<fx:Script>
<![CDATA[
import FrontEndObjects.ColourItems;
import mx.collections.ArrayCollection;
import spark.events.IndexChangeEvent;
[Bindable]
private var order:ArrayCollection = new ArrayCollection();
private function addOrder():void{
var orderItems:ColourItems = new ColourItems("OrderNo","1","--Choose a colour--");
order.addItem(orderItems);
}
[Bindable]
private var confirmOrder:ArrayCollection = new ArrayCollection();
protected function saveData(event:MouseEvent):void
{
//dataGrid is the id (name) of our dataGrid table
var dataProvider = myDG.dataProvider;
var item = null;
for (var i:int = 0; i < dataProvider.length; i++)
{
item = dataProvider.getItemAt(i);
confirmOrder.addItem(item);
//Alert.show("the data is : " + item);
}
}
]]>
</fx:Script>
<s:BorderContainer x="240" y="50" width="449" height="518">
<s:DataGrid id="myDG" x="32" y="27" width="393" height="151" dataProvider="{order}"
editable="true" variableRowHeight="true">
<s:columns>
<s:ArrayList>
<s:GridColumn dataField="label1" headerText="Order #" editable="false"/>
<s:GridColumn dataField="quant" headerText="Qty" editable="true" itemRenderer="DesignItemRenderer.myTextInputRender"/>
<s:GridColumn dataField="color" headerText="Color" editable="true" rendererIsEditable="true">
<s:itemRenderer>
<fx:Component>
<s:GridItemRenderer>
<fx:Script>
<![CDATA[
import spark.events.IndexChangeEvent;
protected function onCbChange(event:IndexChangeEvent):void
{
var value:String = (event.currentTarget as DropDownList).selectedItem;
data[column.dataField] = value;
}
]]>
</fx:Script>
<s:DropDownList id="cb" width="100%" change="onCbChange(event)" prompt="--Choose a colour--"> <!--selectedIndex="0" requireSelection="true" >-->
<s:dataProvider>
<s:ArrayCollection>
<fx:String>red</fx:String>
<fx:String>blue</fx:String>
<fx:String>green</fx:String>
</s:ArrayCollection>
</s:dataProvider>
</s:DropDownList>
</s:GridItemRenderer>
</fx:Component>
</s:itemRenderer>
</s:GridColumn>
</s:ArrayList>
</s:columns >
</s:DataGrid>
<s:DataGrid id="myDG1" x="24" y="317" width="401" height="174" dataProvider="{confirmOrder}"
requestedRowCount="4">
<s:columns>
<s:ArrayList>
<s:GridColumn dataField="label1" headerText="Ordernum - getback"></s:GridColumn>
<s:GridColumn dataField="quant" headerText="quanty-getback"></s:GridColumn>
<s:GridColumn dataField="color" headerText="color-getback"></s:GridColumn>
</s:ArrayList>
</s:columns>
</s:DataGrid>
<s:Button x="355" y="186" label="add" click="addOrder()" />
<s:Button x="277" y="186" label="save" click="saveData(event)"/>
</s:BorderContainer>
Try this:
Set rendererIsEditable="true" in your GridColumn "quant"
<s:GridColumn dataField="quant" headerText="Qty" editable="true" rendererIsEditable="true" itemRenderer="DesignItemRenderer.myTextInputRender"/>
Change your ItemRenderer like this
<?xml version="1.0" encoding="utf-8"?>
<s:GridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
clipAndEnableScrolling="true">
<fx:Binding source="ti.text" destination="data.quant"/>
<s:TextInput
id="ti"
text="{data.quant}"
editable="true"/>
</s:GridItemRenderer>
It works by me fine
I can't recognize which is the problem with your code anyway I managed to develop a:
textInput in the datagrid so that users can see that there is a
textbox for them to edit
Using this code
<mx:DataGrid id="weekGrid" width="100%" height="60%"
dataProvider="{weekList}" editable="true">
<mx:DataGridColumn id="noteColumn" dataField="note" editable="false"
headerText="Note" sortable="false">
<mx:itemRenderer>
<fx:Component>
<mx:VBox width="100%" height="100%" horizontalAlign="center"
verticalAlign="middle">
<fx:Script>
<![CDATA[
import managers.StraordinariManager;
import spark.events.TextOperationEvent;
protected function textinput1_changeHandler(event:TextOperationEvent):void
{
data['note']=textInput.text;
outerDocument.notSavedAlert.statrtBlinker();
}
]]>
</fx:Script>
<s:TextInput id="textInput" width="100%" height="100%"
borderVisible="false"
change="textinput1_changeHandler(event)"
editable="{data.oreStr!=null}"
text="{data.oreStr!=null?data.note:''}">
</s:TextInput>
</mx:VBox>
</fx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
</mx:DataGrid>
I used an ItemRenderer instead of a ItemEditor to avoid the double click problem.
Notice that the column editable property is set to false, but the grid is set to editable="true".
I also used the same tecnique to insert also different components, this is an example using the radio button:
<mx:DataGridColumn id="flag" headerText="Approva Rifiuta" >
<mx:itemRenderer>
<fx:Component>
<mx:HBox width="100%" height="100%" horizontalAlign="center"
verticalAlign="middle">
<fx:Script>
<![CDATA[
import managers.IngressiManager;
import mx.events.FlexEvent;
protected function radiobutton1_changeHandler(event:Event):void
{
if(apprRb.selected){
data['flag']=ApprovazioneStraordinariView.APPROVA_FLAG;
data['note']="";
}else
if(rifRb.selected){
data['flag']=ApprovazioneStraordinariView.RIFIUTA_FLAG;
}
}
]]>
</fx:Script>
<s:RadioButton id="apprRb" label="A"
click="radiobutton1_changeHandler(event)"
groupName="approvaRifiutaGroup"
selected="{data['flag']==ApprovazioneStraordinariView.APPROVA_FLAG}">
</s:RadioButton>
<s:RadioButton id="rifRb" label="R"
click="radiobutton1_changeHandler(event)"
groupName="approvaRifiutaGroup"
selected="{data['flag']==ApprovazioneStraordinariView.RIFIUTA_FLAG}">
</s:RadioButton>
<fx:Declarations>
<s:RadioButtonGroup id="approvaRifiutaGroup">
</s:RadioButtonGroup>
</fx:Declarations>
</mx:HBox>
</fx:Component>
</mx:itemRenderer>

Select Cell datagrid flash builder

Basically what I want to do is to select just one cell, and let the information about that cell being displayed as either a label in the box under it.
This is what I have at the moment:
<s:DataGrid selectionMode="multipleCells" x="726" y="0" width="446" height="50" requestedRowCount="0" click="itemClickEvent(event)">
<s:columns>
<s:ArrayList>
<s:GridColumn width="63" dataField="dataField1" headerText="見積条件"></s:GridColumn>
<s:GridColumn width="63" dataField="dataField2" headerText="原価見積"></s:GridColumn>
<s:GridColumn width="63" dataField="dataField3" headerText="見積作成"></s:GridColumn>
<s:GridColumn width="63" dataField="dataField4" headerText="見積発行"></s:GridColumn>
<s:GridColumn width="63" dataField="dataField5" headerText="受注失注"></s:GridColumn>
<s:GridColumn width="63" dataField="dataField6" headerText="納品"></s:GridColumn>
<s:GridColumn width="63" dataField="dataField7" headerText="請求"></s:GridColumn>
</s:ArrayList>
</s:columns>
<s:ArrayList>
<fx:Object dataField1="2" dataField2="1" dataField3="2" dataField4="1" dataField5="4" dataField6="1" dataField7="1"></fx:Object>
</s:ArrayList>
</s:DataGrid>
private function itemClickEvent(event:Event):void
{
currentState='information_dropdown'
Alert.show("Row : " +event.rowIndex + "Column : " +event.columnIndex)
}
Although the code shows an alert box I want to display it as a label under it instead. I do get an error on the rowIndex and columnIndex part.
Any advice would be great.
Instead of listening for click event on datagrid, listen for GridEvent.GRID_CLICK:
<s:DataGrid selectionMode="multipleCells" x="726" y="0" width="446" height="50" requestedRowCount="0" gridClick="itemClickEvent(event)">
And change listener argument type to GridEvent:
private function itemClickEvent(event:GridEvent):void
{
...
}
rowIndex and columnIndex should then give proper results.

Flex Datagrid with conditional links

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>

flex, AdvancedDataGrid, custom itemrenderer

I seem to be missing some key concept(s) when it comes to flex itemrenderers, particularly as it applies to an AdvancedDataGrid. I'm doing what a lot of other people are trying to do: change the bg color of a field based on data from the row. My problem seems to be in accessing data fields? Basically, when this loads, nothing appears. If I remove the parts from the renderer where I try to access field data, it works, but kind of defeats the purpose.
Here's what I've got:
<mx:AdvancedDataGrid width="100%" height="100%"
id="topAccountsGrid"
borderStyle="solid" dropShadowEnabled="true" treeColumn="{list_name}" editable="false" selectionMode="singleRow"
dragEnabled="true" dropEnabled="true" dragMoveEnabled="true" dragDrop="topAccountsGrid_dragDropHandler(event)"
doubleClickEnabled="true" itemDoubleClick="topAccountsGrid_itemDoubleClickHandler(event)"
sort="topAccountsGrid_sortHandler(event)" backgroundColor="#ffffff">
<mx:dataProvider>
<mx:HierarchicalData source="{filteredList}"
childrenField="children" />
</mx:dataProvider>
<mx:columns>
<mx:AdvancedDataGridColumn id="colRank" headerText="Rank" dataField="Rank__c" width="60">
<mx:itemRenderer>
<fx:Component>
<mx:HBox paddingLeft="2">
<s:Label id="tempLabel" text="{data.Rank__c}" />
<fx:Script>
<![CDATA[
override public function set data(value:Object) : void{
super.data = value;
if(data.Health__c == 0){
setStyle("backgroundColor",0xFF5050);
} else if(data.Health__c == 50){
setStyle("backgroundColor",0xFFFF99);
} else if(data.Health__c == 100){
setStyle("backgroundColor",0x66FF66);
}
}
]]>
</fx:Script>
</mx:HBox>
</fx:Component>
</mx:itemRenderer>
</mx:AdvancedDataGridColumn>
<mx:AdvancedDataGridColumn id="list_name" headerText="Name" dataField="Name" />
<mx:AdvancedDataGridColumn id="colPrevRank" headerText="Previous Rank" dataField="Previous_Rank__c" />
<mx:AdvancedDataGridColumn id="colType" headerText="Type" dataField="Type" />
<mx:AdvancedDataGridColumn id="colContacts" headerText="# Contacts" dataField="Contacts__c" />
<mx:AdvancedDataGridColumn id="colDeals" headerText="# Deals" dataField="Deals__c" />
</mx:columns>
</mx:AdvancedDataGrid>
I've had a similar issue in the past when using HierarchicalData. The way I got around it was to use an AdvancedDataGridRendererProvider.
Here's some sample code:
<mx:AdvancedDataGrid width="100%" height="100%"
id="topAccountsGrid"
backgroundColor="#ffffff">
<mx:dataProvider>
<mx:HierarchicalData source="{filteredList}"
childrenField="children" />
</mx:dataProvider>
<mx:columns>
<mx:AdvancedDataGridColumn id="colRank" headerText="Rank" dataField="Rank__c" width="60" />
<mx:AdvancedDataGridColumn id="list_name" headerText="Name" dataField="Name" />
<mx:AdvancedDataGridColumn id="colPrevRank" headerText="Previous Rank" dataField="Previous_Rank__c" />
<mx:AdvancedDataGridColumn id="colType" headerText="Type" dataField="Type" />
<mx:AdvancedDataGridColumn id="colContacts" headerText="# Contacts" dataField="Contacts__c" />
<mx:AdvancedDataGridColumn id="colDeals" headerText="# Deals" dataField="Deals__c" />
</mx:columns>
<mx:rendererProviders>
<mx:AdvancedDataGridRendererProvider column="{colRank}" depth="1" dataField="Rank__c" renderer="AdvancedDataGridRankCRenderer" />
</mx:rendererProviders>
</mx:AdvancedDataGrid>
And the AdvancedDataGridRendererProvider:
<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
backgroundColor="{SetBackgroundColor(data)}"
paddingLeft="2" paddingRight="2" paddingTop="2"
horizontalScrollPolicy="off"
verticalScrollPolicy="off"
height="22">
<fx:Script>
<![CDATA[
[Bindable] private var bgColor:uint = 0xD6E5FF;
private function SetBackgroundColor(obj:Object):uint
{
var returnColor:uint = 0xFF5050;
if (obj["Rank__c"] != null)
{
switch (obj["Rank__c"].toString().toUpperCase())
{
case "0":
returnColor = 0xFF5050;
break;
case "50":
returnColor = 0xFFFF99;
break;
case "100":
returnColor = 0x66FF66;
break;
default:
returnColor = 0xFF5050;
break;
}
}
return returnColor;
}
override public function set data(value:Object):void
{
super.data = value;
rankLabel.text = value["Rank__c"].toString();
validateDisplayList();
}
]]>
</fx:Script>
<mx:Label id="rankLabel" />
</mx:HBox>

Resources