ActiveWidgets • Applying colors to rows and cells when loading XML

That requires several steps -

1. define a new property (color/font/size) in the cell (or row) model -

grid.defineCellProperty("color");

2. link the cell style (or CSS class) to the new 'color' property

grid.getCellTemplate().setStyle("background", function(){

    return this.getCellProperty("color");

  });

3. now it is necessary to put some data into the 'color' property. There are two ways to do it depending on how the color information is transmitted in the XML file - i.e. whether each data element has the 'color' attribute or the 'color' is just another data column (which can also be an attribute of some element).

3a. if all (or most) data elements can have 'color' attribute it is better doing it with custom data model. You have to modify (subclass) AW.XML.Table class adding getColor(col, row) method -

table.getColor = function(col, row){

    return this.getNode(col, row).getAttribute('color');

  };

3b. if 'color' is just another data column - it should be selected in the XML source using XPath the same way as other columns -

table.setColumns(['col1', 'col2', ..., 'col1/@color']);

and linked to the cell color property -

grid.setCellColor(function(col, row){

    return this.getCellData(colorColumnIndex, row);

  });

Alex,

Thanks. In looking at the examples you have supplied, all of the nodes in the XML are displayed in the grid. If I wanted to supply the color/font/size attributes via the XML to be used by the .getData call, how do I avoid these attributes being displayed in the Grid along with the user information that I DO intend to display?

You can use setColumnCount() method when all hidden columns are at the end, or setColumnIndices() if hidden columns are mixed with visible -

http://www.activewidgets.com/grid.howto.columns/hide.html

Alex,

How does this change if I am setting this on a row basis instead of a cell basis using the sample XML below?

<xml id="xmlDataIsland">
<records>
<r bc="#ff0000" fc="#000000" ft="Arial" fs="" >
<Country>Mexico</Country>
<Cust Eqp>ss2</Cust Eqp>
<Calls>3</Calls>
<ASR>0</ASR>
<PDD>0</PDD>
<ALOC>0</ALOC>
<More>+</More>
</r>
<r bc="#ff0000" fc="#000000" ft="Arial" fs="" >
<Country>Afghanistan</Country>
<Cust Eqp>ss1</Cust Eqp>
<Calls>2</Calls>
<ASR>0</ASR>
<PDD>1</PDD>
<ALOC>0</ALOC>
<More>+</More>
</r>
<r bc="#ff0000" fc="#000000" ft="Arial" fs="" >
<Country>Haiti</Country>
<Cust Eqp>gw2</Cust Eqp>
<Calls>23</Calls>
<ASR>0</ASR>
<PDD>0</PDD>
<ALOC>0</ALOC>
<More>+</More>
</r>
</records>
</xml>

First, this xml block is invalid because of the space in <Cust Eqp> element, so I deleted this one.

I would define additional columns

table.setColumns(["Country", "Calls", "ASR", "PDD", "ALOC", "@bc", "@fc", "@ft"]);

and map them to the row style attributes -

obj.defineRowProperty("background", function(r){

    return this.getCellText(5, r); // return 'background' column

});

and

myRow.setStyle("background", function(){

    return this.getRowProperty("background");

});

Here is the full code -

<html>

<head>

    <title>ActiveWidgets Examples</title>

    <style>body {font: 12px Tahoma}</style>



    <script src="../../runtime/lib/aw.js"></script>

    <link href="../../runtime/styles/xp/aw.css" rel="stylesheet"></link>

</head>

<body>

<xml id="xmlDataIsland">

<records>

    <r bc="#ff0000" fc="#000000" ft="Arial" fs="" >

        <Country>Mexico</Country>

        <Calls>3</Calls>

        <ASR>0</ASR>

        <PDD>0</PDD>

        <ALOC>0</ALOC>

        <More>+</More>

    </r>

    <r bc="#ff0000" fc="#000000" ft="Arial" fs="" >

        <Country>Afghanistan</Country>

        <Calls>2</Calls>

        <ASR>0</ASR>

        <PDD>1</PDD>

        <ALOC>0</ALOC>

        <More>+</More>

    </r>

    <r bc="#ff0000" fc="#000000" ft="Arial" fs="" >

        <Country>Haiti</Country>

        <Calls>23</Calls>

        <ASR>0</ASR>

        <PDD>0</PDD>

        <ALOC>0</ALOC>

        <More>+</More>

    </r>

</records>

</xml>

<script>



    var table = new AW.XML.Table;

    var xml = document.getElementById("xmlDataIsland");

    table.setColumns(["Country", "Calls", "ASR", "PDD", "ALOC", "@bc", "@fc", "@ft"]);

    table.setXML(xml);



    var obj = new AW.UI.Grid;

    obj.setId("myGrid");

    obj.setColumnCount(8);

    obj.setRowCount(3);

    obj.setCellModel(table);



    obj.defineRowProperty("background", function(r){

        return this.getCellText(5, r); // return 'background' column

    });



    var myRow = new AW.Grid.Row;



    myRow.setStyle("background", function(){

        return this.getRowProperty("background");

    });



    obj.setRowTemplate(myRow);



    document.write(obj);



</script>

</body>

</html>

Applying colors to rows and cells when loading XML

Documentation:

Forum search