:: Forum >> Version 1 >>

Dynamic template with <table> based progress bar

Hi Alex & readers,

I would like to have a column that either shows a regular string (date), OR a progress bar, depending on the state of the item.

Imagine a list of file downloads going on to your PC. I want to show the progress of the download, or the date that the download was completed in the same column.

Is this even possible?
I tried it by placing a simple <table> based progress bar in the Text property, but this seems to mess up the vertical alignment of the other columns.

I have also not found any examples of <table> elements incorporated into custom templates.

Keep up the good work! It's quite some art work. Looks like you'll have at least 1 more client.

Robert
Robert
Wednesday, March 16, 2005
Robert,

here is the example of simple in-cell 'progress bar':

<html>
<
head>
    <
title>ActiveWidgets Grid :: Examples</title>
    <
stylebodyhtml {margin:0pxpadding0pxoverflowhidden;} </style>

    <!-- 
ActiveWidgets stylesheet and scripts -->
    <
link href="../../runtime/styles/xp/grid.css" rel="stylesheet" type="text/css" ></link>
    <
script src="../../runtime/lib/grid.js"></script>

    <!-- 
grid format -->
    <
style>
        .
active-controls-grid {height100%; fontmenu;}

        .
active-column-{width:  80px;}
        .
active-column-{width200px;}
        .
active-column-{text-alignright;}
        .
active-column-{text-alignright;}
        .
active-column-{text-alignright;}

        .
active-grid-column {border-right1px solid threedlightshadow;}
        .
active-grid-row {border-bottom1px solid threedlightshadow;}

        .
active-progress-bar {
            
displayinline;
            
overflowhidden;
            
height8px;
            
width70%;
            
margin5px;
            
padding1px;
            
border1px solid #090;
            
vertical-alignmiddle;
        }

        .
active-progress-bar div {
            
overflowhidden;
            
height100%;
            
background#0f0;
        }

        .
active-progress-bar.gecko {
            
width60%;
            
floatleft;
        }

        .
active-progress-bar.gecko div {
            
floatleft;
        }

    </
style>

    <!-- 
grid data -->
    <
script>
        var 
myData = [
            [
100"MSFT","Microsoft Corporation""314,571.156""32,187.000""55000"],
            [
95"ORCL""Oracle Corporation""62,615.266""9,519.000""40650"],
            [
50"SAP""SAP AG (ADR)""40,986.328""8,296.420""28961"],
            [
20"CA""Computer Associates Inter""15,606.335""3,164.000""16000"],
            [
0"ERTS""Electronic Arts Inc.""14,490.895""2,503.727""4000"],
            [
0"SFTBF""Softbank Corp. (ADR)""14,485.840"".000""6865"],
            [
0"VRTS""Veritas Software Corp.""14,444.272""1,578.658""5647"],
            [
0"SYMC""Symantec Corporation""9,932.483""1,482.029""4300"],
            [
0"INFY""Infosys Technologies Ltd.""9,763.851""830.748""15400"],
            [
0"INTU""Intuit Inc.""9,702.477""1,650.743""6700"],
            [
0"ADBE""Adobe Systems Incorporate""9,533.050""1,230.817""3341"],
            [
0"PSFT""PeopleSoft, Inc.""8,246.467""1,941.167""8180"],
            [
0"SEBL""Siebel Systems, Inc.""5,434.649""1,417.952""5909"],
            [
0"BEAS""BEA Systems, Inc.""5,111.813""965.694""3063"],
            [
0"SNPS""Synopsys, Inc.""4,482.535""1,169.786""4254"],
            [
0"CHKP""Check Point Software Tech""4,396.853""424.769""1203"],
            [
0"MERQ""Mercury Interactive Corp.""4,325.488""444.063""1822"],
            [
0"DOX""Amdocs Limited""4,288.017""1,427.088""9400"],
            [
0"CTXS""Citrix Systems, Inc.""3,946.485""554.222""1670"],
            [
0"KNM""Konami Corporation (ADR)""3,710.784"".000""4313"]
        ];

        var 
myColumns = [
            
"Loading %""Ticker""Company Name""Market Cap.""$ Sales""Employees"
        
];
    </
script>
</
head>
<
body>
    <
script>

    
// create a new cell template
    // we start with image template but
    // will replace image with the progress bar
    
var progressBar = new Active.Templates.Image;

    
// the progress bar will be built with
    // two nested DIVs
    
var outerBox = new Active.HTML.DIV;
    var 
innerBox = new Active.HTML.DIV;

    
// the width of inner DIV is linked to value property
    
innerBox.setStyle("width", function(){
        return 
this.getItemProperty("value") + "%";
    });

    
// we have to assign a CSS class
    
outerBox.setClass("progress""bar");

    
// put inner DIV inside, call it 'box'
    
outerBox.setContent("box"innerBox);

    
// replace image with the nested DIVs
    
progressBar.setContent("image"outerBox);

    
// add % to the displayed text
    
progressBar.setContent("text", function(){
        return 
this.getItemProperty("text") + "%";
    });

    
//    create ActiveWidgets Grid javascript object
    
var obj = new Active.Controls.Grid;

    
// set our template for the first column
    
obj.setTemplate("column"progressBar0);

    
//    set number of rows/columns
    
obj.setRowProperty("count"20);
    
obj.setColumnProperty("count"6);

    
//    provide cells and headers text
    
obj.setDataProperty("text", function(ij){return myData[i][j]});
    
obj.setColumnProperty("text", function(i){return myColumns[i]});

    
//    set headers width/height
    
obj.setRowHeaderWidth("28px");
    
obj.setColumnHeaderHeight("20px");

    
//    set click action handler
    
obj.setAction("click", function(src){window.status src.getItemProperty("text")});

    
//    write grid html to the page
    
document.write(obj);

    </
script>
</
body>
</
html>

 
The second part (switching to date display) is missing in this example.
Alex (ActiveWidgets)
Wednesday, March 16, 2005
Hi Alex,

That is exactly what we need it to do (I should be able to add the date/text replacement myself). I'm also going to add dynamic updates, as downloads progress.

I expect our engineering is going to use this code in some of our products, so we will probably get your site license. (www.entriq.com)

Suggestion: You could be making a lot more money if you spend about 2 weeks on documentation. There is a lot of information in the Support Forum, so it just needs to be organized.
Once you add documentation, you will increase your target market with people that are more likely to pay :)

Cheers
Robert
Thursday, March 17, 2005
Well, I just started writing the documentation again, so please have a look here (though there is not much content yet):

http://www.activewidgets.com/general.doc/

The pages are open for editing, so everyone is invited to add his own thoughts or just comment.
Alex (ActiveWidgets)
Thursday, March 17, 2005
Alex:

I agree with Robert. Your grid library is exactly what we needed and we will soon ask for a license. The basic stuff is easy to implement and there are some nice examples. But as soon as you want to fine tune, it gets hard to figure out how to do it simply because the current documentation and examples do not go beyond the basic stuff.

The library seems to be very well crafted and very powerfull, but it is very hard to discover the perls.
Andreas
Friday, March 18, 2005
yea yea
Thursday, January 19, 2006



This topic is archived.

Back to support forum

Forum search