Flex - Set Editable propertie programmatically for a GridColumn - actionscript-3

Is it possible to dynamically change the property "Editable" of a GridColumn regarding the value of an another Column.
Once I have filled my dataProvider I would like to loop ont he dataGrid rows, but I can't find how to it ?
Thanks.

I tried
editable="{if (data['Type']=='foo'){return true;} else {return false;}}"
but build failed.
How about to use itemRenderer?
<s:GridColumn dataField="Type" width="100" editable="false"/>
<s:GridColumn dataField="Name" width="100" editable="false"/>
<s:GridColumn dataField="Score" width="100" editable="true" rendererIsEditable="true">
<s:itemRenderer>
<fx:Component>
<s:GridItemRenderer>
<fx:Script>
<![CDATA[
override public function set data(value:Object):void {
if (value != null && value != "") {
super.data = value;
if (super.data["Type"] == "foo"){
somefield.editable = true;
}
else{
somefield.editable = false;
}
}
}
]]>
</fx:Script>
<s:TextInput id="somefield" text="{data.Score}"/>
</s:GridItemRenderer>
</fx:Component>
</s:itemRenderer>
</s:GridColumn>
Run example on wonderfl

Thanks. In fact I use ItemEditor and/or ItemRenderer for some columns.
In my case I have
<s:GridColumn id="gcAmountEUR" labelFunction="amountFormat" dataField="AmountEUR" headerText="AMOUNT EUR" width="80" itemEditor="components.gieOrderAmount">
<s:itemRenderer>
<fx:Component>
<s:DefaultGridItemRenderer textAlign="right" />
</fx:Component>
</s:itemRenderer>
</s:GridColumn>
<s:GridColumn dataField="CurrencyCode" headerText="CURRENCY" width="50" itemEditor="components.gieOrderCurrency" >
</s:GridColumn>
<s:GridColumn id="gcAmount" labelFunction="amountFormat" dataField="Amount" headerText="AMOUNT" width="120" itemEditor="components.gieOrderAmount">
<s:itemRenderer>
<fx:Component>
<s:DefaultGridItemRenderer textAlign="right" />
</fx:Component>
</s:itemRenderer>
</s:GridColumn>
The datagrig has the property editable="true".
By default the column AmountEUR is Editable an the column Amount is not.
But if for a row the value of Currency is not "" so I want AmountEUR to be not Editable and Amount to be Editable. So I would like to programmatically change the property Editable of the column for each row.
So I would like to parse the datagrid to change, for each row, the property value "Editable" of AmountEUR and Amount if Currency is not Empty.
But perhaps it is not the good way to do it ?
I hope I made myself clear.
Antoine.

Related

AdvancedDataGrid editable property issue

I have an AdvancedDataGrid control with two columns UserName and eSigner. Which looks like:
Code for this:
<mx:AdvancedDataGrid id="UserGroupGrid" left="10" bottom="40" right="10" editable="true" height="226">
<mx:dataProvider>
<mx:GroupingCollection id="gc" source="{UserGroupList}">
<mx:Grouping>
<mx:GroupingField name="UserGroupName"/>
</mx:Grouping>
</mx:GroupingCollection>
</mx:dataProvider>
<mx:columns>
<mx:AdvancedDataGridColumn textAlign="left" headerText="UserName" dataField="UserName" editable="false"/>
<mx:AdvancedDataGridColumn width="100" dataField="eSignor" headerText="eSigner" editable="true" textAlign="center" rendererIsEditor="true" editorDataField="cbSelected" editorYOffset="30">
<mx:itemRenderer>
<mx:Component>
<mx:HBox horizontalAlign="center">
<mx:Script>
<![CDATA[
public var cbSelected:Boolean;
]]>
</mx:Script>
<mx:CheckBox id="SignorCk" width="10" selected="{data.eSignor}" enabled="true" click="cbSelected = SignorCk.selected;" visible="{data.eSignor == null ? false : true}"/>
</mx:HBox>
</mx:Component>
</mx:itemRenderer>
</mx:AdvancedDataGridColumn>
</mx:columns>
</mx:AdvancedDataGrid>
As you can see in the code I want the column UserName to be non-editable and column eSigner to be editable. When I load up the page I am running into an issue where the grouping header Accounts Payable becomes editable. This happens when I click on Accounts Payable and then click somewhere off the browser and then click back on Accounts Payable again. It looks like this:
I have tried this with less success. Since the column UserName has the editable set to false I wonder what is going on here.
itemEditBegin="preventEdit(event);"
The property above does the trick here. In the code posted, just add this property.
<mx:AdvancedDataGrid id="UserGroupGrid" itemEditBegin="preventEdit(event);" left="10" bottom="40" right="10" editable="true" height="226">
In the script tag add the function:
private function preventEdit(event:AdvancedDataGridEvent):void
{
if(event.itemRenderer.data.UserName == null)
event.preventDefault();
}
Whenever we focus out and focus back in, on the grouping header, this would call the preventEdit function and that would cancel the events' default behavior of editing. I think this is just a workaround, hope they've fixed all this in Flex 4.
Source: Adobe

