please tell me somebody that, How i find that an item is edited complete in data grid in Flex ?
Actually i am using Flex 4 and develop application for AIR, I need to make an editable grid. all of my custom made editor is work but the native textinput type editor is not working.
Here is my complete code.
The third and last datagridcolumn is not update values when i edit it.
<mx:DataGrid id="id_RecentPatientGrid" includeInLayout="{includeGridInLayout}" visible="{includeGridInLayout}"
rowCount="{id_RecentPatientGrid.dataProvider.length + 1}"
width="100%" verticalScrollPolicy="off"
editable="true"
itemEditBegin="recentPatientGridItemEditBeginHandler(event)"
itemEditEnd="recentPatientGridItemEditEndHandler(event)"
dataProvider="{immunizationCollection}" draggableColumns="false" useRollOver="false"
sortableColumns="false" fontFamily="Verdana" verticalGridLines="false"
styleName="QIGrid"
headerStyleName="QIGridHeader"
headerBackgroundSkin="com.adobe.Quivus.view.controls.skins.dataGridSkins.DataGridHeaderBlueSkin"
headerSeparatorSkin="com.adobe.Quivus.view.controls.skins.dataGridSkins.DatagridHeaderSeparatorSkin">
<!--headerBackgroundSkin="com.adobe.Quivus.view.controls.skins.dataGridSkins.dataGridHeaderSkin"-->
<mx:columns>
<!-- Changes by baber waqas for displaying serial number -->
<mx:DataGridColumn headerText="Sr.#" width="50" editable="false" labelFunction="displayRowNum" />
<mx:DataGridColumn headerText="Visit Date" width="50" editable="false" labelFunction="displayVisitDate" />
<mx:DataGridColumn headerText="Date Admin" width="60" editable="true" dataField="DateAdmin" editorDataField="text">
<!--editorDataField="selectedDate" itemRenderer="com.adobe.Quivus.view.controls.custom.itemRenderer.DateRenderer4DG">-->
<!--<mx:itemEditor>
<fx:Component>
<components:LabelDateField width="100%" editable="true" text="{outerDocument.id_DateAdmin.text}"
selectableRange="{{rangeEnd : new Date()}}" />
</fx:Component>
</mx:itemEditor>-->
</mx:DataGridColumn>
<mx:DataGridColumn dataField="ImmunizationType.ImmunizationTypeName" width="120" headerText="Immunization" editorDataField="editorText" itemRenderer="mx.controls.Label">
<mx:itemEditor>
<fx:Component>
<itemEditors:SparkComboBoxItemEditor dataProvider="{outerDocument.model.immunizationTypeDTOList}" labelField="ImmunizationTypeName" width="120"/>
</fx:Component>
</mx:itemEditor>
</mx:DataGridColumn>
<mx:DataGridColumn dataField="Dose" headerText="Dose" width="50" editorDataField="editorText">
<mx:itemEditor>
<fx:Component>
<!--<VBImmunization:ImmunizationItemEditor dataProvider="{outerDocument.model.immunizationDoseList}" immunizationField="Dose" width="100%"/>
-->
<itemEditors:SparkComboBoxItemEditor dataProvider="{outerDocument.model.immunizationDoseList}" labelField="Dose" width="50" height="100%"/>
</fx:Component>
</mx:itemEditor>
</mx:DataGridColumn>
<mx:DataGridColumn dataField="LotNumber" headerText="Lot#" width="50" editorDataField="editorText">
<mx:itemEditor>
<fx:Component>
<itemEditors:SparkComboBoxItemEditor dataProvider="{outerDocument.model.immunizationLotNumberList}" labelField="LotNumber" width="50"/>
</fx:Component>
</mx:itemEditor>
</mx:DataGridColumn>
<mx:DataGridColumn headerText="Next Due" width="50" dataField="NextDoseDue" editable="true" editorDataField="text"> <!-- editorDataField="selectedDate" itemRenderer="com.adobe.Quivus.view.controls.custom.itemRenderer.DateRenderer4DG">-->
<!--<mx:itemEditor>
<fx:Component>
<components:LabelDateField width="100%" editable="true" text="{outerDocument.id_NextDue.text}" />
</fx:Component>
</mx:itemEditor>-->
</mx:DataGridColumn>
<!--<mx:DataGridColumn dataField="VisitStatus" headerText="Status" itemRenderer="com.adobe.Quivus.view.controls.custom.itemRenderer.DateRenderer4DG" />-->
<commons:DataGridColumnEx width="85" headerText="" editable="false" data="{deleteColumnData}" dataField="Note" property="PatientImmunizationId" section="{QIPopUpManager.IMMUNIZATION}" itemRenderer="com.adobe.Quivus.view.controls.custom.patientExamView.quickInput.commons.DeleteRecordRenderer" />
</mx:columns>
</mx:DataGrid>
Thanks in Advance
Just do something as:
<components:LabelDateField id="df"
width="100%" editable="true"
text="{outerDocument.id_DateAdmin.text}"
selectableRange="{{rangeEnd : new Date()}}"
change="{outerDocument.id_DateAdmin.text = df.selectedDate}"/>
Related
I have the following datagrid:
<mx:DataGrid height="400" width="800" id="adverseEventDataGrid" borderColor="#000000" borderStyle="solid" draggableColumns="false" horizontalCenter="13" verticalCenter="0" verticalAlign="middle">
<mx:columns>
<mx:DataGridColumn headerText="selectToys" dataField="selectToys" width="30" itemRenderer="mx.controls.CheckBox" rendererIsEditor="true" editorDataField="selectedConcepts" textAlign="center"/>
<mx:DataGridColumn headerText="StudyId" dataField="StudyID" visible="false"/>
<mx:DataGridColumn headerText="ConceptId" dataField="ConceptID" visible="true" width="40"/>
</mx:columns>
</mx:DataGrid>
i need to get values when check box is selected in the datagrid. how do i get it ?
In my code the datagrid is not fire datachanged event.
can anyone help me to find where I am wrong. for help the code is given below.
<mx:DataGrid id="userlist"
horizontalGridLines="true"
horizontalGridLineColor="0xeeeeee"
dataChange="dataChanged();"
editable="true"
change="changegrid(event);"
width="100%"
height="250" borderColor="#FF0000" borderStyle="solid"
borderThickness="1">
<mx:columns >
<mx:DataGridColumn dataField="User" editable="false" headerText="User" />
<mx:DataGridColumn dataField="cam" editable="true" width="24" itemEditor="mx.controls.CheckBox" editorDataField="cam" textAlign="center" headerText="M">
<mx:itemRenderer>
<mx:Component >
<mx:Box horizontalAlign="center" verticalAlign="middle" height="100%" width="100%">
<mx:CheckBox id="chb" click="data.cam=!data.cam" selected="{data.cam}"/>
</mx:Box>
</mx:Component>
</mx:itemRenderer>
<mx:headerRenderer>
<mx:Component>
<mx:Image width="16" height="16" toolTip="Change Cam Status" source="#Embed(source='icons/webcam_start.png')" verticalAlign="middle" horizontalAlign="center"/>
</mx:Component>
</mx:headerRenderer>
</mx:DataGridColumn>
<mx:DataGridColumn dataField="mic" editable="false" itemEditor="mx.controls.CheckBox" editorDataField="mic" width="24" textAlign="center" headerText="C">
<mx:itemRenderer>
<mx:Component >
<mx:Box horizontalAlign="center" verticalAlign="middle" height="100%" width="100%">
<mx:CheckBox id="chb1" click="data.mic=!data.mic" selected="{data.mic}" />
</mx:Box>
</mx:Component>
</mx:itemRenderer>
<mx:headerRenderer>
<mx:Component>
<mx:Image width="16" height="16" toolTip="Change Microphone Status " source="#Embed(source='icons/microphone_plus.png')" verticalAlign="middle" horizontalAlign="center"/>
</mx:Component>
</mx:headerRenderer>
</mx:DataGridColumn>
<mx:DataGridColumn dataField="sound" editable="false" itemEditor="mx.controls.CheckBox" editorDataField="sound" width="24" textAlign="center" headerText="R1">
<mx:itemRenderer>
<mx:Component >
<mx:Box horizontalAlign="center" verticalAlign="middle" height="100%" width="100%">
<mx:CheckBox id="chb2" click="data.sound=!data.sound" selected="{data.sound}"/>
</mx:Box>
</mx:Component>
</mx:itemRenderer>
<mx:headerRenderer>
<mx:Component>
<mx:Image width="16" height="16"
toolTip="Turn Sound on/off " source="#Embed(source='icons/audio_volume_high.png')" verticalAlign="middle" horizontalAlign="center"/>
</mx:Component>
</mx:headerRenderer>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
I am using the following data
private var plist:ArrayList = new ArrayList(
[{User:'Ravi Kanchan Sharma', cam:true, mic:true, sound:true},
{User:'Vijay Anand Sharma', cam:true, mic:false, sound:true},
{User:'Yogender Kumar Sharma', cam:false, mic:true, sound:true}]);`
For the dataChange event to fire from a component, the 'data' value needs to change. It is not clear from your code why the DataGrid's data value will change.
the dataChange event is usually used inside an itemRenderer to modify its display contents whenever the itemRenderer's data property is changed. The data property in an itemRenderer would represent a single element of the DataGrid's dataProvider.
Unless you are using the DataGrid as an itemRenderer--which is possible but unusual--I would not expect the DataGrid's data property to change; and therefore the dataChange event will never fire from the DataGrid.
i have a advance datagrid in which i have 2 columns and every row of the column is a item editor
now i want to edit the row cell on double click i tried various things to make it editable
some of properties are written in this code.
i make editable property true of colmns Grid and also i tried the rendrerIsEditor to set it true...
<mx:AdvancedDataGrid id="varGrid" width="100%" top="7" bottom="5" left="7" right="7" rowCount="15"
sortableColumns="true" editable="true">
<mx:columns>
<mx:AdvancedDataGridColumn headerText="Name" editable="true" dataField="name" sortable="true" editorDataField="text" rendererIsEditor="true">
<mx:itemEditor>
<fx:Component>
<s:GridItemEditor >
<s:TextInput id="variableName" text="#{value}" restrict="^\\{\\}" width="100%" height="100%" maxChars="250"
/>
</s:GridItemEditor>
</fx:Component>
</mx:itemEditor>
</mx:AdvancedDataGridColumn>
<mx:AdvancedDataGridColumn headerText="Value" editable="true" dataField="lastValue" sortable="true" rendererIsEditor="true">
<mx:itemEditor>
<fx:Component>
<s:GridItemEditor>
<s:TextInput text="#{value}" restrict="^\\{\\}" width="100%" height="100%" maxChars="250"/>
</s:GridItemEditor>
</fx:Component>
</mx:itemEditor>
</mx:AdvancedDataGridColumn>
</mx:columns>
<s:AsyncListView list="{data.variables}"/>
</mx:AdvancedDataGrid>
please help me is i am doing it right or is there something missing in this.
There are a couple of things wrong with your code:
You want to use a custom itemEditor, so don't set rendererIsEditor="true".
You can't use s:GridItemEditor within the AdvancedDataGrid. It's for the Spark s:DataGrid.
The id attribute is not allowed within <fx:Component>.
Use Spark components as itemEditor is not as easy as it used to be with Halo components. I'd recommend you use the mx:TextInput instead of the s:TextInput. If you need to use the Spark one take a look at MXAdvancedDataGridItemRenderer and Using a Spark item renderer with an MX control.
Below is a code snippet that corrects all those issues and uses the mx:TextInput component:
<mx:AdvancedDataGrid id="varGrid" width="100%" top="7" bottom="5" left="7" right="7" rowCount="15" sortableColumns="true"
editable="true">
<mx:columns>
<mx:AdvancedDataGridColumn headerText="Name" editable="true" dataField="name" sortable="true" editorDataField="text">
<mx:itemEditor>
<fx:Component>
<mx:TextInput restrict="^\\{\\}" width="100%" height="100%" maxChars="250"/>
</fx:Component>
</mx:itemEditor>
</mx:AdvancedDataGridColumn>
<mx:AdvancedDataGridColumn headerText="Value" editable="true" dataField="lastValue" sortable="true">
<mx:itemEditor>
<fx:Component>
<mx:TextInput restrict="^\\{\\}" width="100%" height="100%" maxChars="250"/>
</fx:Component>
</mx:itemEditor>
</mx:AdvancedDataGridColumn>
</mx:columns>
<s:AsyncListView list="{data.variables}"/>
</mx:AdvancedDataGrid>
In my flex application im using a datagrid with following columns
<mx:DataGrid x="10" y="265" width="1205" dataProvider="{vendors}" editable="true" lockedColumnCount="4" horizontalScrollPolicy="on">
<mx:DataGridColumn headerText="Select" editable="false" textAlign="center" >
<mx:itemRenderer >
<mx:Component>
<mx:CheckBox click="data.select = !data.select" change="outerDocument.addDetail(data)" selected="{data.select}" >
</mx:CheckBox>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
<mx:DataGridColumn headerText="One" dataField="one" color="black" editable="false" width="125" />
<mx:DataGridColumn headerText="Two" dataField="two" color="black" editable="false" width="125"/>
<mx:DataGridColumn headerText="Three" dataField="three" color="black" editable="false"/>
</mx:DataGird>
now i want to disable the checkbox column on fetching data..after datas are populated in datagrid if user selects any of the field in datagrid for editing..the checkbox for that selected row should be enabled...other rows checkbox should be disabled..
I hope this information is enough for this requirement
any idea about this?? thankxx in advance...
I dint understand completely your problem but trying to answer it.
<mx:DataGrid x="10" y="265" width="1205" dataProvider="{vendors}" editable="true" lockedColumnCount="4" horizontalScrollPolicy="on" id="dgGrid">
<mx:DataGridColumn headerText="Select" editable="false" textAlign="center" >
<mx:itemRenderer >
<mx:Component>
<mx:CheckBox click="data.select = !data.select" change="outerDocument.addDetail(data)" selected="{data.select}"
enabled="{outerDocument.dgGrid.selectedIndex==outerDocument.vendors.getItemIndex(data)}>
</mx:CheckBox>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
<mx:DataGridColumn headerText="One" dataField="one" color="black" editable="false" width="125" />
<mx:DataGridColumn headerText="Two" dataField="two" color="black" editable="false" width="125"/>
<mx:DataGridColumn headerText="Three" dataField="three" color="black" editable="false"/>
</mx:DataGird>
This will work If your dataprovider for grid is an arrayCollection which is declared as public..
<mx:DataGrid id="dg1" dataProvider="{cNumbersList}" cornerRadius="3"
allowMultipleSelection="true"
change="selectedItem=(event.target as DataGrid).selectedItem.contactName;
selectedSno=(event.target as DataGrid).selectedItem.contactNo;"
dropEnabled="true" dragMoveEnabled="true" dragEnabled="true"
fontWeight="normal">
<mx:columns>
<mx:DataGridColumn dataField="contactName" headerText="Name"/>
<mx:DataGridColumn dataField="contactNo"
headerText="ContactNo"/>
</mx:columns>
</mx:DataGrid>
<mx:DataGrid id="dg2" cornerRadius="3" allowMultipleSelection="true"
visible="false" dataProvider="{}" dropEnabled="true"
dragMoveEnabled="true" dragEnabled="true" fontWeight="normal">
<mx:columns>
<mx:DataGridColumn dataField="contactName" headerText="Name"/>
<mx:DataGridColumn dataField="contactNo"
headerText="ContactNo"/>
</mx:columns>
</mx:DataGrid>
How can I get all dragged items in to second grid(dg2)?
If you are looking to access the items dropped into dg2 from dg1, here is how to do that:
var list:ListCollectionView = dg2.dataProvider;
for(i = 0; i < list.length; i++)
trace(list.getItemAt(i));
Btw, something tells me that this is wrong:
change="selectedItem=(event.target as DataGrid).selectedItem.contactName;
selectedSno=(event.target as DataGrid).selectedItem.contactNo;"
What are you trying to accomplish with it?
<mx:HBox>
<mx:List id="List1" dataProvider="{grpList}" labelField="groupName" dragMoveEnabled="true" dragEnabled="true" allowMultipleSelection="true" dropEnabled="true" width="120" />
<mx:VBox>
<mx:Label text="Selected Groups :" width="122" color="#C90855"/>
<mx:List id="List2" dropEnabled="true" labelField="groupName" dragEnabled="true" dragMoveEnabled="true" allowMultipleSelection="true" dataProvider="{selectedGroupsListArray}" width="120" height="111" borderColor="#0A8AE4"/>
</mx:VBox>
</mx:HBox>
<mx:HBox>
<mx:DataGrid id="dg" dataProvider="{cNumbersList}" cornerRadius="3" allowMultipleSelection="true"
change="selectedItem=(event.target as DataGrid).selectedItem.contactName;selectedSno=(event.target as DataGrid).selectedItem.contactNo;"
dropEnabled="true" dragMoveEnabled="true" dragEnabled="true" fontWeight="normal" height="163">
<mx:columns>
<mx:DataGridColumn dataField="contactName" headerText="Name"/>
<mx:DataGridColumn dataField="contactNo" headerText="ContactNo"/>
</mx:columns>
</mx:DataGrid>
<mx:VBox>
<mx:Label text="Selected Contacts :" width="122" color="#C90855" height="16"/>
<mx:DataGrid id="selectedContsList" cornerRadius="3" allowMultipleSelection="true"
dropEnabled="true" dragMoveEnabled="true" dragEnabled="true" fontWeight="bold" borderColor="#066EB7" height="144">
<mx:columns>
<mx:DataGridColumn dataField="contactName" headerText="Name"/>
<mx:DataGridColumn dataField="contactNo" headerText="ContactNo"/>
</mx:columns>
</mx:DataGrid>
</mx:VBox>
</mx:HBox>