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>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</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>

Similar Messages

  • 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>

  • 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.

  • 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>
            <!-- Remove fontweight="bold" and other styles as you wish
                 Must be a component and not a factory. -->
            <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>
            <!-- Must be a factory with the right id for the skin part -->
            <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

  • Spark DataGrid with Safari

    Hello,
    I tried today spark datagrid and used the examples from Adobe Help. But when testing with Safari I have problems with the cursor.
    For instance when I resize the column width, I can't see the cursor anymore, I have to click first outside datagrid to make the cursor
    visible again. But I can move the cursor, can click even see the cell color changing but without exactly knowing where the cursor is.
    Is this a known issue?
    With Firefox there is no problem.
    Thanks for your help.
    Kind regards,
    ND

    The most recent Safari browser does not work well with the debugger player.  I’ve had to switch to another browser.

  • 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.

  • Header Width for a Spark DataGrid

    I recently replaced an mx:DataGrid in one of my components with the new spark DataGrid and I noticed that the columns were so narrow that most of the header labels were unreadable. I eventually figured out that the spark datagrid was basing the column width on the length of the longest displayed item in the contents. So for example, if the column is showing state abreviations, the header would only show the first two or three letters of the header text and the rest would be truncated. What I need to know is whether there is some way to reverse this behavior. I want the width of each column to be based on the length of the header text, not the content data.
    I know the 'recommended' way of setting column width is with a typical item, but in this case that's not an option. I also tried creating a custom DataGridSkin that sets the minWidth property of the headerRenderer but it had no effect. I'm pulling my hair out trying to get this to work, any help would be much appreciated.

    Actually, when I took a closer look at the stack trace I was able to figure out the problem. It turns out that the problem with the typicalItem was being caused by a labelFunction on one of my columns. The label function was expecting to see the DTO object as it's first parameter. In the process of setting up the typicalItemRenderer, the grid column was calling itemToLabel with the typicalItem causing a class cast expection.
    I was able to resolve that issue but now I'm seeing another one. The typicalItem I creat isn't having any effect of the width of my datagrid columns. The problem is, GridColumn doesn't have an itemRendererFunction set by default. The itemToRenderer function of GridColumn only uses the typicalItem if there is an itemRendererFunction defined. Is that the intended behavior? If so, the documentation really needs to mention that fact somewhere.
    It looks like the typicalItem is actually getting applied somewhere, I just didn't have long enough string to see the effect. I'm still curious though, if not in the itemRendererFunction, what Class/function is actually responsible for taking the widths from the typicalItem and applying them to the columns?

  • How to resize the spark datagrid collumns based on the headertext?

    Hi friends,
         I am using spark datagrid for displaying the tablur data in my application, when i setting the dataprovider property of the datagrid, it displays the content exactally what i expeceted.
    but the widht of the collumns are based on the content of the dataprovider, i am not able to see the full collumn name in the datagrid's header. I want to display the full collumn name to the users without setting the collumn width explicitly because the data are dynamically returned from the server. could you pls give me some ideas to acheive this...?
    Thanks in advance.

    Hi Karthikeyan Subramain,
    You can make use of typicalItem proberty to set the column width.
    Here is the link for sample code which uses typicalItem:
    http://butterfliesandbugs.wordpress.com/2011/03/08/its-a-best-practice-to-size-a-spark-dat agrids-columns-with-a-typicalitem/
    Hope this will help you
    Thanks and Best regards,
    Pooja Kuber | [email protected] | www.infocepts.com

  • 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.

  • Column stretch event in spark datagrid

    Hi everybody,
    These days I'm converting our Flex application from Flex 3 SDK to Flex 4.5 SDK (Hero).
    I've a problem with the spark datagrid, and more specifically, the events listening on the columns.
    How can we know that the columns in the spark datagrid are stretched or shrinked?
    In Flex 3, there was a DataGridEvent.COLUMN_STRETCH event on the datagrid and I can't find the equivalent in Flex 4.5.
    If you have any tips.... thanks!!!!

    When a GridColumn is interactively resized "widthChanged" events are dispatched because the column's width property is set.   To track the entire column separator press-drag-release gesture you can listen for GridEvent.SEPARATOR_MOUSE_DOWN,SEPARATOR_MOUSE_DRAG, etc..events on the DataGrid's columnHeaderGroup skin part.   If you wanted to change the way the interactive column resizing works you'd have to subclass DataGrid and override protected methods like separator_mouseDownHandler(event:GridEvent), separator_mouseDragHandler(event:GridEvent).
    - Hans

  • 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

  • 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.

    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.

  • 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 with Dynamic Column Width

    Lets suppose I have a Spark Datagrid with no explicit typicalItem. When the Datagrid is initialized, the column widths are calcualted correctly based on the contents of the dataprovider. However if I add/remove an item from the dataprovider, or modify the one of the objects in the dataprovider, the column widths never update to reflect the change. Is the the correct behavior for a DataGrid? If so, is there any method I can call to force the DataGrid to recalculate and redraw the column widths?

    When Spark DataGrid doesn't have a typicalItem, it uses the first dataProvider item as the typicalItem.  If you change that, the DataGrid won't pick it up immediately. You can invalidate the current typicalItem using dataGrid.invalidateTypicalItem().

  • 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

Maybe you are looking for

  • MacBook will not power up

    Hello all,       Well last week I was watching a video on my MacBook (white, 2010) and it suddenly went dead. I plugged it in and the lights on the charger was green. I could not get it to power up. When I pushed the power button I got nothing. There

  • Pulling services from backend (MM)

    Hi all!! We are currently using SRM 5.0 in a classic scenario. Currently we are trying to pull services from back end using EBP_GET_BACK_END_PRICES  but it is saying this program is meant for materials only. Is there a seperate program to pull servic

  • How do I download GiMP scripts 2.8 on iMac 10.7 successfully?

    I've been researching and trying for days and it seems fairly simple but will not work. Please help!

  • Question on image maps

    Hello, Could anyone tell me how can I transmit the coordinates of a mouse click on an image map in the browser to the server, so that a circle, for example, will be drawn in that specific position? Thank you

  • MP4 clips out of sync when dropping onto my timeline and I can't fix it.

    I'm trying to drop some mp4 clips onto my timeline in CS6 Premier Pro. The problem is the audio keeps going out of sync. It plays fine elsewhere but for some reason doesn't sync up properly in the timeline and I can't fix it. It looks like the video