Flex popup issue with keyboard key like C,V,X,A key - actionscript-3

As i report earlier in the issues of pop-up of that i'm not able to write "a,c, v and x" characters in the text-input field in pop-up.
Shortcut actions(a = select all, c= copy, v = paste and x = cut) are performed on those keys on keys text-input fields.
Complete case:
In the popup there is a data-grid and in the data-grid an item renderer where i enter the input.
Here is code
<CheckBoxGrid:CheckBoxDataGrid id="id_DataGrid"
width="95%" height="90%" allowMultipleSelection="true" editable="true"
dataProvider="{inHouseLabList}"
draggableColumns="false"
useRollOver="false"
styleName="gridStyle"
rowCount="{id_DataGrid.dataProvider.length + 1}"
variableRowHeight="true" columnWidths="{[20,'10%','25%', '25%','30%']}">
<CheckBoxGrid:columns>
<mx:DataGridColumn dataField=""
headerText=""
rendererIsEditor="true"
sortable="false"
itemRenderer="com.zigron.controls.extended.components.CheckBoxGrid.CheckBoxRenderer"
headerRenderer="com.zigron.controls.extended.components.CheckBoxGrid.CheckBoxHeaderRenderer"
editorDataField="selected"
/>
<mx:DataGridColumn headerText="Test Code" dataField="InHouseLabTestTypeDTO.TestCode" editable="false" sortable="false"/>
<mx:DataGridColumn headerText="Test Name" dataField="InHouseLabTestTypeDTO.TestName" editable="false" />
<mx:DataGridColumn headerText="Result" dataField="TestResult" editable="true" />
<mx:DataGridColumn headerText="Normal Range" dataField="InHouseLabTestTypeDTO.TestRange" editable="false" />
</CheckBoxGrid:columns>
</CheckBoxGrid:CheckBoxDataGrid>

It works without issues in FF11, DataGrid in a popup with a TextInput in an itemRenderer, A,C,V,X or CTRL+A,C,V,X works:
Application.mxml:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
minWidth="955" minHeight="600" layout="vertical">
<mx:Script>
<![CDATA[
import mx.managers.PopUpManager;
protected function clickHandler(event:MouseEvent):void
{
var popup:MyPopup = new MyPopup();
PopUpManager.addPopUp(popup, this)
}
]]>
</mx:Script>
<mx:Button label="click me!" click="clickHandler(event)" />
</mx:Application>
MyPopup.mxml:
<?xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="300">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
private var ac:ArrayCollection = new ArrayCollection([{}]);
]]>
</mx:Script>
<mx:DataGrid width="100%" height="100%" dataProvider="{ac}">
<mx:columns>
<mx:DataGridColumn headerText="MyTextInput">
<mx:itemRenderer>
<mx:Component>
<mx:TextInput />
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
</mx:Panel>
Please try it and report.
Hope that helps

Related

AdvancedDatagrid with itemEditor: Value disappears when clicked

I'm trying to use a ComboBox as itemEditor in an AdvancedDatagrid. Both the grid and the comboBox fills up correctly with values. But when I click in a cell the value disappears. Do I need to set more properties to make this work, or do I have to write my own itemEditor that copies the value to and from the itemEditor?
Full code:
<?xml version="1.0"?>
<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"
initialize="initCB();">
<fx:Script>
<![CDATA[
import mx.collections.*;
[Bindable] public var stateArray:ArrayCollection;
public function initCB():void {
stateArray=new ArrayCollection([{label:"AL", data:"Montgomery"},
{label:"AK", data:"Juneau"},
{label:"AR", data:"Little Rock"}]);
}
[Bindable] public var initDG:ArrayCollection = new ArrayCollection([{etikett:'NY', tekst:"New York"}, {etikett:'CA', tekst:"Los Angeles"}]);
]]>
</fx:Script>
<mx:AdvancedDataGrid id="gridIntMapping" y="24" left="10" right="605" height="166" editable="true" dataProvider="{initDG}">
<mx:columns>
<mx:AdvancedDataGridColumn width="130" dataField="etikett" headerText="Skjema referanse" editorDataField="text">
<mx:itemEditor>
<fx:Component>
<mx:ComboBox editable="true" dataProvider="{outerDocument.stateArray}" labelField="label"/>
</fx:Component>
</mx:itemEditor>
</mx:AdvancedDataGridColumn>
</mx:columns>
</mx:AdvancedDataGrid>
Set data.etikett to combobox text. like following:
<mx:ComboBox editable="true" dataProvider="{outerDocument.stateArray}" labelField="label" text="{data.etikett}" />
It will display text when you click.

Flex update dataprovider after datagrid edited

