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 {

Similar Messages

Spark datagrid custom griditemeditor popup issue.

I have griditemrenderer and griditemeditor for a spark datagrid column. As I have some functionality to be implemented in renderer and editor, I have created custom renderer and editor as follows;
MyEditor.as
<?xml version="1.0" encoding="utf-8"?>
<s:GridItemEditor xmlns:fx="http://ns.adobe.com/mxml/2009"
      xmlns:s="library://ns.adobe.com/flex/spark"
      xmlns:mx="library://ns.adobe.com/flex/mx"
      left="0" right="0" top="0" bottom="0" clipAndEnableScrolling="true"
      focusEnabled="true" focusIn="{re.setFocus()}" hasFocusableChildren="true">
<fx:Script>
<![CDATA[
   override public function prepare():void{
    if(data!=null)
             re.text = data[column.dataField];
]]>
</fx:Script>
<mx:HBox width="100%" height="100%">
   <s:RichEditableText id="re" width="100%" height="100%" editable="true">
   </s:RichEditableText>
</mx:HBox>
</s:GridItemEditor>
MyRenderer.as
<?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(data!=null)
             rTxt.text = data[column.dataField];
]]>
</fx:Script>
<s:RichText id="rTxt" left="7" top="7" >
   </s:RichText>
</s:GridItemRenderer>
Following datagrid uses these;
The problem is that when i am trying to edit the cell, the griditemeditor pops up above the griditemrenderer. I want that editor should come instead renderer place when editing cell, it should not popup. I can not use inline renderer and editor as i have lot of functionality in that.
Please let me know if any solution.
Thanks..

The datagrid code is as following;
<?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"
   width="100%" height="100%" editable="true">
<s:columns>
<s:ArrayCollection>
<s:GridColumn dataField="name" editable="false"
        headerText="Name">
</s:GridColumn>
<s:GridColumn dataField="info" editable="true"
        headerText="Info"
        itemEditor="MyEditor"
        itemRenderer="MyRenderer">
</s:GridColumn>
</s:ArrayCollection>
</s:columns>
</s:DataGrid>
Please suggest if any solution.

Can I create a custom scrollbar for my spark datagrid

Basically I'm trying to customize the look of my spark datagrid.
I'd like to change the header appearance and I'd also like to create a custom scrollbar.
If only Catalyst would implement a custom datagrid component. I mean the datagrid is a very popular component, isn't it?
Thanks
kristin

You need the password for free apps as well as for paid apps. The only ways that you can control what your child downloads is for you to supervise while the downloading is taking place or by totally restricting download apps with restrictions.
When you enter your password and download content, you have 15 more minutes to continue downloading before you have to enter the password again. So if you download and app - then give the iPad to your child - he or she can continue downloading apps or music or any content for the next 15 minutes without any restrictions. IF you sign out of your account, then the child can no longer download. IMHO - You should NOT give your password to your child. That really is not a good practice.
You can set restrictions on the iPad so that the child cannot download any apps at all. Go to Settings>General>Restrictions>On. Then you will have to enter a passcode for the device which you do not want to forget (if you do, you have to restore the device) so if you do this remember your passcode. You can then go to the apps settings within the restrictions and Enable Restrictions and turn off Installing Apps.
This article will provide more information for you.
http://netsecurity.about.com/od/frequentlyaskedquestions/a/How-To-Setup-Parental -Controls-On-An-Ipad-Ipod-Touch-Or-Iphone.htm

Create custom scrollbar for Spark Datagrid

I had a custom scroll bar for a MX datagrid. But recently I got the new Flash Builder 4.5 and it said to use the Spark Datagrid component instead. So I changed everything to Spark, but now I can't find any info on customizing the scroll bar. Is this possible? Should I go back to mx?
According to the documentation in Flash Builder:
"The Spark DataGrid control provides the following features:
- Custom skins to control all aspects of the appearance of the DataGrid control"
So I'm hoping it's possible but I can't find any info either way.

