Feathers Extension DataGrid 1.1.4


The DataGrid displays a row of column headings above a scrollable grid. The grid is arranged as a collection of individual cells arranged in rows and columns. The DataGrid control is designed to support smooth scrolling through large numbers of rows and columns.

Download project, swc, and samples on GitHub

Documentation





To compile this sample download the Feathers SDK (Manager)

Main.mxml

<f:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
  xmlns:f="library://ns.feathersui.com/mxml"
  theme="feathers.extensions.dataGrid.themes.DataGridMetalWorksDesktopTheme"
  creationComplete="creationCompleteHandler(event)"
  xmlns:components="feathers.extensions.dataGrid.*">
  <f:layout>
    <f:VerticalLayout/>
  </f:layout>
  <f:Label id="label2" text="label"/>
  <components:DataGrid id="dataGrid" itemRenderer="{components.CustomDataGridItemRenderer}" change="rowChangeHandler(event)" requestedRowCount="3">
    <components:columns>
          <f:ListCollection>
            <fx:Object dataField="check" headerText="" type="numeric"/>
            <fx:Object dataField="comment" headerText="Comment"/>
            <fx:Object headerText="Email"/>
            <fx:Object headerText="adress"/>
          </f:ListCollection>
    </components:columns>
  </components:DataGrid>
  <f:Button id="button" label="remove item" triggered="button_triggeredHandler(event)"/>
 
  <fx:Script>
    <![CDATA[
          import feathers.data.ListCollection;
          import components.CustomDataGridItemRenderer;
          import feathers.extensions.dataGrid.events.DataGridEvent;
         
          private function creationCompleteHandler( event:Event ):void
          {
            dataGrid.dataProvider = new ListCollection(
            [
                  { check: 1, comment: "comment", label: "mail1", label2: "adress1"  },
                  { check: 0, comment: "comment2", label: "mail2", label2: "adress3"  },
                  { check: 1, comment: "comment", label: "mail4", label2: "adress2"  },
                  { check: 0, comment: "comment2", label: "mail3", label2: "adress4"  }
            ]);
          }
         
          private function button_triggeredHandler( event:Event ):void
          {
            dataGrid.dataProvider.removeItemAt(0);
          }
          private function rowChangeHandler(event:DataGridEvent):void
          {
            trace(event.index);
          }
    ]]>
  </fx:Script>
</f:Application>
 

components/CustomDataGridItemRenderer.mxml

<?xml version="1.0" encoding="utf-8"?>
<components:DataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
  xmlns:f="library://ns.feathersui.com/mxml"
  xmlns:components="feathers.extensions.dataGrid.*">
 
  <fx:Script>
    <![CDATA[
          override public function dataGridChangeHandler():void
          {
            super.dataGridChangeHandler(); //never forget to add this!
           
            checkBox.isSelected = this.data.check == 1 ? true : false;
            textInput.text = this.data.comment;
            label.text = this.data.label;
            label2.text = this.data.label2;
          }
         
          override protected function rowChangeHandler():void
          {
            if(isChanging) return; //never forget to add this!
           
            this.data.check = checkBox.isSelected ? 1 : 0;
            this.data.comment = textInput.text;
           
            super.rowChangeHandler(); //never forget to add this!
          }
    ]]>
  </fx:Script>
 
  <components:layout>
    <f:HorizontalLayout/>
  </components:layout>
   
  <f:Check id="checkBox" change="rowChangeHandler()"/>
  <f:TextInput id="textInput" change="rowChangeHandler()"/>
  <f:Label id="label" text="item renderer"/>
  <f:Label id="label2" text="item renderer"/>
</components:DataGridItemRenderer>
 

0 comment

Name :


Email (not published) :


Comment :

Allowed markup: [html]