3 Replies Latest reply on Feb 26, 2013 7:26 AM by DeanLoganBH

    How not to sort datagrid column on double click

    bw_syl

      Hello,

       

      I am currently building an application containing a datagrid for data representation. I've created a custom datagridheader in order to add a input text for filtering the columns (see code below).

       

      My goal is to hide the textinput, and then show it on a double click on the header. So i would like to know how to avoid the sort of this column each time i double click.?

       

       

      <?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" resize="onColumnResize(event)" clipAndEnableScrolling="true" doubleClick="managefilterField(event)">

         

          <fx:Declarations>

              <!--- The default value of the <code>sortIndicator</code> property.

              It must be an IFactory for an IVisualElement.       

             

              <p>This value is specified in a <code>fx:Declaration</code> block and can be overridden

              by a declaration with <code>id="defaultSortIndicator"</code>

              in an MXML subclass.</p>

             

              @langversion 3.0

              @playerversion Flash 10

              @playerversion AIR 2.0

              @productversion Flex 4.5

              -->

              <fx:Component id="defaultSortIndicator">

                  <s:Path data="M 3.5 7.0 L 0.0 0.0 L 7.0 0.0 L 3.5 7.0" implements="spark.components.gridClasses.IGridVisualElement">

                      <fx:Script>

                          <![CDATA[

                              import spark.components.DataGrid;

                              import spark.components.Grid;

                             

                              /**

                               *  @private

                               */

                              public function prepareGridVisualElement(grid:Grid, rowIndex:int, columnIndex:int):void

                              {

                                  const dataGrid:DataGrid = grid.dataGrid;

                                  if (!dataGrid)

                                      return;

                                 

                                  const color:uint = dataGrid.getStyle("symbolColor");

                                  arrowFill1.color = color;

                                  arrowFill2.color = color;

                              }

                             

                             

                             

                          ]]>

                      </fx:Script>

                     

                      <s:fill>

                          <s:RadialGradient rotation="90" focalPointRatio="1">   

                              <!--- @private -->

                              <s:GradientEntry id="arrowFill1" color="0" alpha="0.6" />

                              <!--- @private -->

                              <s:GradientEntry id="arrowFill2" color="0" alpha="0.8" />

                          </s:RadialGradient>

                      </s:fill>

                  </s:Path>

              </fx:Component>

             

              <!--- Displays the renderer's label property, which is set to the column's <code>headerText</code>.

              It must be an instance of a <code>TextBase</code>, like <code>s:Label</code>.

             

              <p>This visual element is added to the <code>labelDisplayGroup</code> by the renderer's

              <code>prepare()</code> method.   Any size/location constraints specified by the labelDisplay

              define its location relative to the labelDisplayGroup.</p>

             

              <p>This value is specified with a <code>fx:Declaration</code> and can be overridden

              by a declaration with <code>id="labelDisplay"</code>

              in an MXML subclass.</p>

             

             

              @langversion 3.0

              @playerversion Flash 10

              @playerversion AIR 2.0

              @productversion Flex 4.5

              -->

              <s:Label id="labelDisplay"

                       verticalCenter="1" left="0" right="0" top="0" bottom="0"

                       textAlign="start"

                       fontWeight="bold"

                       verticalAlign="middle"

                       maxDisplayedLines="1"

                       showTruncationTip="true" />

          </fx:Declarations>

         

          <fx:Script>

              <![CDATA[

                  import net.awl.ismp.console.components.misc.FilterCriteria;

                  import net.awl.ismp.console.events.ColumnFilteredEvent;

                  import net.awl.ismp.console.events.ColumnResizedEvent;

                  import mx.events.ResizeEvent;

                  import spark.components.gridClasses.IGridVisualElement;

                  import mx.core.IVisualElement;

                 

                  import spark.components.DataGrid;

                  import spark.components.GridColumnHeaderGroup;

                  import spark.components.gridClasses.GridColumn;

                  import spark.primitives.supportClasses.GraphicElement;

                 

                  // chrome color constants and variables

                  private static const DEFAULT_COLOR_VALUE:uint = 0xCC;

                  private static const DEFAULT_COLOR:uint = 0xCCCCCC;

                  private static const DEFAULT_SYMBOL_COLOR:uint = 0x000000;

                 

                  private static var colorTransform:ColorTransform = new ColorTransform();

                 

                  /**

                   *  @private

                   */

                  private function dispatchChangeEvent(type:String):void

                  {

                      if (hasEventListener(type))

                      {

                          dispatchEvent(new Event(type));                   

                      }

                  }           

                 

                 

                  protected function onColumnResize(event:ResizeEvent):void

                  {

                      dispatchEvent(new ColumnResizedEvent(ColumnResizedEvent.COLUMNRESIZED_EVT,this.width,this.column.columnInde x));

                  }

                 

                  //----------------------------------

                  //  maxDisplayedLines

                  //----------------------------------

                 

                  private var _maxDisplayedLines:int = 1;

                 

                  [Bindable("maxDisplayedLinesChanged")]

                  [Inspectable(minValue="-1")]

                 

                  /**

                   *  The value of this property is used to initialize the

                   *  <code>maxDisplayedLines</code> property of this renderer's

                   *  <code>labelDisplay</code> element.

                   *

                   *  @copy spark.components.supportClasses.TextBase#maxDisplayedLines

                   *

                   *  @default 1

                   *

                   *  @langversion 3.0

                   *  @playerversion Flash 10

                   *  @playerversion AIR 1.5

                   *  @productversion Flex 4.5

                   */

                  public function get maxDisplayedLines():int

                  {

                      return _maxDisplayedLines;

                  }

                 

                  override protected function stateChanged(oldState:String, newState:String, recursive:Boolean):void

                  {

                      trace("state changed from : "+oldState+" to "+newState);

                      super.stateChanged(oldState, newState, recursive);

                  }

                 

                 

                 

                 

                  /**

                   *  @private

                   */

                  public function set maxDisplayedLines(value:int):void

                  {

                      if (value == _maxDisplayedLines)

                          return;

                     

                      _maxDisplayedLines = value;

                      if (labelDisplay)

                          labelDisplay.maxDisplayedLines = value;

                     

                      invalidateSize();

                      invalidateDisplayList();

                     

                      dispatchChangeEvent("maxDisplayedLinesChanged");

                  }

                 

                  //----------------------------------

                  //  sortIndicator

                  //----------------------------------

                 

                  private var _sortIndicator:IFactory;

                  private var sortIndicatorInstance:IVisualElement;

                 

                  [Bindable("sortIndicatorChanged")]

                 

                  /**

                   *  A visual element that's displayed when the column is sorted.

                   *

                   *  <p>The sortIndicator visual element is added to the <code>sortIndicatorGroup</code>

                   *  by this renderer's <code>prepare()</code> method.  Any size/location constraints

                   *  specified by the sortIndicator define its location relative to the sortIndicatorGroup.</p>

                   *

                   *  @default null

                   *

                   *  @langversion 3.0

                   *  @playerversion Flash 10

                   *  @playerversion AIR 1.5

                   *  @productversion Flex 4.5

                   */

                  public function get sortIndicator():IFactory

                  {

                      return (_sortIndicator) ? _sortIndicator : defaultSortIndicator;

                  }

                         

                  /**

                   *  @private

                   */

                  public function set sortIndicator(value:IFactory):void

                  {

                      trace("setSortIndicator");

                      if (_sortIndicator == value)

                          return;

                     

                      _sortIndicator = value;

                      if (sortIndicatorInstance)

                      {

                          sortIndicatorGroup.includeInLayout = false;

                          sortIndicatorGroup.removeElement(sortIndicatorInstance);

                          sortIndicatorInstance = null;

                      }

                     

                      invalidateDisplayList();

                      dispatchChangeEvent("sortIndicatorChanged");

                  }

                 

                  /**

                   *  @private

                   *  Create and add the sortIndicator to the sortIndicatorGroup and the

                   *  labelDisplay into the labelDisplayGroup.

                   */

                  override public function prepare(hasBeenRecycled:Boolean):void

                  {

                      trace("prepare !!");

                      super.prepare(hasBeenRecycled);

                     

                      if (labelDisplay && labelDisplayGroup && (labelDisplay.parent != labelDisplayGroup))

                      {

                          labelDisplayGroup.removeAllElements();

                          labelDisplayGroup.addElement(labelDisplay);

                      }

       

                      trace(sortIndicator);

                      trace("sortIndicatorInstance : "+sortIndicatorInstance);

                      const column:GridColumn = this.column;

                      if (sortIndicator && column && column.grid && column.grid.dataGrid && column.grid.dataGrid.columnHeaderGroup)

                      {

                          const dataGrid:DataGrid = column.grid.dataGrid;

                          const columnHeaderGroup:GridColumnHeaderGroup = dataGrid.columnHeaderGroup;

                         

                          if (columnHeaderGroup.isSortIndicatorVisible(column.columnIndex))

                          {

                              if (!sortIndicatorInstance)

                              {

                                  sortIndicatorInstance = sortIndicator.newInstance();

                                  sortIndicatorGroup.addElement(sortIndicatorInstance);

                                  chromeColorChanged = true;

                                  invalidateDisplayList();

                              }

                             

                              // Initialize sortIndicator

                              sortIndicatorInstance.visible = true;

                              const gridVisualElement:IGridVisualElement = sortIndicatorInstance as IGridVisualElement;

                              if (gridVisualElement)

                                  gridVisualElement.prepareGridVisualElement(column.grid, -1, column.columnIndex);

                             

                              sortIndicatorGroup.includeInLayout = true;

                              sortIndicatorGroup.scaleY = (column.sortDescending) ? 1 : -1;

                          }

                          else

                          {

                              if (sortIndicatorInstance)

                              {

                                  sortIndicatorGroup.removeElement(sortIndicatorInstance);

                                  sortIndicatorGroup.includeInLayout = false;

                                  sortIndicatorInstance = null;

                              }

                          }

                      }

                  }

                 

                  private var chromeColorChanged:Boolean = false;

                  private var colorized:Boolean = false;

                 

                  /**

                   *  @private

                   *  Apply chromeColor style.

                   */

                  override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void

                  {

                      //trace("update display list");

                      // Apply chrome color

                      if (chromeColorChanged)

                      {

                          var chromeColor:uint = getStyle("chromeColor");

                         

                          if (chromeColor != DEFAULT_COLOR || colorized)

                          {         

                              colorTransform.redOffset = ((chromeColor & (0xFF << 16)) >> 16) - DEFAULT_COLOR_VALUE;

                              colorTransform.greenOffset = ((chromeColor & (0xFF << 8)) >> 8) - DEFAULT_COLOR_VALUE;

                              colorTransform.blueOffset = (chromeColor & 0xFF) - DEFAULT_COLOR_VALUE;

                              colorTransform.alphaMultiplier = alpha;

                             

                              transform.colorTransform = colorTransform;

                             

                              var exclusions:Array = [labelDisplay, sortIndicatorInstance];

                             

                              // Apply inverse colorizing to exclusions

                              if (exclusions && exclusions.length > 0)

                              {

                                  colorTransform.redOffset = -colorTransform.redOffset;

                                  colorTransform.greenOffset = -colorTransform.greenOffset;

                                  colorTransform.blueOffset = -colorTransform.blueOffset;

                                 

                                  for (var i:int = 0; i < exclusions.length; i++)

                                  {

                                      var exclusionObject:Object = exclusions[i];

                                     

                                      if (exclusionObject &&

                                          (exclusionObject is DisplayObject ||

                                              exclusionObject is GraphicElement))

                                      {

                                          colorTransform.alphaMultiplier = exclusionObject.alpha;

                                          exclusionObject.transform.colorTransform = colorTransform;

                                      }

                                  }

                              }

                             

                              colorized = true;

                          }

                         

                          chromeColorChanged = false;

                      }

                     

                      super.updateDisplayList(unscaledWidth, unscaledHeight);

                  }

                 

                  /**

                   *  @private

                   */

                  override public function styleChanged(styleProp:String):void

                  {

                      var allStyles:Boolean = !styleProp || styleProp == "styleName";

                     

                      super.styleChanged(styleProp);

                     

                      if (allStyles || styleProp == "chromeColor")

                      {

                          chromeColorChanged = true;

                          invalidateDisplayList();

                      }

                  }

                             

                  protected function managefilterField(event:MouseEvent):void

                  {

                      trace("double click sortIndicator : "+this.sortIndicatorInstance);

                      this.filterInput.visible=!this.filterInput.visible;

                      this.filterInput.includeInLayout=this.filterInput.visible;

                      this.filterSpacer.visible=this.filterInput.visible;

                      this.filterSpacer.includeInLayout=this.filterInput.visible;

                      if(!this.filterInput.visible)

                      {

                          this.filterInput.text="";

                          dispatchEvent(new ColumnFilteredEvent(ColumnFilteredEvent.COLUMNFILTERED_EVT,new FilterCriteria(this.column.dataField,this.filterInput.text)));

                      }

                      this.filterInput.setStyle("borderColor",0xFF6319);

                      this.filterInput.setStyle("focusColor",0xFF6319);

                      //this.filterInput.setStyle(

                  }

                 

                  protected function onTextInputSelection(event:MouseEvent):void

                  {

                      event.stopImmediatePropagation();

                      this.filterInput.setStyle("borderColor",0xFF6319);

                      this.filterInput.setStyle("focusColor",0xFF6319);

                  }

                 

                  protected function onKeyUp(event:KeyboardEvent):void

                  {

                      if(event.charCode==Keyboard.ENTER)

                      {

                          stage.focus=null;

                      }

                  }

                 

                  protected function onFocusOut(event:FocusEvent):void

                  {

                      this.filterInput.setStyle("borderColor",0x00ff00);

                      this.filterInput.setStyle("focusColor",0x70B2EE);

                      dispatchEvent(new ColumnFilteredEvent(ColumnFilteredEvent.COLUMNFILTERED_EVT,new FilterCriteria(this.column.dataField,this.filterInput.text)));

                  }

                             

              ]]>

          </fx:Script>

         

          <s:states>

              <s:State name="normal" />

              <s:State name="hovered" />

              <s:State name="down" />

          </s:states>     

         

         

          <!-- layer 1: shadow -->

          <!--- @private -->

          <s:Rect id="shadow" left="-1" right="-1" top="-1" bottom="-1" radiusX="2">

              <s:fill>

                  <s:LinearGradient rotation="90">

                      <s:GradientEntry color="0x000000"

                                       color.down="0xFFFFFF"

                                       alpha="0.01"

                                       alpha.down="0" />

                      <s:GradientEntry color="0x000000"

                                       color.down="0xFFFFFF"

                                       alpha="0.07"

                                       alpha.down="0.5" />

                  </s:LinearGradient>

              </s:fill>

          </s:Rect>

         

          <!-- layer 2: fill -->

          <!--- @private -->

          <s:Rect id="fill" left="0" right="0" top="0" bottom="0">

              <s:fill>

                  <s:LinearGradient rotation="90">

                      <s:GradientEntry color="0xFFFFFF"

                                       color.hovered="0xBBBDBD"

                                       color.down="0xAAAAAA"

                                       alpha="0.85" />

                      <s:GradientEntry color="0xD8D8D8"

                                       color.hovered="0x9FA0A1"

                                       color.down="0x929496"

                                       alpha="0.85" />

                  </s:LinearGradient>

              </s:fill>

          </s:Rect>

         

          <!-- layer 3: fill lowlight -->

          <!--- @private -->

          <s:Rect id="lowlight" left="0" right="0" top="0" bottom="0">

              <s:fill>

                  <s:LinearGradient rotation="270">

                      <s:GradientEntry color="0x000000" ratio="0.0" alpha="0.0627" />

                      <s:GradientEntry color="0x000000" ratio="0.48" alpha="0.0099" />

                      <s:GradientEntry color="0x000000" ratio="0.48001" alpha="0" />

                  </s:LinearGradient>

              </s:fill>

          </s:Rect>

         

          <!-- layer 4: fill highlight -->

          <!--- @private -->

          <s:Rect id="highlight" left="0" right="0" top="0" bottom="0">

              <s:fill>

                  <s:LinearGradient rotation="90">

                      <s:GradientEntry color="0xFFFFFF"

                                       ratio="0.0"

                                       alpha="0.33"

                                       alpha.hovered="0.22"

                                       alpha.down="0.12"/>

                      <s:GradientEntry color="0xFFFFFF"

                                       ratio="0.48"

                                       alpha="0.33"

                                       alpha.hovered="0.22"

                                       alpha.down="0.12" />

                      <s:GradientEntry color="0xFFFFFF"

                                       ratio="0.48001"

                                       alpha="0" />

                  </s:LinearGradient>

              </s:fill>

          </s:Rect> 

         

          <!-- layer 5: highlight stroke (all states except down) -->

          <!--- @private -->

          <s:Rect id="highlightStroke" left="0" right="0" top="0" bottom="0" excludeFrom="down">

              <s:stroke>

                  <s:LinearGradientStroke rotation="90" weight="1">

                      <s:GradientEntry color="0xFFFFFF" alpha.hovered="0.22" />

                      <s:GradientEntry color="0xD8D8D8" alpha.hovered="0.22" />

                  </s:LinearGradientStroke>

              </s:stroke>

          </s:Rect>

         

          <!-- layer 6: highlight stroke (down state only) -->

          <!--- @private -->

          <s:Rect id="hldownstroke1" left="0" right="0" top="0" bottom="0" includeIn="down">

              <s:stroke>

                  <s:LinearGradientStroke rotation="90" weight="1">

                      <s:GradientEntry color="0x000000" alpha="0.25" ratio="0.0" />

                      <s:GradientEntry color="0x000000" alpha="0.25" ratio="0.001" />

                      <s:GradientEntry color="0x000000" alpha="0.07" ratio="0.0011" />

                      <s:GradientEntry color="0x000000" alpha="0.07" ratio="0.965" />

                      <s:GradientEntry color="0x000000" alpha="0.00" ratio="0.9651" />

                  </s:LinearGradientStroke>

              </s:stroke>

          </s:Rect>

          <!--- @private -->

          <s:Rect id="hldownstroke2" left="1" right="1" top="1" bottom="1" includeIn="down">

              <s:stroke>

                  <s:LinearGradientStroke rotation="90" weight="1">

                      <s:GradientEntry color="0x000000" alpha="0.09" ratio="0.0" />

                      <s:GradientEntry color="0x000000" alpha="0.00" ratio="0.0001" />

                  </s:LinearGradientStroke>

              </s:stroke>

          </s:Rect>

         

          <!--<s:Rect id="fill" left="0" right="0" top="0" bottom="0">

              <s:fill>

                  <s:LinearGradient rotation="90">

                      <s:GradientEntry color.normal="0xf9f9f9" color.hovered="0xfcfdfa"

                                       color.down="0xdceac2" alpha="0.85" />

                      <s:GradientEntry color.normal="0xeaeaea" color.hovered="0xdceac2"

                                       color.down="0xd2e1b5" alpha="0.85" />

                  </s:LinearGradient>

              </s:fill>

          </s:Rect>-->

         

          <!--<s:VGroup left="7" right="7" top="5" bottom="5" gap="6" verticalAlign="middle">

              <s:TextInput width="100%" />

              <s:HGroup width="100%">

                  <s:Group id="labelDisplayGroup" width="100%" />

                  <s:Group id="sortIndicatorGroup" includeInLayout="false" />

              </s:HGroup>

          </s:VGroup>-->

         

          <s:VGroup verticalAlign="middle" left="7" top="5" right="7" bottom="5" gap="2" >

       

              <s:TextInput id="filterInput" width="100%" visible="false" includeInLayout="false" keyUp="onKeyUp(event)" focusOut="onFocusOut(event)" click="onTextInputSelection(event)"/>

              <s:Spacer id="filterSpacer" visible="false" includeInLayout="false" height="5" />

             

          <s:HGroup width="100%" height="100%" verticalAlign="middle">

             

              <s:Group id="labelDisplayGroup" width="100%" />

             

              <s:Group id="sortIndicatorGroup" includeInLayout="false" />

             

          </s:HGroup>

          </s:VGroup>

         

         

      </s:GridItemRenderer>