Flex Spark DataGrid BUG skipping rows on refresh

I have a small one file example that demonstrates this Flex DataGrid bug.
I tried to report it to Flex bugs and the page timed out.
I am filling a column in a spark datagrid with checkboxes to select that row.
In the header of that column is a checkbox to select ALL the rows.
However, the middle row is not getting refreshed so the display is wrong.
The checkbox looks empty when the backing value is correct.
I have added a print to the code that sets the values in the data and it is setting everyone.
But when I print the isSelected code it is NOT being called on ONE (the middle) visible row.
If I move away or scroll up and down the check box shows the check mark.
So My only conclusion is that refresh has a bug.
Here is the example that demonstrates the problem.
Simply select the header checkbox and the 3rd checkbox does not get updated on refresh.
<?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:Script>
                    <![CDATA[
                              import mx.collections.ArrayCollection;
                              private static var values:Array = [
                                        {selected: false, position: 1},
                                        {selected: false, position: 2},
                                        {selected: false, position: 3},
                                        {selected: false, position: 4},
                                        {selected: false, position: 5}
                              [Bindable]
                              public static var datalist:ArrayCollection = new ArrayCollection( values );
                              public static function updateDataList( value:Boolean ):void
                                        for each( var item:Object in datalist ) {
                                                  trace( "updated: " + item.position );
                                                  item.selected = value;
                                        datalist.refresh();
                    ]]>
          </fx:Script>
          <s:DataGrid dataProvider="{datalist}">
                    <s:columns>
                              <s:ArrayList>
                                        <s:GridColumn dataField="position" width="200"/>
                                        <s:GridColumn width="34" >
                                                  <s:itemRenderer>
                                                            <fx:Component>
                                                                      <s:GridItemRenderer textAlign="center">
                                                                                <fx:Script>
                                                                                          <![CDATA[
                                                                                                    private function changeSelection( data:Object, event:MouseEvent ):void
                                                                                                              data.selected = ! data.selected;
                                                                                                    private function isSelected( data:Object ):Boolean
                                                                                                              trace( "isSelected: " + data.position );
                                                                                                              return data.selected;
                                                                                          ]]>
                                                                                </fx:Script>
                                                                                <s:layout>
                                                                                          <s:HorizontalLayout horizontalAlign="center" verticalAlign="middle"/>
                                                                                </s:layout>
                                                                                <s:CheckBox id="selbox" label="" selected="{isSelected(data)}"
                                                                                                              click="changeSelection(data, event)"/>
                                                                      </s:GridItemRenderer>
                                                            </fx:Component>
                                                  </s:itemRenderer>
                                                  <s:headerRenderer>
                                                            <fx:Component>
                                                                      <s:GridItemRenderer height="30">
                                                                                <fx:Script>
                                                                                          <![CDATA[
                                                                                                    [Bindable]
                                                                                                    private static var selectAll:Boolean = false;
                                                                                                    private function changeAllSelection( event:MouseEvent ):void
                                                                                                              selectAll = ! selectAll;
                                                                                                              Main.updateDataList( selectAll );
                                                                                          ]]>
                                                                                </fx:Script>
                                                                                <s:layout>
                                                                                          <s:VerticalLayout horizontalAlign="center" verticalAlign="middle"/>
                                                                                </s:layout>
                                                                                <s:CheckBox label="" selected="{selectAll}"
                                                                                                              click="changeAllSelection(event)"/ >
                                                                      </s:GridItemRenderer>
                                                            </fx:Component>
                                                  </s:headerRenderer>
                                        </s:GridColumn>
                              </s:ArrayList>
                    </s:columns>
          </s:DataGrid>
</s:Application>
Here is an image of the failed result... after selecting the top checkbox.
Below is an image of the output produced by the two traces.
Notice that the refresh has not called isSelected on the 3rd element.

Similar Messages

Flex spark dataGrid gridColumn itemrenderer binding bug

I hava a TextInput within mx DataGrid gridColumn itemrenderer and binding its text to {data.f1} ,
when I set DataGrid dataProvider column (0,0) to "value1" by actionsript code,
it will update "value1" to TextInput field.
But if I change to spark DataGrid, TextInput Text won't be changed.
Please see below two samples, when user click "set var" button, it set dataProvider column (0,0) to "value1",
sample1 is in mx comopent, it works fine and will update "value1" to TextInput Text.
sample2 is in spark component, it did not work.
anyone can help for spark component ?
many thanks.
*** sample1 (mx componet): ***
<?xml version="1.0" encoding="utf-8"?>
<mx: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"
layout="absolute">
<mx:Button x="235" y="52" label="set var" click="setVar()"/>
<mx:DataGrid id="grid_1" dataProvider="{ia_row}" x="25" y="52">
<mx:columns>
   <mx:DataGridColumn dataField="f1" headerText="Column 1">
    <mx:itemRenderer>
     <fx:Component>
      <mx:TextInput text="{data.f1}" width="95%"/>
        </fx:Component>
    </mx:itemRenderer>
   </mx:DataGridColumn>
   <mx:DataGridColumn dataField="f2" headerText="Column 2"></mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
<fx:Script>
<![CDATA[
   import mx.collections.ArrayCollection;
   import mx.events.FlexEvent;
   [Bindable]
   private var ia_row:ArrayCollection = new ArrayCollection([
    {f1:"a1", f2:"b1"},
    {f1:"a2", f2:"b2"}
   private function setVar():void{
    var t_row:Object = ia_row.getItemAt(0);
    t_row.f1 = "value1";
    ia_row.setItemAt(t_row, 0);
]]>
</fx:Script>
</mx:Application>
*** sample2 (spark componet): ***
<?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"
>
<s:Button x="267" y="94" label="set var" click="setVar()"/>
<s:DataGrid id="grid_1" x="55" y="94" width="204" height="139" dataProvider="{ia_row}">
<s:columns>
   <s:ArrayList>
    <s:GridColumn dataField="f1" headerText="Column 1" width="120">
     <s:itemRenderer>
      <fx:Component>
       <s:GridItemRenderer>
        <s:TextInput text="{data.f1}" width="95%"/>
         </s:GridItemRenderer>
      </fx:Component>
     </s:itemRenderer>
    </s:GridColumn>
    <s:GridColumn dataField="f2" headerText="Column 2"></s:GridColumn>
   </s:ArrayList>
</s:columns>
</s:DataGrid>
<fx:Script>
<![CDATA[
   import mx.collections.ArrayCollection;
   import mx.events.FlexEvent;
   [Bindable]
   private var ia_row:ArrayCollection = new ArrayCollection([
    {f1:"a1", f2:"b1"},
    {f1:"a2", f2:"b2"}
   private function setVar():void{
    var t_row:Object = ia_row.getItemAt(0);
    t_row.f1 = "value1";
    ia_row.setItemAt(t_row, 0);
]]>
</fx:Script>
</s:Application>

sir, I think it does not send CHANGE event to dataGrid, so my suggestion is following:
private function setVar():void{
    var t_row:Object = ia_row.getItemAt(0);
    Alert.show(t_row.f1);
    t_row.f1 = "value1";
    ia_row.setItemAt(t_row, 0);
    ia_row.refresh();//it is used to dispatch Event if dataprovider was changed.

Spark datagrid style by row

I'm trying to change the style of spark datagrid rows based on data, I've found examples about itemrenderer and columns, but they doesn't fit in this case.
I'm looking for a method to change font (weight, size, color) and background based on data value: if the data in column X is equal to Y, change all the row style to...

So, are you saying you want to change the font of a particular row when its data object is a certain value?
I would have a custom renderer with an overridden prepare method. In the prepare method, you can check the data and adjust the labelDisplay accordingly.

Flex Spark Datagrid - Scalable (font size) with No scroll Bars

I was wondering what would be the most optimized way to scale (increase/decrease) the fonts size in a Spark DataGrid with NO Scroller, so as to make it when the User Resizes the DataGrid, the Fonts inside the Grid would increase/decrease.
Is there a way to listen for the size change of the DataGrid?
I would probably need to change the font size to increase/decrease as the event gets fired on Datagrid Resize.
Any suggestions?

I've pasted as much code as I can legally can. What i would like to achieve is that when the the window resizes, the Content & the DataGrid Scales. I am also aware of scalemode on the VBox, though it scale oddly with width more than height (this is internal).
Else, I tried:
protected function vgroup1_addedToStageHandler(event:Event):void
            //stage.scaleMode = StageScaleMode.EXACT_FIT;
            stage.scaleMode = StageScaleMode.SHOW_ALL;
            stage.align = StageAlign.TOP_LEFT;
            scaleX = .5;
            scaleY = .5;
            /* if(stage.stageWidth != (event.currentTarget as VGroup).width || stage.stageHeight != (event.currentTarget as VGroup).height)
                var scaling:Number = 1;
                if(width>height)
                    scaling = stage.stageWidth / (event.currentTarget as VGroup).width;
                else
                    scaling = stage.stageHeight / (event.currentTarget as VGroup).height;
                scaleX = scaleY = scaling;
== THIS IS All I can Post ==
<?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"
    xmlns:components="components.*"
     viewSourceURL="srcview/index.html">
    <fx:Script>
    <![CDATA[
        import mx.events.FlexEvent;
        import mx.events.ResizeEvent;
        import mx.rpc.events.ResultEvent;
        import mx.rpc.xml.SimpleXMLDecoder;
        import mx.utils.ArrayUtil;
        import mx.utils.ObjectUtil;
        import spark.components.ResizeMode;
        import spark.effects.Resize;
        // Skin Colors
        private const ALTERNATING_GRID_COLOR:Array = [ 0xF5F5F0 , 0xE7E4E9 ];
        private const ROLL_OVER_COLOR:int = 0x6D9960;
        private const SELECTION_COLOR:int = 0x668F59;
        private const TEXT_FONT_SIZE:int = 11;
        private const TEXT_COLOR:int = 0x080808;
        private const SUMMARY_TEXT_COLOR:int = 0xFAAFFF;
        // First column width
        private var collectiveFirstColumnWidth:int = 160;
        private var collectiveValuesColumnWidth:int = 50;
        // XML data
        [Bindable] private var portfolioSummary1:XMLList;
        [Bindable] private var reconstructedAC:ArrayCollection;
        private function convertXmlToArrayCollection(file:String):ArrayCollection {
            var xml:XMLDocument = new XMLDocument(file);
            var decoder:SimpleXMLDecoder = new SimpleXMLDecoder();
            var data:Object = decoder.decodeXML(xml);
            var array:Array = ArrayUtil.toArray(data);
            return new ArrayCollection(array);
        private function convertToAC():void {
            var ac1:ArrayCollection = convertXmlToArrayCollection(psr1)
            trace(ObjectUtil.toString(ac1));
            //reStructureAC(ac1);
        private function restructureXMLIntoHierarchicalAC():void {
        private function addProperty(obj:Object, attribute:String, value:String):Object {
            var o:Object = obj;
            o[attribute] = value;
            return o;
        protected function httpservice1_resultHandler(event:ResultEvent):void
            portfolioSummary1 = event.result.Analytics.Side.Analytic as XMLList;
            trace('-----\nSide: Sell' + ObjectUtil.toString(event.result.Analytics.Side.(@name=='Sell')));
            trace('-----\nSide: Buy: Analytic Values : \n' + ObjectUtil.toString(event.result.Analytics.Side.(@name=='Buy').Analytic.@value));
            //dg.dataProvider = new XMLListCollection(portfolioSummary1);
            //dg.requestedRowCount = dg.dataProviderLength;
        protected function vgroup1_addedToStageHandler(event:Event):void
            //stage.scaleMode = StageScaleMode.EXACT_FIT;
            stage.scaleMode = StageScaleMode.SHOW_ALL;
            stage.align = StageAlign.TOP_LEFT;
            scaleX = .5;
            scaleY = .5;
            /* if(stage.stageWidth != (event.currentTarget as VGroup).width || stage.stageHeight != (event.currentTarget as VGroup).height)
                var scaling:Number = 1;
                if(width>height)
                    scaling = stage.stageWidth / (event.currentTarget as VGroup).width;
                else
                    scaling = stage.stageHeight / (event.currentTarget as VGroup).height;
                scaleX = scaleY = scaling;
        protected function vgroup1_resizeHandler(event:ResizeEvent):void
            (event.currentTarget as VGroup).resizeMode = ResizeMode.SCALE;
    ]]>
    </fx:Script>
    <fx:Declarations>
        <fx:XML id="psr1" source="data/PortfolioSummaryResponse1.xml" />
        <fx:XML id="psr2" source="data/PortfolioSummaryResponse2.xml" />
        <fx:XML id="psr3" source="data/PortfolioSummaryResponse3.xml" />
        <s:XMLListCollection id="headXMLListCol"
            source="{psr1.children()}" />
        <s:HTTPService id="portfolio_HS" result="httpservice1_resultHandler(event)"
            resultFormat="e4x" url="data/PortfolioSummaryResponse1.xml" />
    </fx:Declarations>
    <s:VGroup id="vbox" width="100%" height="100%" top="0" left="0" bottom="0" gap="0" addedToStage="vgroup1_addedToStageHandler(event)">
        
        <components:ExpandableDataGrid5 id="dg"
            color="{TEXT_COLOR}"
            rollOverColor="{ROLL_OVER_COLOR}"
            alternatingRowColors="{ALTERNATING_GRID_COLOR}"
            selectionColor="{SELECTION_COLOR}"
            skinClass="skins.ResizableDataGridSkin"
            >
            <components:columns>
                <s:ArrayList>
                    <s:GridColumn id="field1" dataField="dataField1" headerText="Portfolio Summary"
                        itemRenderer="itemRenderers.LeftAlignGridItemRenderer"
                        headerRenderer="itemRenderers.HeaderGridItemRenderer"
                        />
                    <s:GridColumn id="field2" dataField="dataField2" headerText="Buy"
                        itemRenderer="itemRenderers.RightAlignGridItemRenderer"
                        headerRenderer="itemRenderers.RightAlignHeaderGridItemRenderer"
                        />
                    <s:GridColumn id="field3" dataField="dataField3" headerText="Sell"
                        itemRenderer="itemRenderers.RightAlignGridItemRenderer"
                        headerRenderer="itemRenderers.RightAlignHeaderGridItemRenderer"
                        />
                    <s:GridColumn id="field4" dataField="dataField4" headerText="Total"
                        itemRenderer="itemRenderers.RightAlignGridItemRenderer"
                        headerRenderer="itemRenderers.RightAlignHeaderGridItemRenderer"
                        />
                </s:ArrayList>
            </components:columns>
            <components:dataProvider>
                <s:ArrayCollection>
                    <fx:Object dataField1="data1" dataField2="data2" dataField3="data2" dataField4="data16"></fx:Object>
                    <fx:Object dataField1="data2" dataField2="data3" dataField3="data3" dataField4="data17"></fx:Object>
                    <fx:Object dataField1="data3" dataField2="data2" dataField3="data2" dataField4="data16"></fx:Object>
                    <fx:Object dataField1="data4" dataField2="data3" dataField3="data3" dataField4="data17"></fx:Object>
                    <fx:Object dataField1="data5" dataField2="data2" dataField3="data2" dataField4="data16"></fx:Object>
                    <fx:Object dataField1="data6" dataField2="data3" dataField3="data3" dataField4="data17"></fx:Object>
                    <fx:Object dataField1="data7" dataField2="data2" dataField3="data2" dataField4="data16"></fx:Object>
                    <fx:Object dataField1="data8" dataField2="data3" dataField3="data3" dataField4="data17"></fx:Object>
                    <fx:Object dataField1="data9" dataField2="data2" dataField3="data2" dataField4="data16"></fx:Object>
                    <fx:Object dataField1="data10" dataField2="data3" dataField3="data3" dataField4="data17"></fx:Object>
                    <fx:Object dataField1="data11" dataField2="data2" dataField3="data2" dataField4="data16"></fx:Object>
                    <fx:Object dataField1="data12" dataField2="data3" dataField3="data3" dataField4="data17"></fx:Object>
                    <fx:Object dataField1="data13" dataField2="data3" dataField3="data3" dataField4="data17"></fx:Object>
                    <fx:Object dataField1="data14" dataField2="data3" dataField3="data3" dataField4="data17"></fx:Object>
                    <fx:Object dataField1="data15" dataField2="data3" dataField3="data3" dataField4="data17"></fx:Object>
                </s:ArrayCollection>
            </components:dataProvider>
        </components:ExpandableDataGrid5>
        
        <components:SummaryRow >
            <s:Label text="Summary Totals" fontWeight="bold" color="{SUMMARY_TEXT_COLOR}"/>
            <s:Spacer width="100%" />
            <s:ButtonBar click="convertToAC()">
                <mx:ArrayCollection>
                    <fx:String>Convert to AC</fx:String>
                    <fx:String>CPS</fx:String>
                </mx:ArrayCollection>
            </s:ButtonBar>
            <s:ButtonBar click="restructureXMLIntoHierarchicalAC()">
                <mx:ArrayCollection>
                    <fx:String>Parse XML</fx:String>
                    <fx:String>15% POV</fx:String>
                </mx:ArrayCollection>
            </s:ButtonBar>
        </components:SummaryRow>
        
        <components:ExpandableDataGrid5 id="dg2"
            color="{TEXT_COLOR}"
            rollOverColor="{ROLL_OVER_COLOR}"
            selectionColor="{SELECTION_COLOR}"
            alternatingRowColors="{ALTERNATING_GRID_COLOR}"
            skinClass="skins.HeadlessDataGridSkin"
            >
            <components:columns>
                <s:ArrayList>
                    <s:GridColumn dataField="dataField1"
                        itemRenderer="itemRenderers.LeftAlignGridItemRenderer"
                        />
                    <s:GridColumn dataField="dataField2"
                        itemRenderer="itemRenderers.RightAlignGridItemRenderer"
                        />
                    <s:GridColumn dataField="dataField3"
                        itemRenderer="itemRenderers.RightAlignGridItemRenderer"
                        />
                    <s:GridColumn dataField="dataField4"
                        itemRenderer="itemRenderers.RightAlignGridItemRenderer"
                        />
                </s:ArrayList>
            </components:columns>
            <s:ArrayList>
                <fx:Object dataField1="data16" dataField2="data2" dataField3="data2" dataField4="data16"></fx:Object>
                <fx:Object dataField1="data17" dataField2="data3" dataField3="data3" dataField4="data17"></fx:Object>
            </s:ArrayList>
        </components:ExpandableDataGrid5>
        
        <components:SummaryRow>
            <s:Label text="Summary Totals - Values" width="100%" fontWeight="bold" color="{SUMMARY_TEXT_COLOR}"/>
        </components:SummaryRow>
        
        <components:ExpandableDataGrid5 id="dg3"
            color="{TEXT_COLOR}"
            rollOverColor="{ROLL_OVER_COLOR}"
            selectionColor="{SELECTION_COLOR}"
            alternatingRowColors="{ALTERNATING_GRID_COLOR}"
            skinClass="skins.HeadlessDataGridSkin"
            >
            <components:columns>
                <s:ArrayList>
                    <s:GridColumn dataField="dataField1"
                        itemRenderer="itemRenderers.LeftAlignGridItemRenderer"
                        />
                    <s:GridColumn dataField="dataField2"
                        itemRenderer="itemRenderers.ToolTipItemRenderer"
                        />
                    <s:GridColumn dataField="dataField3"
                        itemRenderer="itemRenderers.ToolTipItemRenderer"
                        />
                    <s:GridColumn dataField="dataField4"
                        itemRenderer="itemRenderers.ToolTipItemRenderer"
                        />
                </s:ArrayList>
            </components:columns>
            <s:ArrayList>
                <fx:Object dataField1="data18" dataField2="data2" dataField3="data3" dataField4="data16"></fx:Object>
                <fx:Object dataField1="data19" dataField2="data3" dataField3="data3" dataField4="data17"></fx:Object>
            </s:ArrayList>
        </components:ExpandableDataGrid5>
        
        <components:SummaryRow>
            <s:Label text="Percent of Tops" color="{SUMMARY_TEXT_COLOR}" width="100%" fontWeight="bold"/>
        </components:SummaryRow>
        
        <components:ExpandableDataGrid5 id="dg4"
            color="{TEXT_COLOR}"
            rollOverColor="{ROLL_OVER_COLOR}"
            selectionColor="{SELECTION_COLOR}"
            alternatingRowColors="{ALTERNATING_GRID_COLOR}"
            skinClass="skins.HeadlessDataGridSkin"
            >
            <components:columns>
                <s:ArrayList>
                    <s:GridColumn dataField="dataField1"
                        itemRenderer="itemRenderers.LeftAlignGridItemRenderer" />
                    <s:GridColumn dataField="dataField2"
                        itemRenderer="itemRenderers.RightAlignGridItemRenderer"
                        />
                    <s:GridColumn dataField="dataField3"
                        itemRenderer="itemRenderers.RightAlignGridItemRenderer"
                        />
                    <s:GridColumn dataField="dataField4"
                        itemRenderer="itemRenderers.RightAlignGridItemRenderer"
                        />
                </s:ArrayList>
            </components:columns>
            <s:ArrayList>
                <fx:Object dataField1="data20" dataField2="data1" dataField3="data1" dataField4="data20"></fx:Object>
                <fx:Object dataField1="data21" dataField2="data2" dataField3="data2" dataField4="data21"></fx:Object>
                <fx:Object dataField1="data22" dataField2="data3" dataField3="data3" dataField4="data22"></fx:Object>
            </s:ArrayList>
        </components:ExpandableDataGrid5>
    </s:VGroup>
</s:Application>
ExpandableDataGrid5.mxml
<?xml version="1.0" encoding="utf-8"?>
<s:DataGrid xmlns:fx="http://ns.adobe.com/mxml/2009"
            xmlns:s="library://ns.adobe.com/flex/spark"
            xmlns:mx="library://ns.adobe.com/flex/mx"
            horizontalScrollPolicy="off"
            verticalScrollPolicy="off"
            selectionMode="singleCell"
            variableRowHeight="true"
            requestedColumnCount="4"
            width="100%"
            resizableColumns="false"
            creationComplete="thisDatagrid_creationCompleteHandler(event)"
            >
    <fx:Script>
        <![CDATA[
             import mx.events.FlexEvent;
            /*import mx.events.ResizeEvent;
            [Bindable] private var oldWidth:int;
            [Bindable] private var oldHeight:int;
            protected function thisDatagrid_resizeHandler(event:ResizeEvent):void
                oldWidth = event.oldWidth;
                oldHeight = event.oldHeight;
                this.invalidateDisplayList();
            override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
                if (oldWidth < width) {
                    setStyle('fontSize', getStyle('fontSize') + 0.5); // might wanna~ width % height to increase by a certain pt
                    //this.scaleX += .1;
                } else if (oldWidth > width) {
                    setStyle('fontSize', getStyle('fontSize') - 0.5);
                    //this.scaleX -= .1;
                trace('unscaledWidth: ' + unscaledWidth);
                trace('unscaledHeight: ' + unscaledHeight);
                trace('explicitMinHeight: ' + explicitMinHeight);
                trace('explicitMinWidth: ' + explicitMinWidth);
                minHeight = measuredMinHeight;
                super.updateDisplayList(unscaledWidth, unscaledHeight);
            protected function thisDatagrid_creationCompleteHandler(event:FlexEvent):void
                requestedRowCount = dataProviderLength;
                requestedMaxRowCount = dataProviderLength;
                requestedMinRowCount = dataProviderLength;
                minHeight = measuredHeight;
            /* protected function datagrid1_addedToStageHandler(event:Event):void
                stage.scaleMode = StageScaleMode.SHOW_ALL;
                /*                stage.align = StageAlign.TOP;
                 this.width = stage.stageWidth;
                this.height = stage.stageHeight;
        ]]>
    </fx:Script>
</s:DataGrid>
You can Check other ExpandableDataGrids:
<?xml version="1.0" encoding="utf-8"?>
<s:DataGrid xmlns:fx="http://ns.adobe.com/mxml/2009"
            xmlns:s="library://ns.adobe.com/flex/spark"
            xmlns:mx="library://ns.adobe.com/flex/mx"
            resize="thisDatagrid_resizeHandler(event)"
            creationComplete="thisDatagrid_creationCompleteHandler(event)"
            horizontalScrollPolicy="off" verticalScrollPolicy="off"
            selectionMode="singleCell"
            variableRowHeight="true"
            requestedColumnCount="4"
            editable="false"
            width="100%"
            >
    <fx:Script>
        <![CDATA[
            import mx.events.FlexEvent;
            import mx.events.ResizeEvent;
            protected function thisDatagrid_resizeHandler(event:ResizeEvent):void
                //event.stopImmediatePropagation();
                if (event.oldWidth < width) {
                    setStyle('fontSize', getStyle('fontSize') + 0.5); // might wanna~ width % height to increase by a certain pt
                    //this.scaleX += .1;
                } else if (event.oldWidth > width) {
                    setStyle('fontSize', getStyle('fontSize') - 0.5);
                    //this.scaleX -= .1;
                minWidth = measuredMinWidth;
            protected function thisDatagrid_creationCompleteHandler(event:FlexEvent):void
                requestedRowCount = dataProviderLength;
                requestedMaxRowCount = dataProviderLength;
                requestedMinRowCount = dataProviderLength;
                minHeight = measuredMinHeight;
        ]]>
    </fx:Script>
</s:DataGrid>
OR
<?xml version="1.0" encoding="utf-8"?>
<s:DataGrid xmlns:fx="http://ns.adobe.com/mxml/2009"
            xmlns:s="library://ns.adobe.com/flex/spark"
            xmlns:mx="library://ns.adobe.com/flex/mx"
            horizontalScrollPolicy="off"
            verticalScrollPolicy="off"
            selectionMode="singleCell"
            variableRowHeight="true"
            requestedColumnCount="4"
            width="100%"
            resize="thisDatagrid_resizeHandler(event)"
            creationComplete="thisDatagrid_creationCompleteHandler(event)"
            >
    <fx:Script>
        <![CDATA[
             import mx.events.FlexEvent;
             import mx.events.ResizeEvent;
            [Bindable] private var oldWidth:int;
            [Bindable] private var oldHeight:int;
            protected function thisDatagrid_resizeHandler(event:ResizeEvent):void
                oldWidth = event.oldWidth;
                oldHeight = event.oldHeight;
                this.invalidateDisplayList();
            override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
                if (oldWidth < width) {
                    setStyle('fontSize', getStyle('fontSize') + 0.5); // might wanna~ width % height to increase by a certain pt
                    //this.scaleX += .1;
                } else if (oldWidth > width) {
                    setStyle('fontSize', getStyle('fontSize') - 0.5);
                    //this.scaleX -= .1;
                trace('unscaledWidth: ' + unscaledWidth);
                trace('unscaledHeight: ' + unscaledHeight);
                trace('explicitMinHeight: ' + explicitMinHeight);
                trace('explicitMinWidth: ' + explicitMinWidth);
                minHeight = measuredMinHeight;
                super.updateDisplayList(unscaledWidth, unscaledHeight);
            protected function thisDatagrid_creationCompleteHandler(event:FlexEvent):void
                requestedRowCount = dataProviderLength;
                requestedMaxRowCount = dataProviderLength;
                requestedMinRowCount = dataProviderLength;
                minHeight = measuredHeight;
        ]]>
    </fx:Script>
</s:DataGrid>

Spark Datagrid - Show all rows using requestedRowCount & variableRowHeight=true

I have a Spark Datagrid that has variableRowHeight=true. I also have the requestedRowCount set to the length of the dataProvider. So, in theory the rows shown should be the same number in the dataprovider(Arraycollection). However, the problem is that due to having variableRowHeight=true and some rows being multiline, in some instances, all of the rows are not getting shown.
Suggestions on how I can fix this issue?
Thanks, in advance.

Does anyone have a solution for this? I have exactly the same problem.
Datagrid with requestedRowCount="-1" and variableRowHeight="true"
No issue with autoexpanding the grid - and no issue with autoexpanding the row height with word-wrapped text.
But when combined - a grid that has 5 elements in dataprovider will only show 3 - if one row has been expanded to handle the word-wrapped data.
Is it possible to count the rowheights and override the measure function with minheight or measuredminheight?
Or do I need to call something other than invalidateDisplayList after dataprovider changes?
Any suggestions or sample code would be welcomed.

Spark datagrid not behaving properly (maybe states bug)

I am using this as the renderer in my Spark datagrid, however the modified state is getting set when I hover over the row. I've set breakpoints in the set data funtion to see if this is being called, but it is not,
the code currentState = "modified"; is being called out side of the set data function but I have not written that code anywhere !!!
<?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"
                 currentState="unmodified">
    <fx:Script>
        <![CDATA[
            override public function set data(value:Object):void
                super.data = value;
                if(data){
                    if(this.data.isModifiedClientSide){
                        currentState = "modified";
                    else{
                        currentState = "unmodified";
        ]]>
    </fx:Script>
    <s:states>
        <s:State name="modified"/>
        <s:State name="unmodified"/>
    </s:states>
    <s:Rect top="0" left="0" right="0" bottom="0">
        <s:fill><s:SolidColor color.modified="0xddddff" color="0xFFffff" /></s:fill>
    </s:Rect>
    <s:Rect left="1" top="1" right="0" bottom="0" includeIn="modified">
        <s:stroke >
        <s:SolidColorStroke color="0x000099" weight="1">
        </s:SolidColorStroke>
        </s:stroke>
    </s:Rect>
    <s:VGroup horizontalAlign="center" verticalAlign="middle" top="0" left="0" right="0" bottom="0">
        <s:Label text="{data.margin}">
        </s:Label>
    </s:VGroup>
</s:GridItemRenderer>

Thanks for the reply CodeMata!
I'm trying to manage the view transitions (whether it slides left or right) based on the current view and which button is pressed. The below code snippet is the handler for a button who's id is "transactionsButton", and corresponds to the transaction view. There are three buttons total, the layout is as follows:
| processTransactionButton | transactionsButton | settingsButton |
When the user is in the ProcessTransaction view and clicks on the transactionsButton I want it to slide left, but if they are at the Settings view I want it to slide right.
Here is the handler for the transactionsButton (the commented out line is where I'm having trouble!!!):
protected function transactionsButtonHandler():void
     if (!(navigator.activeView is views.Transactions))
          if (navigator.activeView is views.ProcessTransaction) {navigator.pushView(views.Transactions);}
          else if (navigator.activeView is views.Settings)
               navigator.popView();
               //navigator.pushView(views.Transactions, null, SlideViewTransition("right"));
               navigator.pushView(views.Transactions);

Spark DataGrid row padding

Hello guys,
Could someone advise how to control top/bottom padding of rows in the Spark DataGrid control?
I need to "squeeze" the rows a bit. I use the default item renderer.
Thanks in Advance!
Regards,
Dinko

Hi Dinko,
There are two ways to accomplish this:
1) Use a custom GridItemRenderer with a Label and adjust the padding that way. Note that this will be less performant when compared to the default renderer. For example:
<s:DataGrid>
    <s:itemRenderer>
        <fx:Component>
            <s:GridItemRenderer clipAndEnableScrolling="true">
                <s:Label text="{label}" left="5" right="5" top="2" bottom="2" />
            </s:GridItemRenderer>
        </fx:Component>
    </s:itemRenderer>
</s:DataGrid>
2) Make your own version of DefaultGridItemRenderer and adjust the LEFT_PADDING, RIGHT_PADDING, TOP_PADDING, and BOTTOM_PADDING constants to what you would like them to be. This is slightly more complicated because you will need copy, paste, and clean up a lot of code. However, I did some of the work for you in the attachment (CustomDefaultGridItemRenderer.as). You just need to change the package, specify it as the item renderer on your DataGrid and change the padding values. Also, there's a bug for this here: https://bugs.adobe.com/jira/browse/SDK-28411.
I would go with number 1 for ease of use. The performance degradation shouldn't be too much for most use cases. Hope this helps.
-Kevin

Spark DataGrid Issue

I'm working with the new Spark DataGrid, and I understand it's still a work in progress. I've also created a bug in the Adobe bug system. However, I want to be sure that I'm not overlooking something.
Here is an example that illustrates the issue. If I create an itemRenderer for a column in a dDtaGrid, it takes 2 clicks to trigger the click event and 3 clicks to trigger the doubleClick event, if you click on the column with the itemRenderer. This happens about 95% of the time. Occasionally, it works as expected, but that's a rarity. So the question is, am I doing something wrong in the use of itemRenderers.
<?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>

</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.controls.Alert;
]]>
</fx:Script>
<s:DataGrid x="33" y="57" requestedRowCount="4" textAlign="center" click="Alert.show('Clicked')">
<s:columns>
<s:ArrayList>
<s:GridColumn dataField="dataField1" headerText="Name" width="75">
<s:itemRenderer>
<fx:Component>
<s:GridItemRenderer>
<s:Label text="{data.dataField1}" left="5" paddingTop="10" paddingBottom="5"/>
</s:GridItemRenderer>
</fx:Component>
</s:itemRenderer>
</s:GridColumn>
<s:GridColumn dataField="dataField2" headerText="Column2" width="75"/>
<s:GridColumn dataField="dataField3" headerText="Column3" width="75"/>
</s:ArrayList>
</s:columns>
<s:ArrayList>
<fx:Object dataField1="John" dataField2="data1" dataField3="data1"></fx:Object>
<fx:Object dataField1="Ryan" dataField2="data2" dataField3="data2"></fx:Object>
<fx:Object dataField1="Kyle" dataField2="data3" dataField3="data3"></fx:Object>
<fx:Object dataField1="Edward" dataField2="data4" dataField3="data4"></fx:Object>
</s:ArrayList>
</s:DataGrid></s:Application>

I have approximately the same problem : I want to listen double click (doubleClick or gridDoubleClick) on a spark datagrid.
The double click event is always dispatched when I double-click on a column whose item renderer is a textArea (even with doubleClickEnabled=false).
The double click event is SOMETIMES dispatched when I double-click on a column whose item renderer is an image or a label :
1. When I double-click for the first time on the label renderer : it gives focus to datagrid and select item but does not dispatch doubleClick
2. When I double-click on the textArea colum, then on the Label column of the same row, doubleClick is well dispatched
3. When I double-click on the textArea colum, then on the Label column of a different row, doubleClick is not dispatched
4. when I double-click on the label column after double-clicking on another row in the Label column, doubleClick is well dispatched
I think it's the same behaviour with simple click event.
Do you think spark datagrid is not stable enough and we should use mx datagrid instead ?
Here is the code :
<s:DataGrid dataProvider="{arrayCollection}" doubleClickEnabled="true" doubleClick="trace(event)" gridDoubleClick="trace(event)">
        <s:columns>
            <s:ArrayList>
                <s:GridColumn>
                    <s:itemRenderer>
                        <fx:Component>
                            <s:GridItemRenderer>
                                <s:Label text="{data.label}"/>
                            </s:GridItemRenderer>
                        </fx:Component>
                    </s:itemRenderer>
                </s:GridColumn>
                <s:GridColumn>
                    <s:itemRenderer>
                        <fx:Component>
                            <s:GridItemRenderer>
                                <s:TextArea text="{data.label}"/>
                            </s:GridItemRenderer>
                        </fx:Component>
                    </s:itemRenderer>
                </s:GridColumn>
            </s:ArrayList>
        </s:columns>
    </s:DataGrid>

Spark datagrid - custom renderers

In my Spark DG I have a column that serves a purpose of starting and ending an editing session. I use a custom item renderer with a button that when I click on it initiates editing and gets its icon changed.
When I click on the same button in another row I want to end editing in the first row and flip its button back to original. I am using states for that.
Everything seems to be working except when I start editing in row #1 from the top and then click on a button in any other row the button in the first row does not change its icon.
It has been already days of work trying figuring out what is so special in the row #1. No luck. Please help.
Thank you.

I am implementing the datagrid that only redraws and refreshed the cells that are updated insted of refreshing the whole datagrid.
There is already and example on MX Datagrid which refreshed only particular cells. Here is the link http://blogs.adobe.com/tomsugden/2010/04/optimizing_the_flex_datagrid_f.html . we can test it by launching application, right click on the application and select "Show redraw regions"
I have the similar requirement (updating only the refreshed cells, insted of whole datagrid) but I want this feature in Spark Datagrid.
(similar one on spark is in this link http://hansmuller-flex.blogspot.com/2011/07/high-performance-christmas-tree.html)
I am using the prepare method, but still the functionality is not working. When I right click and select show redraw regions. The whole daatgrid is redrawn instead of particular cells.
override public function prepare(hasBeenRecycled:Boolean):void {

Spark DataGrid Embedded Font Quandary

01. In everything that follows, I am talking about the latest [21328] version of the SDK, not that I believe that my problems have anything to do with that release, just so anyone interested and willing to help will know the version.
02. My application happens to be rooted in AIR's WindowedApplication, but again, I do not think that has any impact on my problems; I believe the same results would obtain for a Flex Application.
03. I have a custom renderer for the Spark DataGrid which extends DefaultGridItemRenderer. It works fine. Its primary job is to change the font characteristics of each row in the list as a visual clue to the user as to the specific nature of the content that is accessible. Some entries are just in the Regular font, some in Bold, some in Italic, and some in Bold-Italic.
04. I have, for most of the project, embedded the necessary fonts like this:
    [Embed (source="C:/Windows/Fonts/ArnoPro-Caption.otf", fontName="ArnoPro_BI_4",
        fontStyle="italic",
        fontWeight="bold",
        mimeType="application/x-font",
        embedAsCFF="true",
        unicodeRange="U+0021-U+00ff, U+20ac-U+20ac")]
    private const ArnoPro_BI_4:Class;
As I said, that all works just as advertized. But, that method of embedding carries the somewhat painful burden of slower compilations, so for the last 24 hours I have unseccessfully been trying to replace that with:
[Embed (source = "../resources/assets/ArnoPro_BI_4.swf", symbol="ArnoPro_BI_4")]
private const ArnoPro_BI_4:Class;
where the swf file was produced via fontswf, using this incantation:
fontswf -4 -u U+0021-U+00ff,U+20ac-U+20ac -b -i -a ArnoPro_BI_4 -o ArnoPro_BI_4.swf C:/Windows/Fonts/ArnoPro-Caption.otf
06. By all that is holy, the two different means of embedding the font ought to yield the same result, but they do not. I have debugging code inserted to print out the list of fonts upon initiation of the application, and they are identical. Both means of embedding do succeed in getting the embedded fonts into the .swf, but the attempt to use the fonts fails using the second approach.
There is, of course, no change being made to the code in the item renderer which merely uses setStyle() to effect the row-by-row result. The result in the second case is that the only style of the embedded font that renders is 'regular'.
07. I have used the 'keep-generated' facility to look at the code being generated by the mxmlc compiler and can see that different code is emitted, but it does not help me find a fix to the problem. Both forms of the meta-tag do something; both methods of embedding seem to correctly register themselves with the FontManager, but only the method of embedding which actually performs the transcoding during compilation seems to result in a set of registered fronts which can be found and correctly used to render output based on the runtime setting of the font style.

Thank for the reply
I hoped that my posting indicated how the fonts in the the .swf file were constructed. The "-4", argument to the command-line tool, fontswf, as far as I can tell, is the precise analog to the "embedAsCFF" argument in the [Embed] syntax. That is what makes it so perplexing. Given all the external documentation that is available for each tool/methodology, I would have thought that the resultant bytecodes, classes, flags, whatever, would have been identical. The only difference would be the timing of when the transcoding took place.
Since it is clearly more efficient to only transcode whatever set of fonts an application needs once, not once per build/test turn-around, I would really like to make the fontswf workflow work. For those of us outside the beneficial environment of your licensed tools, the kindly-provided alternative to the facilities built into Flash Professional and/or Flash Builder give us the greatest degree of productivity.
Whoever has access to the source code for Font [I can only see the uninteresting FontAsset in the SDK] can probably determine what difference might result from mxmlc working with this intermediate output, when inline transcoding is 'tagged':
package
import mx.core.FontAsset;
[ExcludeClass]
[Embed(fontName="ArnoPro_IT_4", _resolvedSource="C:/WINDOWS/Fonts/ArnoPro-ItalicCaption.otf", fontStyle="italic", _line="1189", _pathsep="true", embedAsCFF="true", fontWeight="normal", unicodeRange="U+0021-U+00ff, U+20ac-U+20ac", source="C:/Windows/Fonts/ArnoPro-ItalicCaption.otf", _column="2", exportSymbol="AIRZoom_ArnoPro_IT_4", _file="G:/FP/AIRZoom/src/AIRZoom_AS.as", mimeType="application/x-font")]
public class AIRZoom_ArnoPro_IT_4 extends mx.core.FontAsset
    public function AIRZoom_ArnoPro_IT_4()
        super();
versus this, when swf extraction is 'tagged':
package
import mx.core.FontAsset;
[ExcludeClass]
[Embed(fontName="ArnoPro_IT_4", _resolvedSource="C:/WINDOWS/Fonts/ArnoPro-ItalicCaption.otf", fontStyle="italic", _line="1191", _pathsep="true", embedAsCFF="true", fontWeight="normal", unicodeRange="U+0021-U+00ff, U+20ac-U+20ac", source="C:/Windows/Fonts/ArnoPro-ItalicCaption.otf", _column="2", exportSymbol="AIRZoom_ArnoPro_IT_4", _file="G:/FP/AIRZoom/src/AIRZoom_AS.as", mimeType="application/x-font")]
public class AIRZoom_ArnoPro_IT_4 extends mx.core.FontAsset
    public function AIRZoom_ArnoPro_IT_4()
        super();
The only difference is that value for '_line' which probably only indicates that one of the two processes has a comment or empty line somewhere.

Overriding Spark DataGrid item renderer's prepare method - renderer's child is initially null

I am currently using the 4.12.0 SDK. I have a Spark DataGrid setup that makes use of an externally-defined itemRenderer:
<s:DataGrid id="dgEquipment"
            width="100%" height="100%"
            doubleClickEnabled="true"
            creationComplete="init()" doubleClick="popTab(event)">
<s:columns>
    <s:ArrayList>
      <s:GridColumn itemRenderer="renderers.equipment.IconRenderer"
                    dataField="EXISTING"
                    width="22"/>
The data provider is set programmatically after a remote call has returned a result.
I have the renderer setup as follows:
<?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"
                    dataChange="init()" remove="dispose()">
<s:layout>
    <s:VerticalLayout horizontalAlign="center" verticalAlign="middle"/>
</s:layout>
<fx:Script>
    <![CDATA[
      import mx.controls.Menu;
      import mx.events.MenuEvent;
      import spark.components.DataGrid;
      [Bindable]
      [Embed(source="../../../assets/images/Icon 1.png")]
      private var ico1:Class;
      [Bindable]
      [Embed(source="../../../assets/images/Icon 2.png")]
      private var ico2:Class;
      [Bindable]
      [Embed(source="../../../assets/images/Icon 3.png")]
      private var ico3:Class;
      private var isExisting:Boolean;
      private var popUp:Menu;
      private function init():void
        if (data)
          isExisting = data.EXISTING == 1;
      private function dispose():void
        if (popUp)
          popUp.removeEventListener(MenuEvent.ITEM_CLICK, popUp_click);
          popUp = null;
        if (imgActions)
          imgActions.removeEventListener(MouseEvent.CLICK, image_click);
          imgActions = null;
      override public function prepare(hasBeenRecycled:Boolean):void
        if (data)
          if ((data.TYPE == "A" || data.TYPE == "B") && !data.X && !data.Y)
            disableLink();
            imgActions.source = ico3;
            imgActions.toolTip = "Blah blah.";
          else if (data.TYPE == "C" || data.TYPE == "D")
            disableLink();
          else if (isExisting)
            imgActions.source = ico1; //******************************            imgActions.toolTip = "More blah blah.";
            imgActions.addEventListener(MouseEvent.CLICK, image_click);
          else
            imgActions.source = ico2;
            imgActions.addEventListener(MouseEvent.CLICK, image_click);
            imgActions.toolTip = "Even more blah blah.";
            initPopUp();
      private function initPopUp():void
      private function popUp_click(event:MenuEvent):void
      private function image_click(event:MouseEvent):void
      private function disableLink():void
    ]]>
</fx:Script>
<s:Image id="imgActions"
           height="18" width="18"/>
</s:GridItemRenderer>
When the code reaches the line where I have added a comment full of asterisks, I get the following error:
TypeError: Error #1009: Cannot access a property or method of a null object reference.
    at renderers.equipment::IconRenderer/prepare()[C:\…\renderers\equipment\IconRenderer.mxml:81 ]
    at spark.components.gridClasses::GridViewLayout/initializeItemRenderer()[/Users/justinmclean /Documents/ApacheFlex4.12.0/frameworks/projects/spark/src/spark/components/gridClasses/Gri dViewLayout.as:1808]
    at spark.components.gridClasses::GridViewLayout/createTypicalItemRenderer()[/Users/justinmcl ean/Documents/ApacheFlex4.12.0/frameworks/projects/spark/src/spark/components/gridClasses/ GridViewLayout.as:1243]
    at spark.components.gridClasses::GridViewLayout/updateTypicalCellSizes()[/Users/justinmclean /Documents/ApacheFlex4.12.0/frameworks/projects/spark/src/spark/components/gridClasses/Gri dViewLayout.as:1374]
    at spark.components.gridClasses::GridViewLayout/measure()[/Users/justinmclean/Documents/Apac heFlex4.12.0/frameworks/projects/spark/src/spark/components/gridClasses/GridViewLayout.as: 875]
    at spark.components.supportClasses::GroupBase/measure()[/Users/justinmclean/Documents/Apache Flex4.12.0/frameworks/projects/spark/src/spark/components/supportClasses/GroupBase.as:1156 ]
    at mx.core::UIComponent/http://www.adobe.com/2006/flex/mx/internal::measureSizes()[/Users/justinmclean/Documents/ApacheFlex4.12.0/frameworks/projects/framework/src/mx/cor e/UIComponent.as:9038]
    at mx.core::UIComponent/validateSize()[/Users/justinmclean/Documents/ApacheFlex4.12.0/framew orks/projects/framework/src/mx/core/UIComponent.as:8962]
    at spark.components::Group/validateSize()[/Users/justinmclean/Documents/ApacheFlex4.12.0/fra meworks/projects/spark/src/spark/components/Group.as:1074]
    at mx.managers::LayoutManager/validateSize()[/Users/justinmclean/Documents/ApacheFlex4.12.0/ frameworks/projects/framework/src/mx/managers/LayoutManager.as:673]
    at mx.managers::LayoutManager/doPhasedInstantiation()[/Users/justinmclean/Documents/ApacheFl ex4.12.0/frameworks/projects/framework/src/mx/managers/LayoutManager.as:824]
    at mx.managers::LayoutManager/doPhasedInstantiationCallback()[/Users/justinmclean/Documents/ ApacheFlex4.12.0/frameworks/projects/framework/src/mx/managers/LayoutManager.as:1188]
Running the debugger shows that this occurs with the first item in the data provider. If I alter the prepare method to check for the existence of imgActions before doing anything, everything works fine after the first item. So I'll have one row in the DataGrid with a missing icon, and all the rest will have icons.
So the question is, is it normal for prepare to run before any children of the item renderer are created? If so, how should I handle this?
Many thanks in advance.

A little more info. I added some event handlers to the renderer and the image (for events that I thought would be relevant), and here is the order of events based on trace statements within the handlers:
griditemrenderer1_addedHandler
griditemrenderer1_addedToStageHandler
griditemrenderer1_preinitializeHandler
imgActions_addedHandler
griditemrenderer1_addedHandler
imgActions_addedToStageHandler
imgActions_preinitializeHandler
imgActions_addedHandler
griditemrenderer1_addedHandler
imgActions_initializeHandler
griditemrenderer1_elementAddHandler
imgActions_addHandler
griditemrenderer1_initializeHandler
griditemrenderer1_addHandler
prepare called
imgActions_resizeHandler
griditemrenderer1_resizeHandler
imgActions_creationCompleteHandler
imgActions_updateCompleteHandler
griditemrenderer1_creationCompleteHandler
griditemrenderer1_updateCompleteHandler
griditemrenderer1_removeHandler
griditemrenderer1_addedHandler
griditemrenderer1_addedToStageHandler
imgActions_addedToStageHandler
griditemrenderer1_addHandler
griditemrenderer1_dataChangeHandlerTypeError: Error #1009: Cannot access a property or method of a null object reference.
prepare called
    at renderers.equipment::IconRenderer/prepare()[C:\…\renderers\equipment\IconRenderer.mxml:91 ]
imgActions_renderHandler
griditemrenderer1_renderHandler

Setting font style on hover for spark datagrid

I'm trying to skin a Spark datagrid. I have most things sorted by creating a custom skin, but one thing I can't find is how to set the colour of the row's font on hover. I can set the background colour fine, but how would I go about changing the font colour when a user hovers over the row?
Thanks

Hi
You don’t actually deal with the text that’s displayed in the a datagrid inside of the skin
Look at item renderers for the grid columns. You can style your text or whatever else you would like to display in the grid, in the renderer
Hope that helps a little
If you are still stuck just let me know and I’ll send you some code
Cheers
g
heres some code
NOTE: I am making this up as I sit here so I may be forgetting something. Don’t be surprised if this doesn’t work, but the basic idea is right I think
So in the spark datagrid when you set your column (if you use mxml) this will replace a glob renderer so you can have a different one for each column if you wish.
<s:GridColumn dataField="Status"
headerText="name"
width="37"
itemRenderer="fooRenderer"
/>
Or set a gloabel renderer in the grid def itself
<s:DataGrid itemRenderer=”fooRenderer” />
Then write a custom renderer: fooRenderer.mxml
<?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 discard(willBeRecycled:Boolean):void
                           labelData.text="";
                           super.discard(willBeRecycled);
                     override public function prepare(hasBeenRecycled:Boolean):void
                           if(data)
                                   // set the colour of the text label to black
                                  labelData.setStyle("color",0x000000)
                                  // put some logic here to dynamic style the label
                           //check for the 'format' function on the column (THIS MAY BE WRONG)
                           if( column.labelFunction != null )
                                  labelData.text = column.labelFunction( data, column );
                           else
                                  labelData.text = data[column.dataField];
                     super.prepare(hasBeenRecycled);
              ]]>
       </fx:Script>
       <s:Label id="labelData" />
</s:GridItemRenderer

Spark datagrid item renderer - adjust height

I am using a textinput as an item renderer for DataGrid:
<s:GridColumn dataField="Comment" headerText="Comment"
                                                                                  itemRenderer="DataGridRenderer">
</s:GridColumn>
// Renderer
<?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"
                                          xmlns:gridEditorClasses="spark.components.gridEditorClasses.*"
                                          xmlns:ns="library://commons.stoneriver.com"
                                >
          <fx:Script>
                    <![CDATA[
                              override public function prepare(hasBeenRecycled:Boolean):void
                                        super.prepare(hasBeenRecycled);
                                        if (data)
                                                  if(data.FormCode == "")
                                                            Comment.text = data[column.dataField];
                                                            Comment.setStyle("backgroundColor", 0xFFFFFF);
                                                  else
                                                            Comment.text = "";
                                                            Comment.setStyle("backgroundColor", 0xB1CCF0);
                    ]]>
          </fx:Script>
          
          <s:TextInput id="Comment" width="100%" borderVisible="false" fontSize="{column.grid.dataGrid.getStyle('fontSize')}"/>
</s:GridItemRenderer>
How can I adjust a height of this renderer to fill the whole cell? Right now it comes out with a smaller height than a row height.
Thanks

I actually got word wrapping working with RichEditableText . But now when I specify height=100% all rows have the same extremely large height.

Selection issue with editable Spark DataGrid

Hi everyone,
I am evaluating the new Spark DataGrid and I'm having a very strange issue with the behavior of selection in an editable instance.
Here is my test application: http://www.playcalliope.com/flex/DataGridSelectionIssue.html (code here: https://gist.github.com/1129160)
And here are the steps to reproduce the issue:
select the very first cell at the top-left corner of the grid (the one with "Gabriele");
click on it once more, the editor appears;
now click on the cell just to the right of it (the one with "Genta").
You should see that editing ends as it supposed to do, but selection is placed on the third cell (the one with a 5 in it) instead on the one you clicked on. Playing a little with the grid you should see that this isn't the only case, but selection is really behaving randomly.
I am using SDK 4.5.1.21328.
I think this is a very basic usage case.. I can't believe this is not working properly, what am I missing?
Thanks a lot,
Gabriele Genta
Message was edited to add live example

Your running into a known bug, https://bugs.adobe.com/jira/browse/SDK-30088.
The bug will be fixed in the Mega release. To work around the bug you can create a custom editor and remove the "dataGrid.validateNow();" call in DataGridEditor.save().
Here's how I modified your example to workaround the bug:
<?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"
               backgroundColor="#E7E7E7"
               creationComplete="application1_creationCompleteHandler(event)">
    <s:layout>
        <s:HorizontalLayout horizontalAlign="center" verticalAlign="middle"/>
    </s:layout>
    <fx:Script>
        <![CDATA[
            import mx.collections.XMLListCollection;
            import mx.events.FlexEvent;
            protected function application1_creationCompleteHandler(event:FlexEvent):void
                testGrid.dataProvider = new XMLListCollection(testData.item);
        ]]>
    </fx:Script>
    <fx:Declarations>
        <fx:XML id="testData" xmlns="">
            <items>
                <item>
                    <id>1</id>
                    <cognome>Gabriele</cognome>
                    <nome>Genta</nome>
                    <uhm>5</uhm>
                    <bene>molto</bene>
                </item>
                <item>
                    <id>10</id>
                    <cognome>Pinco</cognome>
                    <nome>Pallino</nome>
                    <uhm>10</uhm>
                    <bene>poco</bene>
                </item>
            </items>
        </fx:XML>
        <fx:Component className="MyDefaultEditor">
            <s:DefaultGridItemEditor>
                <fx:Script>
                    <![CDATA[
                        import mx.collections.ICollectionView;
                        import mx.collections.ISort;
                        override public function save():Boolean
                            if (!validate())
                                return false;
                            var newData:Object = value;
                            var property:String = column.dataField;
                            var data:Object = data;
                            var typeInfo:String = "";
                            for each(var variable:XML in describeType(data).variable)
                                if (property == [email protected]())
                                    typeInfo = [email protected]();
                                    break;
                            if (typeInfo == "String")
                                if (!(newData is String))
                                    newData = newData.toString();
                            else if (typeInfo == "uint")
                                if (!(newData is uint))
                                    newData = uint(newData);
                            else if (typeInfo == "int")
                                if (!(newData is int))
                                    newData = int(newData);
                            else if (typeInfo == "Number")
                                if (!(newData is Number))
                                    newData = Number(newData);
                            else if (typeInfo == "Boolean")
                                if (!(newData is Boolean))
                                    var strNewData:String = newData.toString();
                                    if (strNewData)
                                        newData = (strNewData.toLowerCase() == "true") ? true : false;
                            if (property && data[property] !== newData)
                                // If the data is sorted, turn off the sort for the edited data.
                                var sort:ISort = null;
                                if (dataGrid.dataProvider is ICollectionView)
                                    var dataProvider:ICollectionView = ICollectionView(dataGrid.dataProvider);
                                    if (dataProvider.sort)
                                        sort = dataProvider.sort;
                                        dataProvider.sort = null;
                                var oldData:Object = data[property];
                                data[property] = newData;
                                dataGrid.dataProvider.itemUpdated(data, property, oldData, newData);
                                // Restore the sort. The data will not be sorted due to this change.
                                if (sort)
                                    ICollectionView(dataGrid.dataProvider).sort = sort;
                            return true;
                    ]]>
                </fx:Script>
            </s:DefaultGridItemEditor>
        </fx:Component>
    </fx:Declarations>
    <s:DataGrid id="testGrid" width="100%" height="100%"
                editable="true" selectionMode="singleCell"
                itemEditor="{new ClassFactory(MyDefaultEditor)}">
        <s:columns>
            <s:ArrayList>
                <s:GridColumn headerText="Prova" dataField="cognome"/>
                <s:GridColumn headerText="Prova1" dataField="nome"/>
                <s:GridColumn headerText="Prova3" dataField="uhm"/>
                <s:GridColumn headerText="Prova4" dataField="bene"/>
            </s:ArrayList>
        </s:columns>
    </s:DataGrid>
</s:Application>

How to filter spark datagrid?

SORRY, I TRY TO FILTER MY DATAGRID, BUT IT DOESN'T WORK.
WHAT'S WRONG IN THIS CODE?
IN THE DEBUG EVERYTHING IS OK UNTIL THE BOLD TEXT, BECAUSE THE DATAPROVIDER IN DATAGRID IS NOT FILTERED.
PLEASE HELP ME!!!
THANK YOU.
<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark" title="Albo" creationComplete="init(event)">
    <fx:Script>
        <![CDATA[
            import mx.events.FlexEvent;
            import spark.events.GridEvent;
            import spark.events.TextOperationEvent;
            import spark.components.TextInput;
            import spark.components.DataGrid;
            import mx.collections.ArrayList;
            protected function init(event:FlexEvent):void
                IngegneriXML.send();
            private function gridClickEvent(event:GridEvent):void
                navigator.pushView(Dettaglio, event.target.selectedItem);
            private function filterDataProvider(obj:Object, idx:int, arr:Array):Boolean
                var txt1:String = RicCogn.text;
                var txt2:String = obj._item.cognome.toString();
            if (txt1.toLowerCase() == txt2.toLowerCase())
                return true;
                return false;
            protected function RicCogn_changeHandler(event:TextOperationEvent):void
                var arr:Array = Grid1.dataProvider.toArray();
                var filteredArr:Array = arr.filter(filterDataProvider);
                Grid1.dataProvider = new DataProvider(filteredArr);
                Grid1.dataProvider.refresh();
                var ara2:Array = Grid1.dataProvider.toArray();
                var ara3:Array = Grid1.dataProvider.toArray();
        ]]>
    </fx:Script>
    <fx:Declarations>
        <s:HTTPService id="IngegneriXML" url="C:\AlboFlash\DatiXML\ingegneri.xml"/>
    </fx:Declarations>
    <s:TextInput x="0" y="0" id="RicCogn" change="RicCogn_changeHandler(event)"/>
    <s:DataGrid id="Grid1" x="0" y="80" dataProvider="{IngegneriXML.lastResult.ingegneri.ingegnere}" height="100%" width="100%" gridClick="gridClickEvent(event);">
        <s:columns>
            <s:ArrayList id="columns">
                <s:GridColumn dataField="cognome" headerText="Cognome" minWidth="100"/>
                <s:GridColumn dataField="nome" headerText="Nome" minWidth="100"/>
            </s:ArrayList>
        </s:columns>
    </s:DataGrid>
</s:View>

I made it :-)
I revealed the magic.
Actually without knowing it, I was misusing the ArrayCollection class and treating it as Model, while it was obviously designed for View purposes.
Now I'm using ArrayList for that, and then I create a new ArrayCollection for different views. Then I use newArrayCollection.list = myList and newArrayCollection.filterFunction = ...
This works for me.
My recomendation would be to improve the documentation a bit, so that it is clear that it is not recommended to use same ArrayCollection for multiple views.
Regards,
Dinko

Flex Spark DataGrid BUG skipping rows on refresh

Similar Messages

Maybe you are looking for