Help: Have 2 Grids, need 2 different Styles

Does anyone have an example of how to show 2 Grids on the same page, each with different style/control? This doesn't seem to work for me.

<style>
#grid1 .aw-grid-control {height: 400px; width:400px; background: #EEE8AA;}
#grid1 .aw-column-0 {width: 132px;}
#grid1 .aw-column-1 {width: 65px;}

#grid2 .aw-grid-control {height: 200px; width:200px; background: #FFFFFF;}
#grid2 .aw-column-0 {width: 100px;}
#grid2 .aw-column-1 {width: 100px;}
</style>

<script>
var obj = new AW.UI.Grid;
obj.setId("grid1");
...
var obj2 = new AW.UI.Grid;
obj2.setId("grid2");
...
</script>

Thanks for your help!

Sam S.

January 23,

Not sure why that wouldn't work, that is the same way I use and it works for me.

Tony

January 23,

Sam,

your code looks correct. Just to be sure I converted old 'two grids on one page' example and it works fine as well - here is the complete code

<html>
<head>
    <title>ActiveWidgets Grid :: Examples</title>
    <style> body, html {font: menu; background: threedface;} </style>

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

    <!-- grid format -->
    <style>
        #grid1 {height: 200px; width: 100%; border: 2px inset; background: white}
        #grid2 {height: 100px; width: 100%; border: 2px inset; background: white}

        #grid1 .aw-column-1 {width: 200px; background-color: threedlightshadow;}
        #grid2 .aw-column-1 {width: 150px; background-color: infobackground;}

        .aw-column-2 {text-align: right;}
        .aw-column-3 {text-align: right;}
        .aw-column-4 {text-align: right;}

        .aw-grid-row {border-bottom: 1px solid threedlightshadow;}
        .aw-grid-cell {border-right: 1px solid threedlightshadow;}

    </style>

    <!-- grid data -->
    <script>
        var data1 = [
            ["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"],
        ];

        var data2 = [
            ["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 columns1 = [
            "Ticker", "Company Name", "Market Cap.", "$ Sales", "Employees"
        ];

        var columns2 = [
            "Ticker(2)", "Company Name(2)", "Market Cap.(2)", "$ Sales(2)", "Employees(2)"
        ];
    </script>
</head>
<body>
    <p>
        Here is the first grid:
    </p>

    <script>
        var obj1 = new AW.UI.Grid;
        obj1.setId("grid1");
        obj1.setRowCount(15);
        obj1.setColumnCount(5);
        obj1.setCellText(function(c, r){return data1[r][c]});
        obj1.setHeaderText(function(c){return columns1[c]});
        document.write(obj1);
    </script>

    <p>
        And another one...
    </p>

    <script>
        var obj2 = new AW.UI.Grid;
        obj2.setId("grid2");
        obj2.setRowCount(5);
        obj2.setColumnCount(5);
        obj2.setCellText(function(c, r){return data2[r][c]});
        obj2.setHeaderText(function(c){return columns2[c]});
        document.write(obj2);
    </script>
</body>
</html>

Alex (ActiveWidgets)

January 23,

Thanks, Alex... I appreciate your prompt response.

Your demo worked for me. I'll try to reverse engineer it back into my code.

Sam S.

January 23,

It appears the ".aw-grid-control" text was causing the issue.

So instead of:

#grid1 .aw-grid-control {height: 400px; width:400px; background: #EEE8AA}

I needed to use the following (per Alex's example):

#grid1 {height: 400px; width:400px; background: #EEE8AA}

Sam S.

January 23,

This topic is archived.

Help: Have 2 Grids, need 2 different Styles

See also:

Search

New Data Grid

Version 2