filter rows by specifying the number in data grid using flex 4.5

I'm using flex builder 4.5. A data grid displays 20 rows. I want to display the specified number of rows in data grid header. Is it possible to do? Can anyone advise on this?
This can be done by Binding a String to headerText property of grid column.
its look like
<fx:Script>
<![CDATA[
[Bindable]
private var _personString:String = "";
/*change this variable's value will change the value of Header Named
"fullNameColumn".if you want to make some default value then assign
some default value to this _perosnString varialbe.*/
]]>
</fx:Script>
<s:DataGrid id="personsDataGrid"
width="100%"
height="100%"
selectedIndex="0">
<s:columns>
<s:ArrayList>
<s:GridColumn id="fullNameColumn"
dataField="YOUR_FNAME_DATAFIELD"
headerText="{ _personString.toUpperCase() } NAME"
minWidth="100"
maxWidth="250" />
<s:GridColumn headerText="PHONE"
dataField="YOUR_EMAIL_DATAFIELD"
minWidth="150"
maxWidth="250" />
<s:GridColumn headerText="EMAIL"
dataField="YOUR_EMAIL_DATAFIELD"
minWidth="150"
maxWidth="250" />
</s:ArrayList>
</s:columns>
</s:DataGrid>
May this will help you!!!

How to add wordWrap on spark GridColumn

Today, I decided to test spark datagrid instead of mx:Datatagrid.
But a problem appear: I didn't found wordWrap option, do you know how to solve that?
<s:DataGrid id="scrollableDG" borderVisible="true" editable="true"
width="100%" height="{bgSuivi.height-90-90}">
//Setup columns for scrollable datagrid
var gridColumn:GridColumn = new GridColumn();
gridColumn.dataField="scRub2";
gridColumn.headerText = "Rub1";
gridColumn.width = 80;
gridColumn.editable = true;
columnLst.addItem(gridColumn);
var gridColumn:GridColumn = new GridColumn();
gridColumn.dataField="scRub3";
gridColumn.headerText = "Rub1";
gridColumn.width = 80;
gridColumn.editable = true;
columnLst.addItem(gridColumn);
var gridColumn:GridColumn = new GridColumn();
gridColumn.dataField="scRub4";
gridColumn.headerText = "Rub1";
gridColumn.width = 80;
gridColumn.editable = true;
columnLst.addItem(gridColumn);
scrollableDG.columns = columnLst;
Thanks
The original poster didn't select an answer I'm going to combine the previous two into one super answr! :P
You can enable word wrapping on all columns on the Spark DataGrid with variableRowHeight:
<s:DataGrid variableRowHeight="true">
</s:DataGrid>
Or you can enable word wrapping on an individual column by using the word wrap property on the default GridColumn item renderer:
<s:GridColumn dataField="fields.description" headerText="Description" >
<s:itemRenderer>
<fx:Component>
<s:DefaultGridItemRenderer wordWrap="true"/>
</fx:Component>
</s:itemRenderer>
</s:GridColumn>
Furthermore, in the Grid Column example I'd recommend setting a width if you want to prevent horizontal scroll bars:
<s:GridColumn width="{dataGrid.width-column1.width-column3.width}" dataField="fields.description" headerText="Description" >
<s:itemRenderer>
<fx:Component>
<s:DefaultGridItemRenderer wordWrap="true"/>
</fx:Component>
</s:itemRenderer>
</s:GridColumn>
I'm finding I have to set both variable row height to true and set the column width to get the behavior I'm looking for.
[Edit]
Oops, my original answer was referring to the MX DataGridColumn component, not the Spark GridColumn. Revised answer...
The default item renderer for the grid is DataGridItemRenderer and it has a word wrap property that you need to set to true. Not sure, but you might also have to set the variableRowHeight property of the grid to true as well...
To do this in MXML, it would look something like this:
<s:DataGrid variableRowHeight="true">
<s:itemRenderer>
<fx:Component>
<s:DataGridItemRenderer wordWrap="true" />
</fx:Component>
</s:itemRenderer>
</s:DataGrid>
Until flex4.6, there is no s:DataGridItemRenderer, but there is mx:DataGridItemRenderer. So, the code would be:
<s:GridColumn headerText="foo" labelFunction="fooLabelFunction">
<s:itemRenderer>
<fx:Component>
<mx:DataGridItemRenderer wordWrap="true" />
</fx:Component>
</s:itemRenderer>
</s:GridColumn>

