Progress Bar in Datagrid in flex

Hi,
I have a urgent requirement, which needs to have ProgressBar
in DataGrid. I want to set progress for each of the ProgressBar in
datagrid to be binded to a cloum (i.e your progress bar column is
binded to some object in array collection). Please do let me know
how this is possible. It would be great favour if it is possible to
do it using manual mode.
I used following mxml
<mx:AdvancedDataGridColumn id="teamProgress" width="120"
headerText="Team" dataField="TeamProgress">
<mx:itemRenderer><mx:Component><mx:HBox
verticalAlign="middle"> <mx: ProgressBar id="PB"
trackHeight="13" barColor="red" trackColors="[White, haloSilver]"
borderColor="black" width="75" textAlign="right"
styleName="progressBar" mode="manual" label="data.TeamProgress"
height="13"/></mx:HBox></mx:Component></mx:itemRenderer>
</mx:AdvancedDataGridColumn>.
How to support static binding of the progress bar column of
DataGrid to some object in ArrayCollection.
I want this progress bar column to be clickable.

Hi,
Please find the code for implementing a progress bar in
DataGrid at the URL below. You will find code for sample
application which is using Adobe share API. In this application
they implemented a progress bar in a DataGrid.
https://share.acrobat.com/adc/document.do?docid=fa29c796-dc18-11dc-a7df-2743035249fa
Hope this helps.

