Strike-through in a DataGrid

Given so开发者_开发百科me rule I want to strike through an entire row in a DataGrid. Is it possible?

---

The most robust way to make this work , would be to use a custom item-renderer, where overriding the OnUpdateDisplay function, you use a graphic object to draw a horizontal line right between the label of the data-grid item, based on a boolean parameter.

I can write down something like this for a label if you want, but you will have to figure out the internals of making it work with the Datagrid item component.

Please let me know if you want me to paste an example for label.

EDIT (PASTING EXAMPLE)

Create a new flex project, add a new class which extends label.The name of the class is StrikeThroughLabel .Put this in the default package as of now (i.e leave the package field empty)

    package
{
    import mx.controls.Label;

    public class StrikeThroughLabel extends Label
    {
        private var isStriked:Boolean = false;

        public function StrikeThroughLabel()
        {
            super();
        }

        public function set striked(aIsStriked:Boolean):void{
            isStriked =  aIsStriked;
            this.updateDisplayList(this.width, this.height);
        }

        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void{
            super.updateDisplayList(unscaledWidth, unscaledHeight);
            if(isStriked){
                graphics.lineStyle(1,0x0000FF,1,false,"normal",null,null,3.0);
                graphics.lineTo(unscaledWidth,unscaledHeight);
            }else{
                graphics.clear();
            }
        }
    }
}

Once thats done, come to your main.mxml and use the code that follows for mxml:

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="windowedapplication1_creationCompleteHandler(event)"
                        xmlns:local="*">
    <local:StrikeThroughLabel id="strikeThrough" text="Hello" x="129" y="128"/>
    <mx:Script>
        <![CDATA[
            import mx.events.FlexEvent;


            private var isLabelStriked:Boolean = false;

            protected function windowedapplication1_creationCompleteHandler(event:FlexEvent):void
            {
                // TODO Auto-generated method stub
                //this.strikeThrough.striked = true;    
            }


            protected function button1_clickHandler(event:MouseEvent):void
            {
                // TODO Auto-generated method stub
                isLabelStriked = !isLabelStriked;
                this.strikeThrough.striked = isLabelStriked;
            }

        ]]>
    </mx:Script>
    <mx:Button click="button1_clickHandler(event)" id="myButton" label="Toggle"/>
</mx:WindowedApplication>

The above shows you a button and a label, clicking on the button toggles the strikethrough on the label. Please note, right now the strike-through is diagonal, but just a few tweaks with the login of drawing the line, and you should get a horizontal strike-throught.

---

Am not sure if this help or it , but only this one comes to my mind.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()">
<mx:Script>
    <![CDATA[

        import mx.collections.ArrayCollection;

        [Bindable]
        private var stepsObjs:ArrayCollection = new ArrayCollection();
        private function init():void
        {
            stepsObjs.addItem(new CObj(100,100,true));
            stepsObjs.addItem(new CObj(700,800,false));
        }

    ]]>
</mx:Script>

<mx:DataGrid id="dg" dataProvider="{stepsObjs}" click="{dg.selectedItem.strike = !dg.selectedItem.strike}" editable="false">
    <mx:columns>
        <mx:DataGridColumn>
            <mx:itemRenderer>
                <mx:Component>
                    <mx:Canvas width="100%" 
                        height="100%" 
                        horizontalScrollPolicy="off" 
                        verticalScrollPolicy="off">
                        <mx:Script>
                            <![CDATA[
                                override public function set data( value:Object ) : void {
                                    super.data = value;
                                }
                            ]]>
                        </mx:Script>
                        <mx:TextArea text="{data.x}" borderStyle="none" editable="false"/>
                        <mx:HRule strokeColor="red" width="100%" visible="{data.strike}" y="{this.height/2}"/>
                    </mx:Canvas>
                </mx:Component>
            </mx:itemRenderer>
        </mx:DataGridColumn>
        <mx:DataGridColumn>
            <mx:itemRenderer>
                <mx:Component>
                    <mx:Canvas width="100%" 
                        height="100%" 
                        horizontalScrollPolicy="off" 
                        verticalScrollPolicy="off">
                        <mx:Script>
                            <![CDATA[
                                override public function set data( value:Object ) : void {
                                    super.data = value;
                                }
                            ]]>
                        </mx:Script>
                        <mx:TextArea text="{data.y}" borderStyle="none" editable="false"/>
                        <mx:HRule strokeColor="red" width="100%" visible="{data.strike}" y="{this.height/2}"/>
                    </mx:Canvas>
                </mx:Component>
            </mx:itemRenderer>
        </mx:DataGridColumn>

    </mx:columns>
</mx:DataGrid>  
</mx:Application>

CObj Class

package
{
    [Bindable]  
    public class CObj
    {
        public function CObj(x:Number , y:Number , str:Boolean)
        {
            this.x = x;
            this.y = y;
            this.strike = str;

        }
        public var x:Number;
        public var y:Number;
        public var strike:Boolean;

    }
}