2 Replies Latest reply on Sep 11, 2008 5:35 AM by EvolvedDSM

    Toggle itemRenderer button to text in datagrid?

    EvolvedDSM Level 2
      I have a datagrid that uses an itemRenderer to display a button down a column. The column holds a time value (ex: 4:30 pm). What I want is for the datagrid to display a button first, and then when the user clicks on the button, it sets the current time for that item-column and the time will then display instead of the button.

      So...
      button displays. User clicks button. Button changes to text that displays current time.
      I only need to see how a toggle like this can happen. The rest I can figure out. thanks
        • 1. Re: Toggle itemRenderer button to text in datagrid?
          ntsiii Level 3
          Where are you stuck?
          I would envision implementing this using states or viewStack.
          Tracy
          • 2. Re: Toggle itemRenderer button to text in datagrid?
            EvolvedDSM Level 2
            Ugh, well Tracy I found a very crude work-around. I'll post my code here and see if you can help clean it up or if it's as good as it gets:

            <datagrid....>
            <datagridcolumn .... itemRenderer="comp.toggle"/> // points to component 'toggle.mxml'

            <!-- toggle.mxml script -->

            <mx:Script>
            <![CDATA[
            import mx.controls.Button;
            import mx.controls.Label;
            import mx.events.FlexEvent;

            [Bindable]
            private var notifyButton:Button;
            [Bindable]
            private var notifyLabel:Label;

            [Embed("../assets/images/clock.png")]
            public var buttonIcon: Class;

            public function initApp():void{
            addEventListener("dataChange", changeHandler);
            if(data.timeNotify == ''){
            notifyButton = new Button();
            notifyButton.setStyle("icon", buttonIcon);
            notifyButton.x = 0;
            notifyButton.y = 0;
            addChild(notifyButton);
            notifyButton.addEventListener(MouseEvent.CLICK, buttonClickHandler);
            }else{
            notifyLabel = new Label();
            notifyLabel.text = data.timeNotify;
            notifyLabel.x = 0;
            notifyLabel.y = 0;
            addChild(notifyLabel);
            }
            }
            public function buttonClickHandler(evt:MouseEvent):void{
            toNotify();
            }
            public function changeHandler(evt:Event):void{
            this.removeAllChildren();
            if(data.timeNotify == ''){
            notifyButton = new Button();
            notifyButton.setStyle("icon", buttonIcon);
            notifyButton.x = 0;
            notifyButton.y = 0;
            addChild(notifyButton);
            notifyButton.addEventListener(MouseEvent.CLICK, buttonClickHandler);
            }else{
            notifyLabel = new Label();
            notifyLabel.text = data.timeNotify;
            notifyLabel.x = 0;
            notifyLabel.y = 0;
            addChild(notifyLabel);
            }
            }
            public function toNotify():void{
            var currentTime:Date = new Date();
            data.timeNotify = timeDisplay.format(currentTime); //timeDisplay is just a date format
            data.commit();
            }
            ]]>
            </mx:Script>

            To explain this...
            1. I declare a button and label so I can use their properties in my script
            2. The button should be displayed in the datagrid row when a "notify" time has not yet been set for that record in the database, and a label should be shown with the notify time when a time has been set.
            3. If no notify time has been set, the button is displayed. Clicking the button triggers an event listener on click and calls toNotify() which then sets the timeNotify datafield to the current time.
            4. There's also an event listener that looks for changes in data, and calls 'changeHandler()', which basically runs initApp() again and does another check to see if the timeNotify datafield exists or is still null.blank
            5. In my app with the datagrid, the button will now properly change to a label with the time without having to reload the app. Works great, just alot of bad coding I'm sure.

            So, can you look at my code when you get a chance and maybe simply it or clean it up? Usually I'm very organized with my code but when I can't figure things out, I include everything that might not need included.

            thanks Tracy