datagrid inline itemrender change dataprovider value

I create a datagrid with inline itemrenderer.
The renderer is a dropdownlist.
When dropdowlist value change, I'd like to update dataprovider but I didn't found how to do that.
Can you help me?
Thanks
[Bindable] private var DP_PRAT_INIT:ArrayCollection;
<s:DataGrid id="dgTuVous" fontWeight="normal"
dataProvider="{DP_PRAT_INIT}"
width="100%" height="100%"
horizontalScrollPolicy="on"
fontSize="10"
>
<s:columns>
<s:ArrayList>
<s:GridColumn dataField="prInitiales" width="40" headerText="Prat" />
<s:GridColumn width="75" dataField="prTuVous"
headerText="Tu/Vous" editable="true">
<s:itemRenderer>
<fx:Component>
<s:GridItemRenderer>
<fx:Script>
<![CDATA[
import spark.events.IndexChangeEvent;
protected function ddlTuVous_changeHandler(event:IndexChangeEvent):void
{
DP_PRAT_INIT[ddlTuVous.selectedIndex].prTuVous=ddlTuVous.selectedItem;
trace ("ddlTuVous.selectedItem" +ddlTuVous.selectedItem) ;
}
]]>
</fx:Script>
<s:DropDownList width="100%" selectedIndex="1" id="ddlTuVous"
change="ddlTuVous_changeHandler(event)">
<s:dataProvider>
<s:ArrayList>
<fx:String>Tu</fx:String>
<fx:String>Vous</fx:String>
</s:ArrayList>
</s:dataProvider>
</s:DropDownList>
</s:GridItemRenderer>
</fx:Component>
</s:itemRenderer>
</s:GridColumn>
</s:ArrayList>
</s:columns>
</s:DataGrid>
You reference the host control with the outerDocument property... so you would call outerDocument.DP_PRAT_INIT if you want to access that array. BUT, that array is private, so you have to make it public. Or, you can make a public function that you can call on outerDocument but ... yuck.
If I am understanding your code properly, you should access the data property of the GridItemRenderer which is the same as outerDocument.DP_PRAT_INIT[ddlTuVous.selectedIndex] except that it is better because you don't have possible index mismatches...
So, what you really want is:
data.prTuVous = ddlTuVous.selectedItem;

How to get selectedItem from comboBox itemrenderer in datagrid and display value in another column

I am having an issue with itemRender in a datagrid. Actually I have a dataProvider which populates 2 columns in my datagrid. The first column data is rendered in a TextInput and the second column data is rendered in a comboBox. What I want now is that when I selected an element from the comboBox of a row in the grid. I want to show the selectedItem value in the corresponding TextInput on the same row of the first column.
I want to know if there is any datagrid property that can help me do this? Or if someone can guide me what to code in the change handler of the comboBox? See my codes below.
I need help. Pls sort this out for me someone.
<mx:DataGrid id="myDG" rowHeight="25" dataProvider="{my_arrayColl}" width="100%" height="205" chromeColor="#D0CCAF" headerHeight="0" showHeaders="false">
<mx:columns>
<mx:DataGridColumn headerText="My Header 1"
editable="true"
dataField="LBL"
>
<mx:itemRenderer>
<fx:Component>
<mx:HBox horizontalAlign="left" horizontalScrollPolicy="off" verticalScrollPolicy="off">
<fx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.controls.Text;
import spark.events.TextOperationEvent;
protected function label_txt_changeHandler(event:TextOperationEvent):void
{
data.LBL = label_txt.text;
}
]]>
</fx:Script>
<s:TextInput id="label_txt" change="label_txt_changeHandler(event)" text="{data.LBL}" width="98%"/>
</mx:HBox>
</fx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
<mx:DataGridColumn headerText="My Header 2"
editable="true"
rendererIsEditor="true"
dataField="ALIAS"
>
<mx:itemRenderer>
<fx:Component>
<mx:ComboBox height="80%" change="mycb_changeHandler(event)" labelField="ALIAS" dataProvider="{outerDocument.mycb_array}">
<fx:Script>
<![CDATA[
import mx.events.ListEvent;
protected function mycb_changeHandler(event:ListEvent):void
{
}
]]>
</fx:Script>
</mx:ComboBox>
</fx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
If I understand it correctly, you want to update the dataprovider of DataGrid, based on selection in your ComboBox component in itemRenderer. You can do that by going to the owner object and updating the respective object in data. Just keep itemRenderer in a separate mxml and put your debug pointer in label_txt_changeHandler method.
Hope it helps..