I have a datagrid in flex with an itemrenderer and a dataprovider.
The problem is when I edit a datagrid, the provider don't get updated with the edited value.
Here is my datagrid:
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%" borderColor="#FFFFFF" cornerRadius="0">
<mx:Script>
<![CDATA[
import mx.core.Application;
[Bindable]
private var provider:ArrayCollection = new ArrayCollection([
{data:'1'},
{data:'2"}]);
]]>
</mx:Script>
<!-- Here is the data grid , the provider is groupeCollection, ihave set editable to true-->
<mx:DataGrid id="myGrid" width="100%" height="80%"
dataProvider="{provider}" x="0" editable="true" >
<mx:columns>
<mx:DataGridColumn dataField="data" >
<mx:itemRenderer>
<mx:Component>
<mx:NumericStepper minimum="1" maximum="10000" />
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
</mx:Canvas>
Now after editing the cell ( dataFiel="data" ) and printing the dataprovider, nothing changes in it.
Have not used Flex 3 since long but can you once check that whether ItemRenderer supports boolean property rendererIsEditor? If yes then set it to true then your renderer will also work as editor.
EDIT: I tried your code now and there seems to be some compiler error with delcaration of items in ArrayCollection. You seem to mix " and ' for items. I corrected it and now verified it in the below example which works. You can click the button to check before and after scenarios. I am pasting the complete code for your convenience just paste and run:
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" minWidth="955" minHeight="600">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
protected function button1_clickHandler(event:MouseEvent):void
{
for(var i:int = 0; i<provider.length; i++) {
Alert.show(provider.getItemAt(i).data);
}
}
]]>
</mx:Script>
<mx:VBox width="100%" height="100%">
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%" borderColor="#FFFFFF" cornerRadius="0">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.core.Application;
[Bindable]
private var provider:ArrayCollection = new ArrayCollection([
{data:'1'},
{data:'2'}]);
]]>
</mx:Script>
<!-- Here is the data grid , the provider is groupeCollection, ihave set editable to true-->
<mx:DataGrid id="myGrid" width="100%" height="80%"
dataProvider="{provider}" x="0" editable="true" >
<mx:columns>
<mx:DataGridColumn dataField="data" >
<mx:itemRenderer>
<mx:Component>
<mx:NumericStepper minimum="1" maximum="10000" />
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
</mx:Canvas>
<mx:Button label="Check DP" click="button1_clickHandler(event)"/>
</mx:VBox>
</mx:Application>
You can use itemEditor instead of itemRenderer, itemRenderer only show your values if you want edit the data at runtime we have set value manually by using
data.propertyname = value;
Try this code:
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%" borderColor="#FFFFFF" cornerRadius="0">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.core.Application;
[Bindable]
private var provider:ArrayCollection = new ArrayCollection([
{data:'1'},
{data:'2'}]);
]]>
</mx:Script>
<mx:VBox>
<!-- Here is the data grid , the provider is groupeCollection, ihave set editable to true-->
<mx:DataGrid id="myGrid" width="100%" height="80%"
dataProvider="{provider}" x="0" editable="true" >
<mx:columns>
<mx:DataGridColumn dataField="data" editorDataField="value">
<mx:itemEditor>
<mx:Component>
<mx:NumericStepper minimum="1" maximum="10000" />
</mx:Component>
</mx:itemEditor>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
<mx:DataGrid width="100%" height="80%"
dataProvider="{provider}" x="0" editable="true" >
<mx:columns>
<mx:DataGridColumn dataField="data" >
<mx:itemRenderer>
<mx:Component>
<mx:NumericStepper minimum="1" maximum="10000" />
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
</mx:VBox>
</mx:Canvas>

how to call mxml application from action script

