Row specific limits on a NumericStepper in a DataGrid - apache-flex

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>

Related

how do i get values from datagrid?

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 ?

DataGrid extra space in last column

Trying to remove the extra space in last column,
i tried various approaches nothing works,
Whenever scroll bar appears, grid behave in strange way
notice the last column width is 70 but somehow grid is adding some extra space.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
import mx.events.ResizeEvent;
import mx.collections.IViewCursor;
import mx.collections.ArrayCollection;
import mx.rpc.events.ResultEvent;
import mx.controls.dataGridClasses.DataGridColumn;
import mx.managers.CursorManager;
[Bindable]
private var itemAC:Array = [
{name:"ABC", quantity:5, color:"Red", size:54, hasLogo:true},
{name:"ABC1", quantity:6, color:"Green", size:46, hasLogo:false}
];
]]>
</mx:Script>
<mx:Canvas width="25%" height="45%" backgroundColor="red" horizontalCenter="0"
verticalCenter="0" id="stuff" verticalScrollPolicy="off" horizontalScrollPolicy="off">
<mx:DataGrid height="100%" width="100%" id="dg" dataProvider="{itemAC}"
horizontalScrollPolicy="auto">
<mx:columns>
<mx:DataGridColumn width="70" dataField="name"/>
<mx:DataGridColumn width="70" dataField="quantity"/>
<mx:DataGridColumn width="70" dataField="color"/>
<mx:DataGridColumn width="70" dataField="size"/>
<mx:DataGridColumn width="70" dataField="hasLogo" resizable="false"/>
</mx:columns>
</mx:DataGrid>
</mx:Canvas>
</mx:Application>
You are specifying the width of the datagrid as 100%. So it will occupy whole space available no matter what is the width of each column. Since you are making use of less space than the allocated one the remaining is simply appended at the end. So try to adjust the width as per your requirement
Here is the MXML which makes the Canvas being scrollable horizontally. and removing the width property of Datagrid
<mx:Canvas width="352" height="45%" backgroundColor="red" horizontalCenter="0"
verticalCenter="0" id="stuff" verticalScrollPolicy="off" horizontalScrollPolicy="auto">
<mx:DataGrid height="100%" id="dg" dataProvider="{itemAC}"
horizontalScrollPolicy="auto">
<mx:columns>
<mx:DataGridColumn width="70" dataField="name"/>
<mx:DataGridColumn width="70" dataField="quantity"/>
<mx:DataGridColumn width="70" dataField="color"/>
<mx:DataGridColumn width="70" dataField="size"/>
<mx:DataGridColumn width="70" dataField="hasLogo" resizable="false"/>
</mx:columns>
</mx:DataGrid>
</mx:Canvas>
Set datagrid width=350. If you do not want the horizontal scroll bar, set it to 360
Don't give width to all of that leave the first one and you code will be similar like that.
<mx:Canvas width="25%" height="45%" backgroundColor="red" horizontalCenter="0"
verticalCenter="0" id="stuff" verticalScrollPolicy="off" horizontalScrollPolicy="off">
<mx:DataGrid height="100%" width="100%" id="dg" dataProvider="{itemAC}"
horizontalScrollPolicy="auto" resizableColumns="false">
<mx:columns>
<mx:DataGridColumn width="70" dataField="name"/>
<mx:DataGridColumn width="70" dataField="quantity"/>
<mx:DataGridColumn width="70" dataField="color"/>
<mx:DataGridColumn width="70" dataField="size"/>
<mx:DataGridColumn dataField="hasLogo"/>
</mx:columns>
</mx:DataGrid>
</mx:Canvas>
Problem is in resizable="false" that is replaced by the resizableColumns="false" in DataGrid.
this will definitely solve your problem.
Have # Nice DAy.....
I know it is coming a bit too late. But, better late than never.
I had the exact same problem and my solution is to add an empty dumb column on the right hand. It will take up the empty space, and give user a little wiggle room to resize the right most column.
//add an empty column at the right side
col = new AdvancedDataGridColumn("");
col.width = 80;
col.sortable = false;
col.draggable = false;
col.editable = false;
Try this horizontalScrollPolicy="off"
I had a similar problem here.
Solution :
Extra Space is indeed because you have specified datagrid width = 100%
This was helpful with resizing the application to multiple resolutions.
<mx:Canvas id="datagridCanvas" width="25%" height="45%" backgroundColor="red" horizontalCenter="0"
verticalCenter="0" id="stuff" verticalScrollPolicy="off" horizontalScrollPolicy="off">
<mx:DataGrid height="100%" width="100%" id="dg" dataProvider="{itemAC}"
horizontalScrollPolicy="auto" resizableColumns="false">
<mx:columns>
<mx:DataGridColumn minWidth="70" width="{datagridCanvas.width * 0.2}" dataField="name"/>
<mx:DataGridColumn minWidth="70" width="{datagridCanvas.width * 0.2}" dataField="quantity"/>
<mx:DataGridColumn minWidth="70" width="{datagridCanvas.width * 0.2}" dataField="color"/>
<mx:DataGridColumn minWidth="70" width="{datagridCanvas.width * 0.2}" dataField="size"/>
<mx:DataGridColumn minWidth="70" width="{datagridCanvas.width * 0.2}" dataField="hasLogo"/>
</mx:columns>
</mx:DataGrid>

Make item editor editable of the advancedatagrid in flex

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>

How i find that an item is edited complete in data grid in Flex?

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}"/>

How can i show delete image in each row in a Data grid?

i want show a image onmouse over inside data grid to each row,so if i click on that image,some function should call(as per my requirement).
how can i do this ?
<mx:DataGrid width="320" height="624" verticalScrollPolicy="on" dataProvider="{blocked_Usernames}" editable="true">
<mx:columns>
<mx:DataGridColumn headerText="Blocked User Name" dataField="blockedUsernames" editorDataField="value"/>
<mx:DataGridColumn width="20" editable="false">
<mx:itemRenderer >
<mx:Component >
<mx:Image source="#Embed('assets/image/Close.png')" width="10" height="10" autoLoad="false"/>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
You have to create a new MXML Component (a HBox with a Label and an Image will do the trick) and use it as an itemRenderer.
You can check this example from the Adobe website.

Resources