Can anyone please tell me how to display different attributes of an object in different columns in datagrid in flex?
Have you tried to read the basic help page for flex DataGrid ?
http://livedocs.adobe.com/flex/3/html/help.html?content=dpcontrols_6.html
Here is a sample from the live docs:
<?xml version="1.0"?>
<!-- dpcontrols/DataGridVisibleColumn.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" >
<mx:DataGrid id="myDG" width="350">
<mx:dataProvider>
<mx:ArrayCollection>
<mx:source>
<mx:Object Artist="Pavement" Price="11.99"
Album="Slanted and Enchanted" />
<mx:Object Artist="Pavement"
Album="Brighten the Corners" Price="11.99" />
</mx:source>
</mx:ArrayCollection>
</mx:dataProvider>
<mx:columns>
<mx:DataGridColumn dataField="Artist" />
<mx:DataGridColumn dataField="Album" />
<mx:DataGridColumn id="price" dataField="Price" visible="false"/>
</mx:columns>
</mx:DataGrid>
<!-- The column id property specifies the column to show.-->
<mx:Button label="Toggle Price Column"
click="price.visible = !price.visible;" />
</mx:Application>
Related
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>
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 chechbox in a gridview. i need it disabled for some condition and enabled for other.
Problem is how to fetch check box id out side the grid.
Please help ....
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:pw="http://intelligentpathways.com.au/Flex/v2">
<mx:ArrayCollection id="ac">
<mx:Object name="Alpha" enabled="{true}"/>
<mx:Object name="Bravo" enabled="{true}"/>
<mx:Object name="Charlie" enabled="{false}"/>
<mx:Object name="Delta" enabled="{false}"/>
<mx:Object name="Echo" enabled="{true}"/>
</mx:ArrayCollection>
<mx:Panel horizontalCenter="0" verticalCenter="0" title="Renderer Demo">
<mx:DataGrid width="500" height="300" dataProvider="{ac}">
<mx:columns>
<mx:DataGridColumn headerText="Name" dataField="name"/>
<mx:DataGridColumn headerText="Enabled?" dataField="enabled"/>
<mx:DataGridColumn headerText="Checkbox">
<mx:itemRenderer>
<mx:Component>
<mx:Box paddingLeft="3">
<mx:CheckBox label="Foxtrot" enabled="{data.enabled}"/>
</mx:Box>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
</mx:Panel>
</mx:Application>
By giving you're check box an ID you should be able to reference it no matter what container objects it's it.
<mx:CheckBox id=myCheckbox ... />
can then be referenced in any script in that file like this:
private function toggleCheckBoxEnabled():void{
if(some condition){
myCheckBox.enabled = true;
}else{
myCheckBox.enabled = false;
}
}
I've got an ArrayCollection which is properly displayed in this Advanced Datagrid:
<mx:AdvancedDataGrid id="drawingDataDG"
editable="true" sortableColumns="true"
headerWordWrap="true"
sortExpertMode="true"
rowCount="8" y="10" right="10" left="10"
dataProvider="{model.drawingsData}">
<mx:columns>
<mx:AdvancedDataGridColumn
headerText="Approved in Week"
dataField="ApprovedInWeek"
editable="false"
visible="true" />
<mx:AdvancedDataGridColumn
headerText="DRAWING_PK"
dataField="DRAWING_PK"
editable="false"
visible="false" />
<mx:AdvancedDataGridColumn
headerText="Drawing No"
dataField="DRAWING_NO"
editable="false"
visible="true"/>
<mx:AdvancedDataGridColumn
headerText="Drawing Index"
dataField="DRAWING_INDEX"
editable="false"
visible="true"/>
</mx:columns>
`
According to this explanation link text I've implemented a GroupingCollection. But it just doesn't work!
<mx:AdvancedDataGrid id="drawingDataDG"
editable="true" sortableColumns="true"
headerWordWrap="true"
sortExpertMode="true"
rowCount="8" y="10" right="10" left="10"
initialize="gc.refresh();">
<mx:dataProvider>
<mx:GroupingCollection id="gc" source="{model.drawingsData}">
<mx:Grouping>
<mx:GroupingField name="ApprovedInWeek"/>
</mx:Grouping>
</mx:GroupingCollection>
</mx:dataProvider>
<mx:columns>
<mx:AdvancedDataGridColumn
headerText="Approved in Week"
dataField="ApprovedInWeek"
editable="false"
visible="true" />
<mx:AdvancedDataGridColumn
headerText="DRAWING_PK"
dataField="DRAWING_PK"
editable="false"
visible="false" />
<mx:AdvancedDataGridColumn
headerText="Drawing No"
dataField="DRAWING_NO"
editable="false"
visible="true"/>
<mx:AdvancedDataGridColumn
headerText="Drawing Index"
dataField="DRAWING_INDEX"
editable="false"
visible="true"/>
</mx:columns>
</mx:AdvancedDataGrid>
Please let me know what additional details you may need?
You have to pass the AdvancedDataGrid an instance of the HierarchicalData class as its dataProvider in order for it to recognize your GroupingCollections
Finally I was able to implement grouping according to this blog: Summarizing Grouped Data With Flex 3 AdvancedDataGrid Thanks Robusto for guiding!
I have a hierarchical data set that i would like to display in an advancedDataGrid. My data is a set of composed value objects that do not use the 'children' attribute. On a Tree control you can create a custom dataDescriptor to define which elements contain the children of the node. Can this be done on the datagrid as well?
Hierarchical data has a childrenField property that you can use to "tell" the control where should it look for branches.
http://livedocs.adobe.com/flex/3/html/help.html?content=advdatagrid_07.html
From Adobe live docs on AdvancedDataGrid examples, you can see that you can set the dataProvider of the AdvancedDataGrid to a GroupingCollection instance, in order to create some groups for your data. Going down the class hierarchy, there is HierarchicalData, which you need to use when setting your dataProvider on the AdvancedDataGrid. Example (sorry for using arrays instead of one XML):
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
<mx:Array id="dianaSerfes">
<mx:Object name="geen" surname="zod" />
</mx:Array>
<mx:Array id="xySerfs">
<mx:Object name="sdf" surname="sdfsdgd" />
</mx:Array>
<mx:Array id="johnSerfs">
<mx:Object name="jack" surname="the ripper" />
<mx:Object name="diana" surname="bloom" serfs="{dianaSerfes}"/>
</mx:Array>
<mx:Array id="myData">
<mx:Object name="xy" surname="zzz" serfs="{xySerfs}" />
<mx:Object name="blue" surname="zed" />
<mx:Object name="John" surname="smith" serfs="{johnSerfs}" />
</mx:Array>
<mx:AdvancedDataGrid width="100%" height="100%">
<mx:dataProvider>
<mx:HierarchicalData id="hd" source="{myData}" childrenField="serfs" />
</mx:dataProvider>
<mx:columns>
<mx:AdvancedDataGridColumn dataField="name" />
<mx:AdvancedDataGridColumn dataField="surname" />
</mx:columns>
</mx:AdvancedDataGrid>
</mx:Application>