I've one main.mxml which has login button which looks like below -
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
backgroundColor="#C4D4EF" layout="absolute">
<mx:HTTPService id="serverCall" method="POST"
url="http://localhost:8080/LDAPService/reg"
result="on_Result(event)" fault="on_Fault(event)"
/>
<mx:Script>
<![CDATA[
private function on_Result(event:ResultEvent):void {
// How to write here
}
]]>
</mx:Script>
<mx:Panel x="414" y="145" width="355" height="200" layout="absolute"
<mx:Button x="142" y="115" label="Login" id="callToServer"
click="send_data(event)"/>
</mx:Panel>
</mx:Application>
Now I want to call second.mxml file which looks like below -
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns="*" creationComplete="iFrame.visible=true"
viewSourceURL="srcview/index.html">
<mx:HBox width="100%" height="100%">
<mx:Panel title="/ Company Home" width="200" height="100%" >
</mx:Panel>
<mx:Panel width="100%" height="100%" title="Ticket Details" paddingTop="1" >
<IFrame id="iFrame" source="some service call url" width="100%" height="100%" />
<mx:ControlBar>
<mx:CheckBox id="cbVisible" label="IFrame Visible" selected="true"
click="iFrame.visible=cbVisible.selected"/>
</mx:ControlBar>
</mx:Panel>
</mx:HBox>
</mx:Application>
How can I call second.mxml from main.mxml? Please advice, Thanks for your help!
OK this example is in flex 4! it uses spark instead of mx
This shows the basics of states.
You can read more here: http://www.artima.com/articles/flex_4_states.html
This article shows the difference between flex3 and flex4 states
This is only a start. Hope this helps you.
<?xml version="1.0"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark" >
<fx:Script ><![CDATA[
import mx.rpc.events.ResultEvent;
<![CDATA[
private function on_Result( event:ResultEvent ):void
{
currentState = "result";
}
]]>
]]>
</fx:Script >
<fx:Declarations >
<s:HTTPService id="serverCall"
url="http://localhost:8080/LDAPService/reg"
useProxy="false"
method="POST"
result="on_Result(event)" >
</s:HTTPService >
</fx:Declarations >
<s:states >
<s:State name="init" />
<s:State name="result" />
</s:states >
<s:Panel x="414"
y="145"
width="355"
height="200" >
<s:Button x="142"
y="115"
label="Login"
id="callToServer"
includeIn="init"
click="serverCall.send()" />
</s:Panel >
<s:Panel title="/ Company Home"
width="200"
height="100%"
includeIn="result" >
</s:Panel >
<s:Panel width="100%"
height="100%"
includeIn="result"
title="Ticket Details" >
.... your stuff
</s:Panel >
</s:Application >

datefield itemrenderer

I try to create an editable datefield itemrenderer.
This itemrenderer works fine if I click on calendar button. But if I put data with keyboard, data isn't updating, if field is focus out data become empty.
See below my code
Datagrid column is like that
<mx:DataGridColumn dataField="echDate"
headerText="Date" headerStyleName="dgHeader"
itemEditor="ui.itemRenderer.irDateD" editorDataField="dateModif"/>
and item editor is
<?xml version="1.0" encoding="utf-8"?>
<s:MXDataGridItemRenderer 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">
<fx:Script>
<![CDATA[
import mx.controls.dataGridClasses.DataGridListData;
import mx.controls.listClasses.BaseListData;
import mx.events.CalendarLayoutChangeEvent;
import mx.events.FlexEvent;
[Bindable] public var dateModif:String;
override public function set data(value:Object):void{
if(listData){
var newDate:Date;
var value1 = value.echDate;
if (value1 is String){
newDate = new DateUtility().dateStringToObject2(value1);
super.data = newDate;
dfDG.selectedDate = newDate;
dfDG.text = value1;
}
else if (value1 is Date){
super.data = value as Date;
dfDG.selectedDate = value1 as Date;
dfDG.text = new DateUtility().DateAsToString(value1);
}
}
}
protected function dfDG_changeHandler(event:CalendarLayoutChangeEvent):void
{
dateModif=dfDG.text;
}
]]>
</fx:Script>
<mx:DateField id="dfDG"
editable="true"
formatString="DD/MM/YYYY"
yearNavigationEnabled="true"
width="95"
change="dfDG_changeHandler(event)"
>
</mx:DateField>
</s:MXDataGridItemRenderer>
I'll happy if someone could help me to solve that
You can try this solution.
I have inserted the second DG to let you see, if data is updated or not.
I don't have your DateUtility().dateStringToObject2(value1), that's why I use a Validator instead.
The "backward connection" between Renderer and App is implemented by means of Binding.
When you use your DateUtility() to correct the input you can insert result to the text property of the DateField.
<?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>
<fx:Model id="cells">
<dataset>
<data>
<name>a</name>
<echDate>14/01/2013</echDate>
</data>
<data>
<name>b</name>
<echDate>15/01/2013</echDate>
</data>
</dataset>
</fx:Model>
</fx:Declarations>
<s:VGroup>
<mx:DataGrid
width="386" height="100" dataProvider="{cells.data}"
alternatingItemColors="[0xffffff]"
horizontalGridLineColor="0x999999"
horizontalGridLines="true"
verticalGridLineColor="0x999999"
sortableColumns="false"
resizableColumns="false" selectable="false">
<mx:columns>
<mx:DataGridColumn dataField="name" headerText="Name"/>
<mx:DataGridColumn dataField="echDate" headerText="Date"
itemRenderer="com.dgdatefield.irDateD"/>
</mx:columns>
</mx:DataGrid>
<mx:DataGrid
width="386" height="100"
dataProvider="{cells.data}">
<mx:columns>
<mx:DataGridColumn dataField="name" headerText="Name"/>
<mx:DataGridColumn dataField="echDate" headerText="Date"/>
</mx:columns>
</mx:DataGrid>
</s:VGroup>
</s:Application>
//Renderer
<?xml version="1.0" encoding="utf-8"?>
<s:MXDataGridItemRenderer 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">
<fx:Declarations>
<mx:DateValidator
id="dateValidator"
source="{dfDG}"
property="text"
inputFormat="DD/MM/YYYY"
wrongLengthError="The date format is not correct"
allowedFormatChars="/ - ."/>
</fx:Declarations>
<fx:Binding source="dfDG.text" destination="data.echDate"/>
<s:HGroup width="100%" horizontalAlign="center">
<mx:DateField
id="dfDG" text="{data.echDate}"
editable="true"
formatString="DD/MM/YYYY"
yearNavigationEnabled="true"
width="120"/>
</s:HGroup>
</s:MXDataGridItemRenderer>
I hope it can help you

