8 Replies Latest reply on Feb 23, 2008 10:25 PM by 2JZ

    Binding progress bar in datagrid?

    2JZ
      Hi all,

      I am trying to populate a progress bar in datagrid. Basically, the datagrid binds to an arraycollection and it is empty initially. After user selects the files, the file info is stored into the arraycollection and I add the progress bar to the arraycollection. Everything binds to the datagrid but, the progress bar is not showing up. Any ideas?

      <mx:DataGrid id="DGCtrl" dataProvider="MyAC">
      <mx:columns>
      <mx:DataGridColumn headerText="File Name" dataField="FileName"/>
      <mx:DataGridColumn headerText="File Size" dataField="FileSize"/>
      <mx:DataGridColumn headerText="Status" dataField="ProgBar">
      <mx:itemRenderer>
      <mx:Component>
      <mx:Canvas height="100%" width="100%"/>
      </mx:Component>
      </mx:itemRenderer>
      </mx:DataGridColumn>
      </mx:columns>
      </mx:DataGrid>

      I can manage to populate a progress bar with the following code. But, it is not from my progress bar in my arraycollection (The progress bar in my arraycollection has different label).

      <mx:itemRenderer>
      <mx:Component>
      <mx:ProgressBar height="100%" width="100%"/>
      </mx:Component>
      </mx:itemRenderer>


      Please help!
        • 1. Re: Binding progress bar in datagrid?
          Gregory Lafrance Level 6
          Maybe use actionscript to switch the itemrenderer?
          • 2. Re: Binding progress bar in datagrid?
            2JZ Level 1
            Are you saying that I set the cell's itemRenderer everytime I add a progress bar in my arrayCollection? How can I access the cell level's itemRenerer?

            I am not sure how to code the AS in this case. Any hints?
            • 3. Re: Binding progress bar in datagrid?
              czflex
              I don't understand one thing - You say "I add a progress bar in my arrayCollection") How do you have stored the progress bar in the arraycollection? You have only stored a value (like int, or Number...) right?
              • 4. Re: Binding progress bar in datagrid?
                2JZ Level 1
                From my understanding, array collection is an array of object collection which can be progressbar.
                • 5. Re: Binding progress bar in datagrid?
                  Gregory Lafrance Level 6
                  Its true you can store any object type in an array, but I think in this case don't you want the progress bar to be a renderer in the DataGrid?
                  • 6. Re: Binding progress bar in datagrid?
                    2JZ Level 1
                    Greg,

                    I thought about that too. That is my second approach. I tried to use the itemRenderer and it does display the progressBar. Since my arrayCollection's data is inserted during run time, I don't know how to call the event handler.

                    Again, the arrayCollection carry a list of user selected files. I have no clue how to set the progressBar's setProgress(). Absolutely, no idea. Not to mention about how the syntax goes. Please chip in.

                    -Alan
                    • 7. Re: Binding progress bar in datagrid?
                      czflex Level 1
                      You can store the ProgressBar in the the arraycollection, but I would't do it in this case, you will not be able to show it in a row anyway.

                      I would recomend to store just a Number (or int), like percent value of the loading instead, than the appropriate datagrid column would looks like.....

                      <mx:DataGridColumn headerText="Status" dataField="percent">

                      it will not show the progressbar but just the number. If this will work to you and will show the correct numbers, I would then make a custom itemrenderer, which will show the progressbar instead of the text...

                      but, there is a problem you may know about - you need to call the SetProgress() function to set the progressbar manually, so you cannot just bind a value to the progressbar - I would make it by making a custom component like MyProgressBar - it's very simple, the file could look like this (MyProgressBar.mxml):

                      <?xml version="1.0" encoding="utf-8"?>
                      <mx:ProgressBar xmlns:mx=" http://www.adobe.com/2006/mxml" mode="manual">
                      <mx:Script>
                      <![CDATA[
                      public function set percentProgress ( percent:Number ):void {
                      setProgress( percent, 100 );
                      }
                      ]]>
                      </mx:Script>
                      </mx:ProgressBar>

                      then, the column in the datagrid could look like this:

                      <mx:itemRenderer>
                      <mx:Component>
                      <mx:Canvas width="100%">
                      <mx:MyProgressBar width="100%" percentProgress="{data.percet}"/>
                      </mx:Canvas/>
                      </mx:Component>
                      </mx:itemRenderer>

                      This is not the only way to do this, another way could be just overriding the 'data' setter of the ItemRenderer object, than add the SetProgress into this setter....
                      • 8. Re: Binding progress bar in datagrid?
                        2JZ Level 1
                        czflex,Yes! Thank you. You've answer my question. I created the itemRenderer. However, I do not know how to set the setProgress().

                        <mx:MyProgressBar width="100%" percentProgress="{data.percet}"/>

                        The above showed my way. Thank you!!!