4 Replies Latest reply on Dec 15, 2011 9:11 PM by kevinklin

    Spark Datagrid

    Yue_Hong Level 1



      I need your help on spark component datagrid:

      1. How to have double click event in the datagrid?

      2. How to get the column data of the column is clicked?

      3. How to get specific column data (for example, row 3, first column)?


      I have tried to do the searching on internet, but mostly example I found is for mx component and it is not working with spark datagrid. Hope to get some help here. Thanks.

        • 1. Re: Spark Datagrid
          Yue_Hong Level 1

          Hello? Do anyone knows how to do it? Any help is very appreciated. Thanks.


          Btw, how can I have the datagrid to be sortable? I have tried with sortableColumns and sortable, but it still doesn't work.

          • 2. Re: Spark Datagrid
            kevinklin Adobe Employee

            1. Listen for the gridDoubleClick event.

            2. Listen for the gridClick event. The event object will have "item" which is the data for that row. If you want the column-specific field, use the dataField of the column to get that field in the object.

            3. Each row represents a data object, and each cell represents a specific field in that data object. You can get the data object using your dataProvider and then using the dataField of the column to get the field associated with that column. For example:


            var dataObj:Object = dataGrid.dataProvider.getItemAt(rowIndex); // get data for this row.

            var column:GridColumn = dataGrid.columns.getItemAt(columnIndex); // get column object.

            var dataInColumn:Object = dataObj[column.dataField];


            As for sorting, set sortableColumns="true" on your DataGrid. Also, make sure your dataProvider is an ICollectionView. You can just use ArrayCollection. ArrayList does not work with sorting.

            1 person found this helpful
            • 3. Re: Spark Datagrid
              Yue_Hong Level 1

              Thanks a lot for your reply. Now I manage to the sorting works. But the doubleclick is still not working. Here is my code:


              <?xml version="1.0" encoding="utf-8"?>

              <s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"









                          import mx.controls.Alert;

                          import spark.events.GridEvent;


                          protected function datagrid1_gridClickHandler(event:GridEvent):void


                              clickdetail.text = "Column Index: "+event.columnIndex+"\r"+"Row: "+event.rowIndex+"\r"+"Event Type: "+event.grid+"\r"+"Label: "+event.itemRenderer.label;               



                          protected function datagrid1_gridDoubleClickHandler(event:GridEvent):void









                      <!-- Place non-visual elements (e.g., services, value objects) here -->


                  <s:DataGrid requestedRowCount="4" id="dgrid" gridClick="datagrid1_gridClickHandler(event)" gridDoubleClick="datagrid1_gridDoubleClickHandler(event)">



                              <s:GridColumn dataField="dataField1" headerText="Column 1"></s:GridColumn>

                              <s:GridColumn dataField="dataField2" headerText="Column 2"></s:GridColumn>

                              <s:GridColumn id="dataField3" dataField="dataField3" headerText="Column 3"></s:GridColumn>




                          <fx:Object dataField1="Sample Data" dataField2="Sample Data" dataField3="Sample Data"></fx:Object>



                          <fx:Object dataField1="data1a" dataField2="data1b" dataField3="data1c"></fx:Object>

                          <fx:Object dataField1="data2a" dataField2="data2b" dataField3="data2c"></fx:Object>

                          <fx:Object dataField1="data3a" dataField2="data3b" dataField3="data3c"></fx:Object>

                          <fx:Object dataField1="data4a" dataField2="data4b" dataField3="data4c"></fx:Object>



                  <mx:Button label="Toggle Column 3"

                             click="dataField3.visible = !dataField3.visible;" />

                  <s:Label id="clickdetail"/>




              Why is double click function is not working? Btw, how can I have the user to be able to edit the column when they double click on the field? Thanks.

              • 4. Re: Spark Datagrid
                kevinklin Adobe Employee

                You also need to have doubleClickEnabled="true". I think for editing, you can just set editable="true". The default should be double click I believe.