Thanks. I'm not sure exactly how I did it, but I started with this document in Flash Builder Help:
"Setting a custom horizontal scroll bar skin on a Spark List control in Flex 4"
I copied the code and changed "s|List" to "s|Datagrid", modified it accordingly for a vertical scroll bar, and I deleted references to "base color" so that it would compile. Then, I copied in VScrollBarTrackSkin.mxml and VScrollBarThumbSkin.mxml from the Flash Builder directory: Adobe Flash Builder 4.5\sdks\4.5.1\samples\themes\zen\src\zen\skins. And I removed the references to the swf files so that it would compile. Then I embedded my own png images, e.g.: source.up="@Embed(source='/images/thumb.png')". And I got a scrollbar!
Only problem is the example does not have up and down controls. But I figured this out from looking at the zen skins (VScrollBarSkin / HScrollBarSkin) and copying in the code for the up and down buttons as well. Now it's working pretty good.
[I did not use any of the Flash Builder wizards/GUI to create the skins or files. I just created the files individually (as in File - New - File). Perhaps there's a better way to do it, but this worked for me.]
I'm not sure why you suggested looking at "ScrollerSkin". This didn't lead me anywhere, though perhaps I was not clear in my question. But I greatly appreciate your answer, for saying that this is possible, otherwise I would have given up!

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

Want to implent CheckBox for itemRenderer and headerItemRenderer for spark DataGrid.

I am using mx:DataGrid in my application.
The first column itemRenderer and headerItermRenderer is CheckBox.
Now I want to move it to spark DataGrid. I could imprement itermRenderer easily by creating sub-claassing GridItemRenderer. But I am struck at implementing headerItermRenderer. I tried to implent it using GridItemRenderer sub-class as I did with itemRenderer. It is not working. The set data method is not getting called.
Do anyone have code for implenting checkbox as itemRenderer and headerRendere in spark datagrid (and not mx datagrid)?
Thanks,
Prithvee Zankat.

Hi,
Item renderer can be implemented for spark and i think you will have to write custom header renderer. I am providing some useful links,please go through them :
http://help.adobe.com/en_US/flex/using/WS0ab2a460655f2dc3-427f401412c60d04dca-7ff3.html
http://cookbooks.adobe.com/post_3_state_checkbox_for_header_renderer_in_datagrid-18900.htm l
http://blogs.adobe.com/aharui/category/item-renderers
http://boardreader.com/thread/Spark_Datagrid_custom_header_renderer_1zw07Xgoeo.html
Thanks and Regards,
Vibhuti Gosavi | [email protected] | www.infocepts.com

Spark Datagrid: Styling the Header?

Hi,
Question for all the Spark and Datagrid gurus out there:
How can I change the text style of the spark datagrid header? For example, I want to make it blue with underlines. More importantly I need to change the color on rollover and/or selection.
Second, how can I change the sort indicator/icon? I'd like to substitute the up/down triangle with a graphic image or other mxml object.
I've searched the net high and low, but haven't yet found answers to the above questions. Is there documentation for such things, or is a bunch of custom code required?
Within the DefaultGridHeaderRender (which I've duplicated), I did find the "labelDisplayGroup" and the "sortIndicatorGroup". But how can these be customized?
Thank you very much for any advice or help. Regards,
dana.

Thank you Kevin for the reply.
Ideally we'd like to be able to clearly indicate to the user which column is selected. With the default skin, the background color for the header renderer is used to indicate currently selected column. However in the current design I'm working with, the background needs to be transparent. So the goal is to indicated which header is selected by changing the header text color. My hope was that whatever controls when the sort indicator and the background color change was also easily accessible. But I can't find a way to leverage the existing controls to know when a column is selected.
It sounds like instead I should write and append my own column selection control mechanism and/or events, which I can then use to change the text color.
In the future it might be nice to have a "selected" state for header renderers, like the rest of the datagrid items, to make it easily to program for and separate out the 'view' a bit more. (Unless of course this already exists, and I'm just missing it.)
Thanks for your replies,
dana.

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.

How to change header font style in Spark DataGrid?

I'm looking since last week for a way how to change the font style of the header in a Spark DataGrid. It drive me nuts that I can't find a way to do this. Have anyone one an idea how to achieve it? Any help is appreciated.
Thanks,
- Artur

Hi,
Some styles won't work because some text styles got hardcoded into the DefaultGridHeaderRenderer's Label. You'll run into this issue not just with the DataGrid headers but also things like the Panel's title and other places where we have text. One way to get around this issue is to create your own custom headerRenderer based on the default one and then redefine the headerRenderer skin part in the skin.
First, create a subclass of the DefaultGridHeaderRenderer and tweak the "labelDisplay" to your liking (or even just take out all the styles and style it on your own as you had earlier using your custom header renderer's name). Example below (I named it "CustomHeaderRenderer"):
<?xml version="1.0" encoding="utf-8"?>
<skins:DefaultGridHeaderRenderer 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:skins="spark.skins.spark.*"
                                 xmlns:comps="comps.*">
    <fx:Declarations>
        
        <s:Label id="labelDisplay"
                 verticalCenter="1" left="0" right="0" top="0" bottom="0"
                 textAlign="start"
                 verticalAlign="middle"
                 maxDisplayedLines="1"
                 showTruncationTip="true" />
    </fx:Declarations>
</skins:DefaultGridHeaderRenderer>
Next, create a simple DataGrid skin by creating a subclass of the spark.skins.spark.DataGridSkin in MXML and defining a new headerRenderer component in the fx:Declarations section. Example below (I named it "CustomDataGridSkin"):
<?xml version="1.0" encoding="utf-8"?>
<skins:DataGridSkin 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:skins="spark.skins.spark.*"
                xmlns:comps="comps.*">
    <fx:Declarations>
        
        <fx:Component id="headerRenderer">
            <comps:CustomHeaderRenderer />
        </fx:Component>
    </fx:Declarations>
</skins:DataGridSkin>
Last, assign your new skin as the skinClass of your DataGrid (either in MXML or as a style):
<s:DataGrid skinClass="comps.CustomDataGridSkin">
I know it's not pretty, but it's the result of trading off between having completely custom skinning vs. having knobs to tweak every style. Hope this helps.
-Kevin

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

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.

Questions about Spark DataGrid (Header Font Styles, Header Gradient)

Just starting out in 4.5 SDK, and just a tad confused on the Spark DataGrid.
1) Trying to set the font style for just the header, but don't see those properties in the designer....as they appear to apply to every part of the DataGrid.
2) Want to set a linear gradient for the header utilizing two specific colors, alphas and ratios. Not sure where to set them now.
I think that is it for now. From what I have done with it so far, I love it....just obviously not as much user documentation as the MX DataGrid.
Thanks in advance!
Bill

You can do per column header renderers by setting the headerRenderer property on the column. But if you want to swap out all the headers, the header renderer has to be specified in the skin. One neat trick you can do is subclass the DataGridSkin and replace the "headerRenderer" declaration. This also works with the other skin parts.
<?xml version="1.0" encoding="utf-8"?>
<skins:DataGridSkin 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:skins="spark.skins.spark.*">
    <fx:Declarations>
        
        <fx:Component id="headerRenderer">
            <s:CustomGridHeaderRenderer />
        </fx:Component>
    </fx:Declarations>
</skins:DataGridSkin>
-Kevin

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>

Playing with the spark datagrid

I'm Playing with the spark datagrid and have a column set up like so:
<GridColumn width="140" headerText="Margin" headerText.editMode="Margin (editing)" dataField="margin" editable="false" editable.editMode="true" itemRenderer="gridColumnRenderer" >
           </GridColumn>
I would like the item render to change colour based on the state of the outerDocuent, is this possible?
I tried this but can't get to the outerdocument
<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
                xmlns:s="library://ns.adobe.com/flex/spark"
                xmlns:mx="library://ns.adobe.com/flex/mx"
                autoDrawBackground="true">
    <s:Label text="{data.margin}" backgroundColor="{   outerDocument.currentState =='editMode'?0xffffff:0xdddddd}"/>
</s:ItemRenderer>

I believe you will need to use GridItemRenderer instead of ItemRenderer as your base class for renderers in the spark DataGrid. Does it work if you change to that?

Spark DataGrid - editing session

I am trying to specidy a listener to catch a data change in Spark DataGrid. Here is my code:
<s:DataGrid requestedRowCount="4" fontSize="11" sortableColumns="false"
                                   id="engines" rowHeight="22" gridItemEditorSessionStarting="processData(event)"
                                   height="100%">
                         <s:columns>
                              <s:ArrayList>
                                   <s:GridColumn dataField="initial" headerText="Initial" width="50">
                                        <s:itemRenderer>
                                             <fx:Component>
                                                  <s:GridItemRenderer>
                                                       <s:layout>
                                                            <s:VerticalLayout paddingLeft="2"
                                                                                  verticalAlign="middle"/>
                                                       </s:layout>
                                                       <s:TextInput restrict="a-zA-Z"/>
                                                  </s:GridItemRenderer>
                                             </fx:Component>
                                        </s:itemRenderer>
                                   </s:GridColumn>
but processData does not get fired.
Any idea?

A cell editor is placed over the top of a cell and it is sized by the DataGrid to be the same height as the cell. The height of the cell is not changed. Are you see the cell height change when you are using a built-in cell editor or your own custom cell editor? In any case, you can you the prepare() method of a cell editor to make any final adjustments to the cell editor that you want, including changing the height of the cell editor.
-Darrell

Spark datagrid - custom renderers

Similar Messages

Maybe you are looking for