Similar Messages

  • Resetting progress bar in datagrid

    Hello all,
    I'm extremely new to everything flex and flash. so this may
    be a really stupid question. but google has so far failed to find
    the answer to this.
    i built a small flash app to allow clients to upload files in
    bulk. everything seems to work fine (for the most part) except that
    my progress bars never reset. if they upload a file then select a
    new file, the progress bar will remain at 100%. i can't figure out
    how to reset it. can anyone point me in the right direction?
    Thanks in advance.
    Code for the DataGrid:

    does anyone have any ideas for this?

  • Progress bar inside datagrid

    Hi All,
    I have a datagrid in which i have to display progress bar with the task completed in %.
    for example i have  two fields in a table source count and completion count.
    where source count in 100000 rows and 50000 rows have been inserted.
    in another table and status is displayed in the table.
    so i need to display in a progress bar that 50% task has been completed.
    Any suggestions or ideas.
    Sample ex:

    Hello,
    here is something to play with:
    public class ProgressInTableTest {
        private static final Random RANDOM = new Random();
        private final class RunnableDummyProgressProducer implements Runnable {
            private final DefaultTableModel defaultTableModel;
            private final JProgressBar allProgress;
            private RunnableDummyProgressProducer(
                    DefaultTableModel defaultTableModel, JProgressBar allProgress) {
                this.defaultTableModel = defaultTableModel;
                this.allProgress = allProgress;
            @Override
            public void run() {
                for (int i = 0; i < progressEntries.size(); i++) {
                    ProgressEntry progressEntry = progressEntries.get(i);
                    while (100 > progressEntry.progress * 100
                            / progressEntry.fileSize) {
                        progressEntry.progress += 10;
                        defaultTableModel.fireTableCellUpdated(i, 2);
                        try {
                            Thread.sleep(50);
                        } catch (InterruptedException e) {
                            e.printStackTrace();
                    progressEntry.progress = progressEntry.fileSize;
                    SwingUtilities.invokeLater(new Runnable() {
                        @Override
                        public void run() {
                            allProgress.setValue(allProgress.getValue() + 1);
                            allProgress.setString(String.format("%s / %s",
                                    allProgress.getValue(),
                                    allProgress.getMaximum()));
                    defaultTableModel.fireTableCellUpdated(i, 2);
        private final class DefaultTableCellRendererExample extends
                DefaultTableCellRenderer {
            private static final long serialVersionUID = 1L;
            @Override
            public Component getTableCellRendererComponent(JTable table,
                    Object value, boolean isSelected, boolean hasFocus, int row,
                    int column) {
                Component rendererComponent = super.getTableCellRendererComponent(
                        table, value, isSelected, hasFocus, row, column);
                JTextField newRenderer = new JTextField();
                ProgressEntry progressEntry = progressEntries.get(row);
                switch (progressEntry.progress * 100 / progressEntry.fileSize) {
                case 0:
                    newRenderer.setText("pending");
                    return newRenderer;
                case 100:
                    newRenderer.setText("done");
                    return newRenderer;
                default:
                    rendererComponent = new JProgressBar(0, progressEntry.fileSize);
                    JProgressBar jProgressBar = (JProgressBar) rendererComponent;
                    jProgressBar.setValue(progressEntry.progress);
                    jProgressBar.setStringPainted(true);
                return rendererComponent;
        private final class DefaultTableModelExample extends DefaultTableModel {
            private static final long serialVersionUID = 1L;
            private final String[] columnNames = { "file name", "file size",
                    "progress" };
            private DefaultTableModelExample(int rowCount, int columnCount) {
                super(rowCount, columnCount);
            @Override
            public String getColumnName(int column) {
                return columnNames[column];
            @Override
            public Class<?> getColumnClass(int collumn) {
                switch (collumn) {
                case 1:
                    return Integer.class;
                case 2:
                    return ProgressEntry.class;
                default:
                    return String.class;
            @Override
            public Object getValueAt(int row, int column) {
                switch (column) {
                case 0:
                    return progressEntries.get(row).fileName;
                case 1:
                    return progressEntries.get(row).fileSize;
                case 2:
                    return progressEntries.get(row).progress;
                default:
                    return super.getValueAt(row, column);
        public class ProgressEntry {
            private final String fileName;
            private final int fileSize;
            private int progress = 0;
            public ProgressEntry(String fileName, int fileSize) {
                this.fileName = fileName;
                this.fileSize = fileSize;
        private final List<ProgressEntry> progressEntries = new ArrayList<ProgressEntry>();
        @Test
        public void test() {
            initializeSampleData();
            JProgressBar allProgress = createFileCountProgress();
            DefaultTableModel defaultTableModel = new DefaultTableModelExample(
                    progressEntries.size(), 3);
            JTable table = createTable(defaultTableModel);
            startDummyProcess(allProgress, defaultTableModel);
            JPanel message = completeGUI(allProgress, table);
            JOptionPane.showMessageDialog(null, message, "ProgressTest",
                    JOptionPane.PLAIN_MESSAGE);
        private JPanel completeGUI(final JProgressBar allProgress, JTable table) {
            JPanel message = new JPanel(new BorderLayout());
            message.add(new JScrollPane(table), BorderLayout.CENTER);
            message.add(allProgress, BorderLayout.SOUTH);
            return message;
        private void startDummyProcess(final JProgressBar allProgress,
                final DefaultTableModel defaultTableModel) {
            new Thread(new RunnableDummyProgressProducer(defaultTableModel,
                    allProgress), "ProgressTest").start();
        private JTable createTable(final DefaultTableModel defaultTableModel) {
            JTable table = new JTable(defaultTableModel);
            table.setDefaultRenderer(ProgressEntry.class,
                    new DefaultTableCellRendererExample());
            return table;
        private JProgressBar createFileCountProgress() {
            final JProgressBar allProgress = new JProgressBar(0,
                    progressEntries.size());
            allProgress.setStringPainted(true);
            return allProgress;
        private void initializeSampleData() {
            for (int i = 0; i < 20; i++) {
                progressEntries.add(new ProgressEntry(String.format("IMG_%03d.jpg",
                        i), RANDOM.nextInt(1000)));
            for (int i = 0; i < 3; i++) {
                progressEntries.get(i).progress = progressEntries.get(i).fileSize;
            progressEntries.get(3).progress = 50;
    bye
    TPD

  • Is there any component like percentage indicator not progress bar in Flex ?

    Hi All,
    I have to display a percentage value in a graphical way.( for example say 75% , a tube similar to progress bar which has a fill up to 75 % )
    Is there any such component in flex or can I use progress bar ? please share your thoughts.
    Thanks,
    Tc.

    You want to use a determinate ProgressBar with mode set to manual:
       <mx:ProgressBar id="progressBar" minimum="0" maximum="100" mode="manual"
           label="0%" labelPlacement="bottom">
       </mx:ProgressBar
    Then use setProgress( %, 100 ) to set the percentage:
      // set the progress to 10 of 100 (10%)
      progressBar.setProgress( 10, 100 );
    Let me know if that does the trick.
    Ben Edwards

  • Can I remove the startup progress bar from a Flex app?

    Hey all,
    I have built a few charts for my companies' website: http://www.midwestmarket.org/page/Area+Control+Error
    On all of them, I have noticed that there's a delay of 3 or 4 seconds from the time the page loads, a progress bar shows, and then the graph is actually shown.
    The charts in question are all Flex 3 builder built, and I am upgrading now to Flash 4 builder. But, still I see the progress bars.
    I know that Fusion Charts doesn't have this same startup routine, those charts pop right up as soon as the site is loaded. Now Fusion is of course build to JUST be a chart tool and probably doesn't load as much stuff. But, is it possible to get there with Flash 4 builder?

    hi,
    With flashbuilder you first need to load the swf, then it creates the display objects this is what the loadbar is there for, if you have embedded assets then that bar will stay even longer. Once the application creation sequence is complete the displaybar disappears and then your application is displayed.
    Now imagine removing that bar, on a slow connection with a 'large' app, the user would be faced with a blank screen for several seconds, not the desired end-user experience we are after.
    You can make it more interesting by customising the pre-loader with say a company splash screen which offers a more visually appealling startup
    this is a simple example of a custom preloader, source is included
    http://flashhub.net/ezflex/testloader/
    One quick note with preloaders there is no flex sdk at that point so preloaders have to comply with the immediate requirements of the flashplayer api. So basically on flash components.
    David.

  • Progress Bar Animation

    I built a database reporting application in flex that's working fine. However, some of the datasets are large and the end user requested a progress bar for long loads.
    No problem, right? I used <mx:ProgressBar> set the mode to manual, and as ActionScript processes the dataset, call showProgress() repeatedly.
    Trouble is, the animation doesn't play. The Progress Bar just sits on the screen, empty, until the data is completely loaded, then jumps to 100% and disappears.
    I tried switching the progress bar to "indeterminate" and something similar happens: The indeterminate bar appears, but the animation doesn't play until the data has populated the DataGrid, then the animation starts playing just before the bar disappears.
    Can anyone help? A progress bar that doesn't sho progress is kinda worthless.
    Thanks
    -John

    Hi,
    Go through the example and comments, hope it might help.
    I haven't worked with ProgressBar, thought might be useful.
    http://blog.flexexamples.com/2008/02/16/setting-the-value-of-a-flex-progress-bar/#more-523

  • Stopping a Progress Bar when a page has loaded.

    I currently have an application that uses a linkbar with a viewstack.  If I click on a particular link, a component mxml page with an advanced datagrid is loaded.  However, the datagrid can take up to 10 seconds to load.   So, I need to implement a progress bar that will run until the page is completely loaded/ painted.   What phase and or event should I use to capture this.

    I added your Preloader AS class and called the preloader from my application class and recieved an error can the preloader only be used in the Application class.
    Start Class ( there is a destPath associated with this and that is why you don't see any other code. A .swf file is loadded):
    <?xml version="1.0" encoding="utf-8"?><mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"preloader="com.dstsystems.regulatory.compliance.components.ecompliance.view.FlashPreloader">
     </mx:Application>
    ERROR Received and associated function below:
    1046: Type was not found or was not a compile-time constant: FlexEvent. FlashPreloader.as SmartDeskRegulatoryFlex/src/com/dstsystems/regulatory/compliance/components/ecompliance/v iew line 45 Flex Problem
    private function initComplete_handler ( event:FlexEvent ):void
    dispatchEvent(
    new Event( Event.COMPLETE ) );}
    Is it possible to add the Preloader directly to the Component.mxml in question.  My complile time issue is corrected but the preloader doesn't seem to work.
    <?xml version="1.0" encoding="utf-8"?> 
    <mx:VBox 
    xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%" backgroundColor="#FFFFFF" xmlns:view="
    com.XXXsystems.regulatory.compliance.components.ecompliance.view.*"preloader="
    com.dstsystems.regulatory.compliance.components.ecompliance.view.FlashPreloader"creationComplete="Init()"
    paddingLeft="10" paddingTop="10" paddingRight="10" paddingBottom="10"horizontalScrollPolicy="
    off" verticalScrollPolicy="off">
    <mx:Script>
    <![CDATA[
    import
    mx.events.AdvancedDataGridEvent;

  • How to read file asychronous and show progress bar??

    Hello Everyone,
    I am new here and this is my first post here. I made a desktop application in Adobe flex builder 3. In the application I took the path of a folder and merge all the file present in that folder in a new file. I want to show the progress bar when file merging, because it take some time to merge large number of files. I read and write files synchronously. I made the progress bar but when I called it before the file merging happening nothing happened.
    How can I do this??
    Thanks

    if you are using desktop im going to asume you are using air. if thats the case, im not to sure however on the web what you have to do is update the progress bar with some action.
    you can also consider using the  
    cursorManager.setBusyCursor();
    and when you are done then
    cursorManager.removeBusyCursor();
    let me know how you make out.
    Miguel

  • HTTP Request Progress Bar

    Hello All,
    Im trying to create a progress bar on a HTTP request that
    loads in some XML data into my flex app. I can see how it's done
    using an Image or an SWF however the HTTP request doesn't emit any
    progress / complete events.
    Does anyone have any ideas of how this can be achieved.
    Example code would be great.
    Thanks
    Craig

    Hey luisi40999954,
    Could you please let me know what version of OS are you working on.
    You might clear your adobe.com cookies and try using a different browser.
    The installation files for downloading Acrobat DC trial version is available at the below mentioned link:
    Download Acrobat products | Standard, Pro | DC, XI, X
    Please try again and let me know if this helps.
    Regards,
    Anubha

  • Progress bar for chart dataProvider?

    I have a chart which has for dataProvider a link to a php
    script which processes data and returns XML.
    The processing takes a little bit of time so from flex the
    user stares at a blank graph for some time.
    Is there anyway to link a progress bar to this loading
    process?
    If I load the script directly from the browser, the browser's
    progress bar (bottom right in IE) is more or less accurate. I would
    like the equivalent from within flex.
    Any input appreciated, thanks!
    sample:
    <mx:PlotChart
    id="molecularChart"
    width="100%" height="100%"
    dataProvider="
    http://www.blabla.com/processing.php"
    showDataTips="true">
    ...

    If you are trying to update the progress bar display when your upload is 10%, 20%, , , x% complete, then you have to 'pretend' that the progress bar display corresponds to the percentage completness of your file upload. I believe that there is no other way to get around this without comprimising the speed of your upload.
    Check out the swing forum, I believe there is a lot of discussion on this topic.

  • Initial progress bar stuck

    We have a Flex 1.5 app our clients use. 99.9999% of the time
    when our sales people go on a demo for a potential client, the app
    loads just fine. That .0001% of the time, the initial progress bar
    gets to a certain percentage and just sticks. In one situation,
    having the sales person demoing use or install Firefox on the
    client’s machine did the trick. We have a similar situation
    with a potential client and we have tried everything. We’ve
    cleared caches on both browsers, we’ve uninstalled and
    reinstalled the Flash plug-ins for both IE and
    Firefox…we’ve upgraded to IE 7…no matter what we
    do, the app loads up and stops at 8%. It loads for every other
    existing client and every other demo sales goes on…it loads
    on all of our local machines in-office…this one single
    client’s office cannot load the app…and the best part
    is, it loaded for them last week when the sales first went to demo.
    They went in for round two this past week and the app will not pass
    8% on any of their machines.
    Any suggestions?

    I have seen behavior like this when an application is near
    the 32k limit.
    How are you running the app? Always from a Flex server? If
    so, a suggestion for debugging is to compile the swf on a maching
    the works, and then call it from a custom wrapper.
    It might be worth trying this i reverse as well, saving the
    swf on the non-functional system and running it directly from a
    wrapper on a system that it has been working.
    The 32k limit issue involves the compilation on the Flex
    server, If a swf get generted and compiles and run successfully on
    one system, it should run on all.
    Hmm, even before that, try running the app with debug=true,
    on the non-functional system. The debug switch causes code to get
    generated into the swf that changes the way it get compiled. Often,
    this will either overcome the 32k problem, or will display it
    clearly.
    See the FAQ on CFLEX.net for more details on the 32k issue.
    Tracy

  • Progress Bar Errors

    I was having a hard time finding the ProgressBar in the SDK, so I downloaded the latest version from Adobe (I haven't updated it since the pre-release) and now I'm getting a bunch of errors related to my progress bar:
    Description
    Resource
    Path
    Location
    Type
    1120: Access of undefined property ProgressBarSkin.
    ScratcherDeals
    line 1716
    Flex Problem
    1120: Access of undefined property ProgressBarTrackSkin.
    ScratcherDeals
    line 1717
    Flex Problem
    1120: Access of undefined property ProgressIndeterminateSkin.
    ScratcherDeals
    line 1720
    Flex Problem
    1120: Access of undefined property ProgressMaskSkin.
    ScratcherDeals
    line 1719
    Flex Problem
    1172: Definition mx.skins.spark:ProgressBarSkin could not be found.
    ScratcherDeals
    line 54
    Flex Problem
    1172: Definition mx.skins.spark:ProgressBarTrackSkin could not be found.
    ScratcherDeals
    line 22
    Flex Problem
    1172: Definition mx.skins.spark:ProgressIndeterminateSkin could not be found.
    ScratcherDeals
    line 29
    Flex Problem
    1172: Definition mx.skins.spark:ProgressMaskSkin could not be found.
    ScratcherDeals
    line 20
    Flex Problem
    These errors aren't actually referencing a file, so I can't figure out where they're coming from.

    Bump?
    Has anyone successfully used a progress bar?

  • Show progress bar while module loads

    I have a TabView where each tab is a module. One of the
    modules has a lot of child components and when I click to activate
    that tab - it takes 2-3 seconds to load. During this time OSX shows
    the beach ball.
    Is it possible for me to show a loading progress bar instead?
    Should I be pre-loading all the modules when the application loads,
    or at some other point? If so, how do I do this?
    Any suggestions would be appreciated.

    Hey Jason,
    I'm not sure who moderates, but I can send you in the right
    direction.
    Short answer: Look around for Asynchronous Flex demos
    Long answer:
    The interfaces locks up (beach ball/hour glass) because the
    main application 'thread' is busy with the task you asked of it.
    This can, in many different languages, cause a freeze. Javascript,
    Native Mac or Windows applications, apparently Flex too.
    Running one task at a time is considered a synchronous
    (serial) request. What you need to do is make an asynchronous
    (parallel) request. In the web world, that's the 'A' in Ajax. By
    making asynchronous requests, you free up the main 'thread', while
    a separate worker thread is off completing the task. This keeps
    your interface responsive.
    I think that leads to event listeners.. Send off a background
    request, but listen for it to complete. Link the listener to a
    second piece of code upon successful completion.
    I wish I could get into more detail, but I'm not a Flex guy..
    hoped that at least helped gel the idea.
    -dp

  • Loading dataprovider progress bar possible?

    Gidday
    I'm loading data out of SQLLite into an array in my AIR app, ready to populate a datagrid once the SELECT hs been successful:
    data_grid.dataProvider = new DataProvider(evt.data)
    It works really well, but I was wondering if there is a way to display progress?
    50 000 rows takes a couple of seconds to populate, and I'm catering for up to 200 000 rows.
    Is it possible to directly monitor progress of SELECT queries, and then for Flash to populate a dataProvider, or is it a case of having to split up the query into chunks of say, 10 000 rows, break, update a progress bar, then go back for the next SELECT?
    Also - similar topic - is it possible to set up progress for browseForDirectory type operations? I'm loading in large filelists and parsing the file names. I have set up progress tracking once the parsing starts, but cannot seem to do the same after the Event.SELECT listener kicks in, and I run this code in a function:
    var f1:Array = d1.getDirectoryListing();
            var len:int = f1.length;
            for(var i:int = 0; i < len; i++) {   
                f2.push(f1[i].name); //if current item in f1 array is a file, push it onto the f2 array
                f3.push(f1[i].nativePath);//save location of file
                if (f1[i].isDirectory) {
                    gL(f1[i]);
    Thanks guys!

    you can't display the progress of any single select query.  the best you can do is to break the select into several "chunks" or warn the user that your app will be unresponsive for some period of time.
    here's the general idea with chunking:
    Chunks
    For example, if you have a for-loop that takes 10 seconds to execute, your game will appear to freeze for 10 seconds after this loop starts. Nothing will update on stage and nothing will respond to user input. Either you should warn your user before starting that loop or you should break that loop into several smaller chunks that allow visual updates to the user so they do not think your game is broken.
    For example, this for-loop that adds odd numbers (and shows the first m odd numbers sum to m*m) freezes my Flash Player for about 9 seconds.
    var i:Number;
    var n:Number=3000000000;
    var s:Number=0;
    var startI:Number=1;
    var endI:Number=n
    var startTime:int=getTimer();
    for (i=startI; i<endI; i+=2) {
           s+=i;
    // 9 seconds
    trace((getTimer()-startTime)/1000,s,n*n/4,s-n*n/4);
    The following technique shows how to break this (and any other for-loop) into chunks that allow the Flash Player to update every second.
    var i:Number;
    var n:Number=3000000000;
    var s:Number=0;
    var startTime:int=getTimer();
    // This is the number chunks into which the previous for-loop will broken. If the // previous for-loop took about 9 seconds, using 10 chunks means there will be updates // about every 0.9 seconds.
    var chunks:int=10;
    var startI:Number=1;
    var endI:Number=n/chunks;
    var t:Timer=new Timer(100,1);
    t.addEventListener(TimerEvent.TIMER,f);
    f();
    function f(e:Event=null):void {
           for (i=startI; i<endI; i+=2) {
                  s+=i;
           trace("stage update",startI,endI,s);
           if (endI<n) {
                  t.reset();
                  t.start();
           } else {
                  trace((getTimer()-startTime)/1000,s,n*n/4,s-n*n/4);
           startI+=n/chunks;
           endI+=n/chunks;

  • How to customize video player progress bar?

    I want a video progress bar (maybe it is a slider ), which
    can be used to show the buffer progress of video, the standard
    slider control in Flex has not this function.
    How can I customize the silder control?

    this is a very basic video player. what we've done here is A
    LOT of binding i.e. vp.playheadTime=(vp.totalTime/(100/ctr.value))
    after you've figured out what the right math is..which is
    already done here, you can just skin it and it'll work fine. i
    haven't had the time to update this for a while but there is
    definitely room for improvement. hope this helps.
    <?xml version="1.0" encoding="utf-8"?>
    <mx:VBox xmlns:mx="
    http://www.adobe.com/2006/mxml"
    horizontalAlign="center" verticalAlign="middle"
    horizontalScrollPolicy="off" verticalScrollPolicy="off"
    width="100%" height="100%">
    <mx:Script>
    <![CDATA[
    public function init(path:String):void
    vp.source = path;
    vp.play();
    public function fixIt(what:Number):Number
    what.toFixed(2);
    return Number(what);
    ]]>
    </mx:Script>
    <mx:VideoDisplay autoPlay="false" id="vp"/>
    <mx:HSlider minimum="0" maximum="100" width="{vp.width}"
    height="29" id="ctr"
    value="{fixIt(vp.playheadTime/(vp.totalTime/100))}"
    change="vp.playheadTime=(vp.totalTime/(100/ctr.value))"
    liveDragging="true"/>
    <mx:Label id="duration"
    text="{int(vp.playheadTime)}"/>
    <mx:HBox>
    <mx:Button id="pp" label="Play/Pause"
    click="if(!vp.playing){vp.play()}else{vp.pause()}"/>
    <mx:Button id="st" label="Stop" click="vp.stop()" />
    <mx:Button id="rw" label="Rewind"
    click="vp.playheadTime=0" />
    </mx:HBox>
    </mx:VBox>

Maybe you are looking for