Can we provide 2 data providers at a same time in a data grid in flex 4. If yes, how ? Please explain with example.
<s:DataGrid id="dgDest" dataProvider="{destProds && ??}" width="100%" height="100%" editable="true"
selectionMode="multipleRows"
gridItemEditorSessionStarting="dgDest_gridItemEditorSessionStartingHandler(event)"
paste="dgDest_pasteHandler(event)"
>
<s:columns>
<s:ArrayList>
<!--<s:GridColumn width="20" dataField="MNF_DESC" sortCompareFunction="{sortNumeric('MNF_DESC')}" headerText="Manufacturer"
headerRenderer="{new ClassFactory(styleManager.getStyleDeclaration('.generic').getStyle('spreadHeaderRenderer'))}"/>-->
<s:GridColumn width="20" dataField="MNF_DESC" sortCompareFunction="{sortNumeric('MNF_DESC')}" headerText="Manufacturer"
headerRenderer="{ new ClassFactory(styleManager.getStyleDeclaration('.generic').getStyle('spreadHeaderRenderer'))}" />
<s:GridColumn dataField="PRODUCT_DESC" headerText="Products" editable="true"
headerRenderer="{ new ClassFactory(styleManager.getStyleDeclaration('.generic').getStyle('spreadHeaderRenderer'))}"/>
<s:GridColumn dataField="PACK_DESC" headerText="Packs" editable="false"
headerRenderer="{ new ClassFactory(styleManager.getStyleDeclaration('.generic').getStyle('spreadHeaderRenderer'))}"/>
<s:GridColumn dataField="NDF_CODE" headerText="NDF No." width="80" editable="false"
headerRenderer="{ new ClassFactory(styleManager.getStyleDeclaration('.generic').getStyle('spreadHeaderRenderer'))}"/>
</s:ArrayList>
</s:columns>
</s:DataGrid>
I tried like this but this is not working. please explain how this could be possible.
A Spark DataGrid cannot take 2 dataProviders.
If you need to merge the data, do it before you pass it to the DataGrid, on the server code or in the client code.
Related
I want to delete all selected rows in a Spark datagrid.
This code below accounts for the Vector indices but I cannot get it to work. It does not throw out any errors.
What am I doing wrong?
public function deleteItem(event:MouseEvent):void{
var sIndices:Vector.<int> = arrayGrid.selectedIndices;
sIndices.sort(Array.NUMERIC);
for(var index:int = sIndices.length-1; index>=0; index--) {
arrayColl.removeItemAt(sIndices[index]);
}
arrayColl.refresh();
}
private function convertDateFormat(item:Object,column:GridColumn):String {
return simpleDate.format(item.itemStartDate);simpleDate.format(item.itemEndDate);
}
]]>
</fx:Script>
<s:VGroup width="100%" height="100%" >
<s:Button label="Remove Selected Items"/>
<s:Button label="Add New Entry" click="newItem()"/>
<search:searchBar id="SearchBar" searchListCollection="{arrayColl}"
dataGrid="{arrayGrid}"/>
<s:DataGrid id="arrayGrid" width="100%" height="100%" dataProvider="{arrayColl}"
selectionMode="multipleRows" doubleClickEnabled="true">
<s:columns>
<s:ArrayList>
<s:GridColumn dataField="projectName" headerText="Project Name" />
<s:GridColumn dataField="tag" headerText="Priority Code" />
<s:GridColumn width="180" dataField="itemStartDate"
labelFunction="convertDateFormat" headerText="Start Date"/>
<s:GridColumn width="180" dataField="itemEndDate"
labelFunction="convertDateFormat" headerText="End Date"/>
<s:GridColumn dataField="notes" headerText="Notes"/>
<s:GridColumn width="100" dataField="colorCode" headerText="Color HEX"/>
</s:ArrayList>
</s:columns>
</s:DataGrid>
It looks like you forgot to call the deleteItem method.
<s:Button label="Remove Selected Items" click="deleteItem(event)"/>
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>
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>
I need your help on following.
I have one datagrid which use an arraylist as a data provider. Now my requirment is in that arraylist i have one statusId as one variable or say property which i display as one of the column in datagrid. now i have another column where i have to display three links like edit, delete and view which will be based on the statusid. can you give me some idea or example
I'm no Flex expert, but usually when you want to customise the appearance of a column in a DataGrid you use an ItemRenderer, as indicated by your tag. Within the item renderer, you could use Label components and set a selection of attributes that make them look like links, and then enable/disable them depending on your condition.
Here's some example code off the top of my head, with the following caveats:
I'm using an MX DataGrid instead of the Spark DataGrid.
I'm using an inline item renderer for convenience, but it is better practice to externalise your item renderers into separate MXML files.
<mx:DataGrid id="dataGrid" dataProvider="{dataProvider}" ...>
<mx:columns>
<mx:DataGridColumn id="status_id_column" dataField="statusId" headerText="Status" />
<mx:DataGridColumn id="action_column">
<mx:itemRenderer>
<fx:Component>
<mx:Label text="View" paddingLeft="10" useHandCursor="true" buttonMode="true" mouseChildren="false" enabled="Your condition goes here" />
<mx:Label text="Edit" paddingLeft="10" useHandCursor="true" buttonMode="true" mouseChildren="false" enabled="Your condition goes here" />
<mx:Label text="Delete" paddingLeft="10" useHandCursor="true" buttonMode="true" mouseChildren="false" enabled="Your condition goes here" />
</fx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
thanks avik for your help it is partially correct as for me there are lot of condition i can not put that in enabled attribute. anyway i got the solution from my side :)
here is the syntax.
<mx:HBox width="100%">
<mx:DataGrid id="reportDataGrid" dataProvider="{reportDataGridArrayCollection}"
variableRowHeight="true" editable="false" rowHeight="75"
width="100%" height="400" allowDragSelection="false"
draggableColumns="false" textAlign="center">
<mx:columns>
<mx:DataGridColumn sortable="false" dataField="reportId" resizable="false" headerText="" width="0.06" editable="false" textAlign="center"/>
<mx:DataGridColumn resizable="false" headerStyleName="centered" textAlign="left" dataField="reportStatusId" headerWordWrap="true" headerText="Status" width="0.21">
</mx:DataGridColumn>
<mx:DataGridColumn resizable="false" headerStyleName="centered" textAlign="left" dataField="lockedByUser" headerWordWrap="true" headerText="Locked (Worked) By" width="0.10"/>
<mx:DataGridColumn resizable="false" headerStyleName="centered" textAlign="left" dataField="" headerWordWrap="true" headerText="Acion" width="0.20">
<mx:itemRenderer>
<fx:Component>
<mx:HBox textAlign="left" width="100%" creationComplete="init1()" >
<fx:Script>
<![CDATA[
public function init1():void {
if(data.reportStatusId==0) {
viewLnk.visible = true;
viewLnk.includeInLayout = true;
// this is my condition which you can ignore.... if((data.entityId==1 || data.entityId==2 || data.entityId==3 || data.entityId==4) ){
editLnk.visible = true;
editLnk.includeInLayout = true;
}
}
if(data.reportStatusId==1
) {
editLnk.visible = true;
editLnk.includeInLayout = true;
}
if(data.reportStatusId==2) {
reviewLnk.visible = true;
reviewLnk.includeInLayout = true;
}
if(data.reportStatusId==3) {
saveXMLLnk.visible = true;
saveXMLLnk.includeInLayout = true;
}
}
]]>
</fx:Script>
<mx:LinkButton id="editLnk" visible="false" includeInLayout="false" label="Edit" click="outerDocument.editReport(data.reportId)"/>
<mx:LinkButton id="viewLnk" visible="false" includeInLayout="false" label="View" click="outerDocument.viewReport(data.reportId)"/>
<mx:LinkButton id="reviewLnk" visible="false" includeInLayout="false" label="Review" click="outerDocument.reviewReport(data.reportId)"/>
<mx:LinkButton id="saveXMLLnk" visible="false" includeInLayout="false" label="Save XML" click="outerDocument.saveXMLReport(data.reportId)"/>
</mx:HBox>
</fx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
</mx:HBox>
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>