Flex mx:DataGrid - Create combobox ItemRenderer

I have a mx:Datagrid in witch I'd like to add a combobox as item renderer.
<mx:DataGrid id="dgEnsActes"
horizontalScrollPolicy="on"
dataProvider="{arListeDevis}"
width="100%" height="100%" >
<mx:columns>
<mx:DataGridColumn dataField="dvIndex" headerText="" headerStyleName="dgHeader" fontWeight="normal" width="40"/>
<mx:DataGridColumn dataField="dvLibelle" headerText="Libellé" headerStyleName="dgHeader" wordWrap="true" fontWeight="normal" width="180"/>
<mx:DataGridColumn dataField="dvTotal" headerText="Total" headerStyleName="dgHeader" width="60" fontWeight="normal"/>
<mx:DataGridColumn dataField="dvStatut" headerText="Statut"
rendererIsEditor="true" editorDataField="result" itemRenderer="fr.inters.ui.itemRenderer.irComboEtatDevis"
wordWrap="true" headerStyleName="dgHeader" fontWeight="normal" width="70"/>
<mx:DataGridColumn dataField="dvAcceptDirect" headerText="Création" headerStyleName="dgHeader" width="60" fontWeight="normal"/>
</mx:columns>
</mx:DataGrid>
My custom item renderer is like that:
<?xml version="1.0" encoding="utf-8"?>
<s:MXDataGridItemRenderer 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">
<fx:Script>
<![CDATA[
public var result:String="";
[Bindable] var dpValue:Array=[
{label:"Accepté", data:"Accepté"},
{label:"Refusé", data: "Refusé"},
{label:"En attente", data: "En attente"}];
override public function set data(value:Object):void
{
super.data = value;
if (value != null)
{
var currentValue:String = value.size;
var len:int = dpValue.length;
for (var i:int = 0; i < len; i++)
{
if (dpValue[i].data == currentValue)
{
editor.selectedIndex = i;
break;
}
}
}
}
public function onChange():void
{
var index:int = editor.selectedIndex;
result = dpValue[index].data;
}
]]>
</fx:Script>
<mx:ComboBox id="editor" dataProvider="{dpValue}" width="130" change="onChange()"/>
</s:MXDataGridItemRenderer>
But when I try to debug an error appear, the message is selectedIndex is undefined
Is someone to help me?
Thanks
Why don't you use the combobox without a grid item renderer?
have a look at this sample at http://blog.flexmp.com/2008/02/18/simple-datagrid-combobox-as-item-editor-example/
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:XML id="xml" source="weather.xml"/>
<mx:DataGrid id="myDatagrid" dataProvider="{xml.city}"
variableRowHeight="true" editable="true" rowHeight="50"
width="300" height="300">
<mx:columns>
<mx:DataGridColumn dataField="Location"/>
<mx:DataGridColumn dataField="Climate" editable="true" editorDataField="value">
<mx:itemEditor>
<mx:Component>
<mx:ComboBox editable="true">
<mx:dataProvider>
<mx:String>Mild</mx:String>
<mx:String>Hot</mx:String>
<mx:String>Foggy</mx:String>
<mx:String>Rainy</mx:String>
<mx:String>Snow</mx:String>
</mx:dataProvider>
</mx:ComboBox>
</mx:Component>
</mx:itemEditor>
</mx:DataGridColumn>
<mx:DataGridColumn dataField="CloudCoverPercent" editable="true" editorDataField="value"
itemEditor="CloudCover"/>
</mx:columns>
</mx:DataGrid>
</mx:Application>
This is probably the best example
https://bytebucket.org/trilogy/flex-datagrid-with-dropdown-menu-combobox-item-editor/raw/0de0e1e0cd2f0bb99512aedb920eaa0d6055e359/bin/main.swf
Double Click on 2nd column
Source Code https://bitbucket.org/trilogy/flex-datagrid-with-dropdown-menu-combobox-item-editor/src