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

March 16,

Robert,

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

<html>
<head>
    <title>ActiveWidgets Grid :: Examples</title>
    <style> body, html {margin:0px; padding: 0px; overflow: hidden;} </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 {height: 100%; font: menu;}

        .active-column-1 {width:  80px;}
        .active-column-2 {width: 200px;}
        .active-column-3 {text-align: right;}
        .active-column-4 {text-align: right;}
        .active-column-5 {text-align: right;}

        .active-grid-column {border-right: 1px solid threedlightshadow;}
        .active-grid-row {border-bottom: 1px solid threedlightshadow;}

        .active-progress-bar {
            display: inline;
            overflow: hidden;
            height: 8px;
            width: 70%;
            margin: 5px;
            padding: 1px;
            border: 1px solid #090;
            vertical-align: middle;
        }

        .active-progress-bar div {
            overflow: hidden;
            height: 100%;
            background: #0f0;
        }

        .active-progress-bar.gecko {
            width: 60%;
            float: left;
        }

        .active-progress-bar.gecko div {
            float: left;
        }

    </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", progressBar, 0);

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

    //	provide cells and headers text
    obj.setDataProperty("text", function(i, j){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)

March 16,

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

March 17,

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)

March 17,

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

March 18,

yea yea

January 19,

This topic is archived.

Dynamic template with <table> based progress bar

See also:

Search

New Data Grid

Version 2