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 ?
Related
I have a .mxml file which has following Panel
<s:Panel width="130%" height="100%" title="Results {noOfRowsText}">
<s:layout>
<s:VerticalLayout paddingTop="5" paddingLeft="5" paddingBottom="5" paddingRight="5"/>
</s:layout>
<mx:DataGrid id="desResults" width="100%" height="100%" dataProvider="{response.sList}"
visible="{response != null && response.sList != null && response.sList.length != 0}"
itemClick="datagrid_itemClickHandler(event)">
<mx:columns>
<mx:DataGridColumn headerText="Start Date" dataField="sVaRWindowStartDate"
itemRenderer="com.vanilla.package.class"/>
<mx:DataGridColumn headerText="End Date" dataField="sVaRWindowEndDate"
itemRenderer="com.vanilla.package.class"/>
<mx:DataGridColumn headerText="Value" dataField="Value" textAlign="left"
itemRenderer="com.vanilla.package.classOne"/>
<mx:DataGridColumn headerText="Description" dataField="description" textAlign="right"
itemRenderer="com.vanilla.package.classOne"/>
</mx:columns>
</mx:DataGrid>
</s:Panel>
<s:Panel id="panelLsR" width="60%" height="100%" includeIn="lsr" title="LsR Details">
<s:layout>
<s:VerticalLayout horizontalAlign="left"
verticalAlign="top" paddingTop="5"
paddingLeft="5" paddingRight="5" paddingBottom="5"/>
</s:layout>
<s:HGroup width="100%" verticalAlign="middle" horizontalAlign="left" gap="10">
<mx:Text text="{lsrPanelTitle}"/>
<mx:Spacer width="100%"/>
<s:Button label="Close" click="lsrPanel_closeHandler(event)"/>
</s:HGroup>
<mx:DataGrid id="lsrResults" width="100%" height="100%"dataProvider="{lsrSeriesList}"
visible="{lsrSeriesList != null && lsrSeriesList.length != 0}"
itemClick="datagrid_itemClickHandler(event)">
<mx:columns>
<mx:DataGridColumn headerText="Date" dataField="date"/>
<mx:DataGridColumn headerText="Value" dataField="value" textAlign="right" itemRenderer="com.vanilla.package.class"/>
</mx:columns>
</mx:DataGrid>
</s:Panel>
When I click on the end Date column, the screen gets divided into two parts, one for Results (noOfRows) and other for lsrDetails. I want to decrease the width for lsrDetails part and want to increase the width for Results (noOfRows). How can I achieve this? datagrid_itemClickHandler function as follow. I tried to change the width percentages in the panelLsR but no luck. Can somebody please help me achieve this? I am working on flex for the first time.
protected function datagrid_itemClickHandler(event:ListEvent):void
{
getsLsR(request);
}
To resize the panel using percentage width, use 'percentWidth'. For example:
panelsLsr.percentWidth = 80;
Also, fix the other panel width so that it adds up to 100%.
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.
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}"/>
I have a datagrid in Flex 4 with a NumericStepper as editor for a numeric value. I can set pre-defined maximum and minimum values for the NumericStepper, but I need to be able to have different limits for each row in the DataGrid. How can I do this?
This is the code for the datagrid:
<mx:DataGrid x="0" y="45" width="272" height="525" dataProvider="{dp}" variableRowHeight="true" editable="true" id="equipmentDG" verticalAlign="middle">
<mx:columns>
<mx:DataGridColumn headerText="Benämning" headerStyleName="gridheader" fontSize="12" width="128" dataField="name" editable="false"/>
<mx:DataGridColumn headerText="Antal" headerStyleName="gridheader" width="40" dataField="antal" editorDataField="value" editable="true">
<mx:itemEditor>
<fx:Component>
<mx:NumericStepper minimum="0" maximum="50" stepSize="1" width="35" height="20"></mx:NumericStepper>
</fx:Component>
</mx:itemEditor>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
Edit:
Based on Flextras answer, I've changed the NumericStepper row to
<mx:NumericStepper minimum="{data.minNo}" maximum="{data.maxNo}" stepSize="1" width="35" height="20"></mx:NumericStepper>
but now I get a StackOverflowError when I click on the cell to change the value. I posted a new question regarding that here: StackOverflowError on DataGrid row specific limits in a NumericStepper
Te DataGrid only creates rows for what is displayed on screen. It does not create rows for each item in your dataProvider. This is called renderer recycling and is done for performance reasons.
I would recommend that you should try to specify the max and min values of your NumericStepper based on elements of your data object, not based on the position of the row. Basically, something like this:
<mx:DataGrid x="0" y="45" width="272" height="525" dataProvider="{dp}" variableRowHeight="true" editable="true" id="equipmentDG" verticalAlign="middle">
<mx:columns>
<mx:DataGridColumn headerText="Benämning" headerStyleName="gridheader" fontSize="12" width="128" dataField="name" editable="false"/>
<mx:DataGridColumn headerText="Antal" headerStyleName="gridheader" width="40" dataField="antal" editorDataField="value" editable="true">
<mx:itemEditor>
<fx:Component>
<mx:NumericStepper minimum="{data['min']}" maximum="data['max']}" stepSize="1" width="35" height="20"></mx:NumericStepper>
</fx:Component>
</mx:itemEditor>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
<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>