Applying colors to rows and cells when loading XML

Is there an XML structure that can be used to apply colors, fonts, font sizes to a grid when loading it from XML?

Jerry Lambert

August 31,

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 (ActiveWidgets)

August 31,

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?

Jerry Lambert

September 4,

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 (ActiveWidgets)

September 4,

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>

Jerry Lambert

September 7,

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>

Alex (ActiveWidgets)

September 7,

This topic is archived.

Applying colors to rows and cells when loading XML

See also:

Search

New Data Grid

Version 2