I have an editable datagrid with a dataprovider which is basically Numbers. Is it possible to delete a value? When I do it it puts a 0 in that cell but I really need an empty value, like a Null or a NaN whose are going to be cleaned later with a labelFunction. BTW I also need the cells to keep the 0 if needed to. Thank you in advance.
Assign NaN to the value, and create a custom item renderer for your DataGrid:
<?xml version="1.0" encoding="utf-8"?>
<s:GridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
clipAndEnableScrolling="true">
<fx:Script>
<![CDATA[
override public function prepare(hasBeenRecycled:Boolean):void
{
if (isNaN(data[column.dataField]))
lblData.text = "";
else
lblData.text = Number(data[column.dataField]).toFixed(2);
}
]]>
</fx:Script>
<s:Label id="lblData"
top="9"
left="7" />
</s:GridItemRenderer>
Related
I am trying bind an Object property value to a text field. (Well I have taken this as an example ... I have no.of form fields and to be bound by other values)
But when change its value on button click the text field is not getting updated?
Below is the example code,
<?xml version="1.0" encoding="utf-8"?>
<s:Application
minHeight="600"
minWidth="955"
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Declarations>
</fx:Declarations>
<fx:Script>
<![CDATA[
[Bindable]
var currentFormItem:Object = new Object();
public function changeName():void
{
currentFormItem.name = "hello";
}
]]>
</fx:Script>
<s:HGroup>
<s:TextInput id="test"
text="{currentFormItem.name}"/>
<s:Button click="changeName()"/>
</s:HGroup>
Thanks
I got the solution for this. I can just wrap this object in ObjectProxy.
I'm new to flex and recently assigned a project where I need to work on datagrid to make it able to highlight individual or multiple (but adjacent) cells based on the item being dragged from a list. So scenario is like this...
I'm using flex SDK 4.6. I have a mx datagrid (I can't use spark or other version due to some restrictions) with some dates as rows and time (00-23 hrs) in columns( so total 25 columns: 1st column showing dates and rest 24 for hours).
That way we have each date acting as row-header which runs through 24 columns for hours. I have a list which is getting populated from an XML file and each item in the list has a date and time elements associated with it. when we drag an item from the list into datagrid, it should highlight particular cell(s) in the datagrid based on matching dates(from list item being dragged and datagrid dates column) and matching hours (from list item being dragged and datagrid hour columns).
So far I'm able to get the row index and column index/indices on drag enter but getting them highlighted as a whole row-column. for example if it turns out to be 3rd row and 4th-5th column, it highlights whole 3rd row(all 25 columns) and all cells under 4th-5th column. what I need is to get to a specific location like someCell(rowIndex:xx, ColIndex:YY) and change that cell's style. There are some examples with item-renderer but they are using cell's data to find if its less than or greater than some value and then maipulating it, but I couldn't use it in my case.
Secondly I want to replace the scrollbars with two buttons(one at top and another at bottom) of the dates column to scroll the dates. I'll be very thankful for any advise on that too.
Hope I've made the questions/scenario clear. Thanks for having a look into it. Looking forward for a helping hand from the community. This task is on urgent list...please help.
If I have understood your problem coorectly, here is my proposal.
You should be able to give to each cell of the datagrid information about date and time. You can make it through ItemRenderer, which implements IDropInListItemRenderer interface. If user selects any element of your XML List, he defines a certain time point, which should be compared with one of the ItemRenderer.
I hope it will help you.
//CellRenderer.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
width="100%" height="100%"
backgroundColor="{(cellDate == parentDocument.selectedDate && cellHour == parentDocument.selectedHour) ? 0xfcb9bb : 0xfefceb}"
implements="mx.controls.listClasses.IDropInListItemRenderer">
<fx:Script>
<![CDATA[
import mx.controls.dataGridClasses.DataGridListData;
import mx.controls.listClasses.BaseListData;
private var _listData:BaseListData;
[Bindable]private var cellDate:String;
[Bindable]private var cellHour:String;
override public function set data( value:Object ) : void
{
super.data = value;
cellDate = data.date;
cellHour = (listData as DataGridListData).label;
}
[Bindable]public function get listData() : BaseListData
{
return _listData;
}
public function set listData( value:BaseListData ) : void
{
_listData = value;
}
]]>
</fx:Script>
</mx:HBox>
//Application
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
layout="absolute"
minWidth="955" minHeight="600" creationComplete="initApp()" backgroundColor="0xeeeeee">
<fx:Declarations>
<fx:Model id="cells">
<dataset>
<data>
<date>14.01.2013</date>
<h00>00:00</h00>
<h01>01:00</h01>
<h02>02:00</h02>
<h03>03:00</h03>
</data>
<data>
<date>15.01.2013</date>
<h00>00:00</h00>
<h01>01:00</h01>
<h02>02:00</h02>
<h03>03:00</h03>
</data>
<data>
<date>16.01.2013</date>
<h00>00:00</h00>
<h01>01:00</h01>
<h02>02:00</h02>
<h03>03:00</h03>
</data>
<data>
<date>17.01.2013</date>
<h00>00:00</h00>
<h01>01:00</h01>
<h02>02:00</h02>
<h03>03:00</h03>
</data>
</dataset>
</fx:Model>
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.events.DragEvent;
import mx.events.ListEvent;
[Bindable]public var selectedDate:String;
[Bindable]public var selectedHour:String;
private function initApp():void
{
srclist.dataProvider = new ArrayCollection([
{activity: 'Reading', date: '14.01.2013', hour: '01:00'},
{activity: 'Television', date: '15.01.2013', hour: '03:00'},
{activity: 'Movies', date: '16.01.2013', hour: '02:00'}
]);
}
protected function onItemRollOver(event:ListEvent):void
{
var item:Object = (srclist.dataProvider as ArrayCollection).getItemAt(event.rowIndex);
selectedDate = item.date;
selectedHour = item.hour;
}
]]>
</fx:Script>
<mx:HBox x="35" y="28" height="200">
<mx:VBox width="124" height="100%">
<mx:Label text="Available Activities"/>
<mx:List
id="srclist"
labelField="activity"
width="118" height="100%"
allowMultipleSelection="false"
dragEnabled="true"
dragMoveEnabled="true" selectionColor="0xffffff"
itemRollOver="onItemRollOver(event)" itemRollOut="selectedDate = ''; selectedHour = '';"/>
</mx:VBox>
<mx:VBox height="100%">
<mx:Label text="Scheduler"/>
<mx:DataGrid
width="386" height="100%" dataProvider="{cells.data}"
alternatingItemColors="[0xffffff]"
horizontalGridLineColor="0x999999"
horizontalGridLines="true"
verticalGridLineColor="0x999999"
sortableColumns="false"
resizableColumns="false" selectable="false">
<mx:columns>
<mx:DataGridColumn dataField="date" headerText="Data"/>
<mx:DataGridColumn dataField="h00" headerText="00:00" itemRenderer="com.CellRenderer"/>
<mx:DataGridColumn dataField="h01" headerText="01:00" itemRenderer="com.CellRenderer"/>
<mx:DataGridColumn dataField="h02" headerText="02:00" itemRenderer="com.CellRenderer"/>
<mx:DataGridColumn dataField="h03" headerText="03:00" itemRenderer="com.CellRenderer"/>
</mx:columns>
</mx:DataGrid>
</mx:VBox>
</mx:HBox>
</mx:Application>
I have an AdvancedDataGrid (whose dataProvider is a variable being bound from my main mxml file, not sure if this is relevant to my problem ). I'm setting one of the AdvancedDataGridColumn's editable property as true, and when I click on the cell in the UI, it is infact editable. But when I press enter/move to a different cell, the old value returns and the newly entered value is lost. Would anyone have any ideas why that's happening? Do I have to manually change the variable provided in the dataProvider?...I would think that would happen automatically right? I'd appreciate any help!
Thanks.
This traces out correct when I edit a field and press enter then click on the button to see trace output:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" applicationComplete="init()">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.collections.HierarchicalData;
[Bindable]
private var companyHierarchy:HierarchicalData;
private var companyData:XML = <data>
<company name="Employees">
<department name="Unit 1">
<employee name="Dave" func="C# Developer"/>
<employee name="Bob" func="AS3 Developer"/>
<employee name="Clair" func="AS3 Architect"/>
</department>
<department name="Unit 2">
<employee name="John" func="ORACLE Developer"/>
<employee name="Sandra" func="HTML Developer"/>
</department>
</company>
</data>;
private function init():void
{
companyHierarchy = new HierarchicalData(companyData.company);
}
private function checkSetData():void
{
trace(companyData);
}
]]>
</fx:Script>
<mx:AdvancedDataGrid id="test" width="500" height="500" dataProvider="{companyHierarchy}"
displayItemsExpanded="true" editable="true" enabled="true">
<mx:columns>
<mx:AdvancedDataGridColumn dataField="#name"
headerText="Companies"/>
<mx:AdvancedDataGridColumn dataField="#func"
headerText="Function"/>
</mx:columns>
</mx:AdvancedDataGrid>
<s:Button x="205" y="508" label="Button" click="checkSetData()"/>
</s:Application>
I have a custom AdvancedDataGrid and we use alternatingItemColors property which shows two different colors for rows of the AdvancedDataGrid. Now sometimes the datagrid has 15 rows but only 5 would have data and we want only first 5 rows to display alternating colors and rest of the rows should only display one color. Has anyone done this in past and if someone can please explain how to do this would be really appreciated.
Thanks in advance.
You have to override the Datagrid and override drawRowBackground method, if the rowInd is more than the number of rows then set the default color. See the code snippet mentioned given below -
public class CustomDataGrid extends AdvancedDataGrid
{
protected override function drawRowBackground(s:Sprite, rowIndex:int, y:Number, height:Number, color:uint, dataIndex:int):void{
var XMLdata:XML=rowNumberToData(dataIndex) as XML;
if(XMLdata!=null){
if(XMLdata.attribute(Constants.col) != undefined && XMLdata.attribute(Constants.col) != ""){
color=XMLdata.attribute(Constants.col);
}else{
color=0xFFFFFF;
}
}
super.drawRowBackground(s,rowIndex,y,height,color,dataIndex);
}
}
Either set rowCount to the actual row count when you have fewer rows than the height allows for, or override drawRowBackground.
Try by using Item renderer for your ADG: -
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.events.FlexEvent;
[Bindable]
private var dpHierarchy:ArrayCollection= new ArrayCollection([
{name:"A", region: "Arizona"},
{name:"B", region: "Arizona"},
{name:"C", region: "California"},
{name:"D", region: "California"}
]);
]]>
</fx:Script>
<mx:AdvancedDataGrid id="myADG"
width="500" height="500"
paddingBottom="0" paddingLeft="0" paddingRight="0" paddingTop="0"
dataProvider="{dpHierarchy}"
itemRenderer="DrawAlternateRowColor">
<mx:columns>
<mx:AdvancedDataGridColumn dataField="name" headerText="Name" />
<mx:AdvancedDataGridColumn dataField="region" headerText="Region" />
</mx:columns>
</mx:AdvancedDataGrid>
</s:Application>
//ItemRenderer name: - DrawAlternateRowColor -- you can use the same concept with you CADG.
<?xml version="1.0" encoding="utf-8"?>
<s:MXAdvancedDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
focusEnabled="true" alternatingItemColors="[#0000FF, #FF0000]"
width="100%" height="100%">
<s:Label id="lblData" verticalAlign="middle" text="{listData.label}" />
</s:MXAdvancedDataGridItemRenderer>
I have a Flex UI and want the numeric stepper to add a preceeding '0' to the displayed value if it's between 0 and 9, so that it's always 2 digits. How do I do this?
Use the valueFormatFunction of the NumericStepper:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Script>
<![CDATA[
protected function formatNumber(value:Number):String
{
if (value < 10)
return '0' + value;
return value.toString();
}
]]>
</fx:Script>
<s:NumericStepper valueFormatFunction="formatNumber"
minimum="0"
maximum="100" />
</s:Application>