Drag selection in spark datagrid?

Is there an easy way to enable a spark DataGrid to use drag selection, similar to how you can select cells in Excel or Google Docs? Or will I need to track mouse movements and manually manipulate the selectedCells?
Thanks!
-Aaron

Couldn't find a built in way to do this, but it turned out to be pretty easy thanks to the GridEvent classes that solve the challenge of know what row/column index the mouse is interacting with. My final solution:
A class that extends spark::DataGrid
private var _allowDragSelection:Boolean = false;
private var dragSelectionAnchor:CellPosition;
private var dragSelectionStarted:Boolean;
* If true and selectionMode is GridSelectionMode.MULTIPLE_CELLS the user can drag their
* mouse to select a rectangular area of cells, just like Excel or Google Docs.
public function get allowDragSelection():Boolean { return this._allowDragSelection; }
public function set allowDragSelection(value:Boolean):void {
          if(this._allowDragSelection == value)
                    return;
          this._allowDragSelection = value;
          if(this.allowDragSelection)
                    this.addEventListener(GridEvent.GRID_MOUSE_DOWN, this.handleGridMouseDown);
          else
                    this.removeEventListener(GridEvent.GRID_MOUSE_DOWN, this.handleGridMouseDown);
private function handleGridMouseDown(e:GridEvent):void {
          if(this.selectionMode != GridSelectionMode.MULTIPLE_CELLS)
                    return;
          this.dragSelectionAnchor = new CellPosition(e.rowIndex, e.columnIndex);
          this.dragSelectionStarted = false;
          this.addEventListener(GridEvent.GRID_MOUSE_DRAG, this.handleGridMouseDrag);
          this.stage.addEventListener(MouseEvent.MOUSE_UP, this.handleDragMouseUp);
private function handleGridMouseDrag(e:GridEvent):void {
          // don't start processing selection drag until mouse has left the selection anchor
          if(!this.dragSelectionStarted && e.rowIndex == this.dragSelectionAnchor.rowIndex && e.columnIndex == this.dragSelectionAnchor.columnIndex)
                    return;
          // once started, process changes even if the user drags back over the anchor
          this.dragSelectionStarted = true;
          // local to avoid expensive getter cost
          const selectedCells:Vector.<CellPosition> = e.grid.selectedCells;
          // determine the selection rectangle from the anchor to the current cell
          const rowFromIndex:int = Math.min(this.dragSelectionAnchor.rowIndex, e.rowIndex);
          const rowToIndex:int = Math.max(this.dragSelectionAnchor.rowIndex, e.rowIndex);
          const colFromIndex:int = Math.min(this.dragSelectionAnchor.columnIndex, e.columnIndex);
          const colToIndex:int = Math.max(this.dragSelectionAnchor.columnIndex, e.columnIndex);
          // create new cell positions selection vector, and track if any new cell is added
          var cells:Vector.<CellPosition> = new Vector.<CellPosition>();
          var cellsChanged:Boolean = false;
          for(var row:int = rowFromIndex; row <= rowToIndex; row++){
                    for(var col:int = colFromIndex; col <= colToIndex; col++){
                              var cell:CellPosition = new CellPosition(row, col);
                              cells.push(cell);
                              cellsChanged = cellsChanged || !selectedCells.some(function(c:CellPosition, i:int, v:Vector.<CellPosition>):Boolean {
                                        return c.rowIndex == cell.rowIndex && c.columnIndex == cell.columnIndex;
          // assign the new selection only if it changed (Flex is pretty slow here with big selections)
          if(cellsChanged || selectedCells.length != cells.length){
                    this.selectedCells = cells;
                    // maintain the selection anchor for any following SHIFT click selection
                    this.grid.anchorRowIndex = rowFromIndex;
                    this.grid.anchorColumnIndex = colFromIndex;
private function handleDragMouseUp(e:MouseEvent):void {
          this.removeEventListener(GridEvent.GRID_MOUSE_DRAG, this.handleGridMouseDrag);
          this.stage.removeEventListener(MouseEvent.MOUSE_UP, this.handleDragMouseUp);
Cheers.
-Aaron

Similar Messages

  • Enable multiple selection in spark datagrid

    Hi guys, I am trying to enable multiple selection in my datagrid. I tried allowMultipleSelection=true but it didn't have that attribute on spark component. Anyone knows how to do it? Thanks a lot.

    Use selectionMode="mutipleRows"
    http://help.adobe.com/en_US/flex/using/WS0ab2a460655f2dc3-427f401412c60d04dca-7ff8.html

  • 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 Selection change Event

    starting to work with the spark datagrid.
    I want to send off a web service using the values of a row right after they get done editing the row and leave it.
    No more change event that I can see like MX and gridItemEditorSessionSaveHandler kicks on every tab between cells
    if I use event.currentTarget.selectedItem
    Selection Change gives me the new row.
    Selection Changing only kicks with mouse row changes not tabs
    Suggestions?
    I want to register the row with both mouse (on a numeric stepper) and tab(for text fields) events.
    Thanks
    Dan Pride

    Hi Dan,
    Try valueCommit event handler, but I'm not 100% sure that is triggered upon dataProvider data changes.
    Another way is to listen for changes in the dataProvider variable.

  • 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

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

  • How to filter a spark datagrid using a checkbox?

    Hi i want to know how can i filter a spark datagrid using  a check. I have a column by the name status on the datagrid, which can be active or inactive. When i check the checkbox i should be able to see all the records and when i uncheck it i should only be able to see all the records with the status ACTIVE...

    Then, try to add another attribute in your SELECT VO statement, which truncates the original date_and_time field:
       SELECT.... TRUNC(DATE_AND_TIME) as truncated_dateAfter that, put reference to that attribute in the filter facet, as follows
             <f:facet name="filter">
                      <af:inputDate value="#{vs.filterCriteria.TruncatedDate}" id=.../>
             </facet>Do not forget to add the TruncatedDate attribute in the <tree...> binding in the pageDef, along with others VO attributes. Do that manually.

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

  • [svn:fx-trunk] 10925: Redo the implementation of dragging & selection being handled upon mouseDown in List .

    Revision: 10925
    Author:   [email protected]
    Date:     2009-10-07 18:52:06 -0700 (Wed, 07 Oct 2009)
    Log Message:
    Redo the implementation of dragging & selection being handled upon mouseDown in List. Evtim will fix up the behavior such that in a multi-select action, mousing down in a selected item will drag the selected set while mousing down in a non-selected item will select that item anew.
    QA: Yes, but don't include in those 3 tests till Evtim checks in, hopefully tomorrow
    Doc: No
    Checkintests: Pass
    Other tests: List tests pass, List D&D tests pass with 3 exclusions.
    Noteworthy for Integration: No
    Modified Paths:
        flex/sdk/trunk/frameworks/projects/spark/src/spark/components/DropDownList.as
        flex/sdk/trunk/frameworks/projects/spark/src/spark/components/List.as

  • Spark Datagrid on a mobile application, problem handling scrolling

    I  have a spark datagrid on a mobile application, I set the
    interactionMode="touch"
    and the dataGrid scrolling is good, I got some problems adding a selectionChange eventListener to it, because scrolling the dataGrid will automatically change the selection and instead simply scrolling it, the function binded will start...
    How can I prevent that?
    <s:DataGrid id="lista"  top="350" bottom="50" right="0" left="0"
    dataProvider="{listaPdv}"
    verticalScrollPolicy="auto"
    rowHeight="100"
    selectionColor="#b64947"
    skinClass="skins.dataGridSkin"
    itemRenderer="components.dataGridItemRendererText"
    fontFamily="Verdana"
    fontSize="30"
    interactionMode="touch"
    horizontalScrollPolicy="auto"
    selectionChange="datagrid_select(event)">
    Help... It's really annoying and I cannot scroll the datagrid...

    I solved using a workaround... instead of binding the selectionChange event, I binded the mouseDown and mouseUp then check the time between the two actions and if the time is less then a defined value the selectionChange event is dispatched...
    <s:DataGrid id="grigliaData"
       sortableColumns="false"
       rowHeight="100"
       interactionMode="touch"
       mouseDown="grigliaData_mouseDownHandler(event)"
       mouseUp="grigliaData_mouseUpHandler(event)"
       top="230" left="5" right="5" bottom="50"
       dataProvider="{listaEventi}" width="100%" height="100%">
      //AS Code
            private var _lastClickEvent:int;
            protected function grigliaData_mouseDownHandler(event:MouseEvent):void
                _lastClickEvent = getTimer();
            protected function grigliaData_mouseUpHandler(event:MouseEvent):void
                if (getTimer() < _lastClickEvent + 200) // 200 = Dalay
                                   // return selectedIndex

  • Spark DataGrid scrollToIndex?

    In Flex I used to use the dataGrid.scrollToIndex(XX) to scroll down to a selected row.
    I can't seem to get anything to work for the Spark DataGrid in FB4.5.  Searching around I tried to impliment this:
    dataGrid.ensureCellIsVisible(selectedSlideIndex);
    dataGrid.setSelectedIndex(selectedSlideIndex);
    The selectedSlideIndex is set when a row is selected to store the int.
    I can't get the DataGrid to scroll to the index, OR select the index..
    So what is the Spark DataGrid version of the MX DataGrid.scrollToIndex?

    Try the ensureCellIsVisibleMethod
    http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/components/DataGr id.html#ensureCellIsVisible()
    http://flexonblog.wordpress.com/2011/05/30/tips-on-spark-list-control-and-spark-datagrid-c ontrol/
    Hope this helps.

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

  • Help! Spark Datagrid overriding a method

    Hi!
    I need help!
    Do you know how to override a select item/row method in a spark datagrid? In mx datagrid, the method is selectItem, how about for the spark datagrid?

    You didn't override the method handleException in JBDCBatchJob, you just overloaded it. So int JBDCBatchJob, you actually had two versions of handleException, one that took a parameter of the type Exception, one that took a parameter of the type SQLException.
    So, in SimpleJDBCBatchJob, you need to have a catch block like
    try {
    // statements that may throw SQLException or in general Exception
    catch (SQLException sqle) {
    handleException( sqle );
    catch (Exception e) {
    handleException( e );
    This would call your handleException in BatchJob if a general exception was thrown, and the handleException in JBDCBatchJob if a SQLException was thrown from the try block.
    Hope that makes things clearer for you.
    Alan

  • 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

Maybe you are looking for