Skip navigation
bw_syl
Currently Being Moderated

How not to sort datagrid column on double click

Feb 22, 2013 8:01 AM

Tags: #flex-4.6

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,th is.column.columnIndex));

            }

           

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

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

 
Replies
  • Currently Being Moderated
    Feb 22, 2013 12:06 PM   in reply to bw_syl

    You might want to use "alt" or "Ctrl" click and just check on the event to see if one of those is "true".

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 26, 2013 7:26 AM   in reply to bw_syl

    I think you are supposed to mark my answer as "correct", then. 

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points