ActiveWidgets • Change cell border for specific rows

Alex provided me with the following example which does excatly what I was looking for! Thank you Alex!
<html>

<head>

    <title>ActiveWidgets Grid :: Examples</title>

    <style> body, html {margin:0px; padding: 0px; overflow: hidden;border:none} </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-0 {width:  80px;}

        .active-column-1 {width: 200px;}

        .active-column-2 {text-align: right;}

        .active-column-3 {text-align: right;}

        .active-column-4 {text-align: right;}



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

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



        .active-selection-true,

        .active-selection-true .active-row-cell {

            color: red!important;

            background-color: yellow!important;

        }



        /* highlight full row */

        .active-group-1 {

            background-color: #9cf;

        }



        /* highlight all cells */

        .active-group-1 .active-templates-text {

            border-bottom: 2px solid #f00;

        }



        /* highlight third column only */

        .active-group-1 .active-column-2 {

            border-left: 5px solid #00f;

        }







    </style>



    <!-- grid data -->

    <script>

        var myData = [

            ["MSFT","Microsoft Corporation", "314,571.156", "32,187.000", "55000"],

            ["ORCL", "Oracle Corporation", "62,615.266", "9,519.000", "40650"],

            ["SAP", "SAP AG (ADR)", "40,986.328", "8,296.420", "28961"],

            ["CA", "Computer Associates Inter", "15,606.335", "3,164.000", "16000"],

            ["ERTS", "Electronic Arts Inc.", "14,490.895", "2,503.727", "4000"],

            ["SFTBF", "Softbank Corp. (ADR)", "14,485.840", ".000", "6865"],

            ["VRTS", "Veritas Software Corp.", "14,444.272", "1,578.658", "5647"],

            ["SYMC", "Symantec Corporation", "9,932.483", "1,482.029", "4300"],

            ["INFY", "Infosys Technologies Ltd.", "9,763.851", "830.748", "15400"],

            ["INTU", "Intuit Inc.", "9,702.477", "1,650.743", "6700"],

            ["ADBE", "Adobe Systems Incorporate", "9,533.050", "1,230.817", "3341"],

            ["PSFT", "PeopleSoft, Inc.", "8,246.467", "1,941.167", "8180"],

            ["SEBL", "Siebel Systems, Inc.", "5,434.649", "1,417.952", "5909"],

            ["BEAS", "BEA Systems, Inc.", "5,111.813", "965.694", "3063"],

            ["SNPS", "Synopsys, Inc.", "4,482.535", "1,169.786", "4254"],

            ["CHKP", "Check Point Software Tech", "4,396.853", "424.769", "1203"],

            ["MERQ", "Mercury Interactive Corp.", "4,325.488", "444.063", "1822"],

            ["DOX", "Amdocs Limited", "4,288.017", "1,427.088", "9400"],

            ["CTXS", "Citrix Systems, Inc.", "3,946.485", "554.222", "1670"],

            ["KNM", "Konami Corporation (ADR)", "3,710.784", ".000", "4313"]

        ];



        var myColumns = [

            "Ticker", "Company Name", "Market Cap.", "$ Sales", "Employees"

        ];



        var myRowGroup = [

            0,

            1, /* this is a symbol used in css selector: .active-group-1 */

            0,

            1,

            0,

            0,

            0,

            0,

            0,

            0,

            0,

            0,

            0,

            0,

            0,

            0,

            0,

            0,

            0,

            0

        ]

    </script>

</head>

<body>

    <script>



    //    create ActiveWidgets Grid javascript object

    var obj = new Active.Controls.Grid;





    //    define additional property for a row

    obj.defineRowProperty("group", function(i){return myRowGroup[i]});



    //    create row template

    var row = new Active.Templates.Row;



    //    add dynamic css class

    row.setClass("group", function(){return this.getRowProperty("group")});



    //    attach template to the grid

    obj.setTemplate("row", row);





    //    set number of rows/columns

    obj.setRowProperty("count", 20);

    obj.setColumnProperty("count", 5);



    //    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>
Change cell border for specific rows

Forum search
