Highlight row in a listgird

26 May, 2008 - 15:53 — Zappel

Hi,

i have a listgrid where i would like to highlight unopened entries with bold text.

It is easy to format only the status-column (with a dataformatter) and make the text bold. I have this formatter:

<b:dataFormatter name="statusformatter" type="application/javascript">

        <![CDATA[

        if (value=="New")

                return '<span style="font-weight:bold">' + formattedValue + '</span>';

        else 

                return '<span>' + formattedValue + '</span>';

        ]]>      

</b:dataFormatter>

But I would like to set the whole row to bold text if the status is "new" and not only the status-column (like an unread mail in outlook).

greetings
matthias

The first example works

27 May, 2008 - 15:27 — Zappel

The first example works great in Firefox but Internet Explorer throws a error-message:
"Javascript error: This object doesn't support this Property or Method"

<b:listGrid dataSource="remoteDataInqu" b:style="font-size:15px" rows="20" height="300px" id="myInquGrid" width="auto" readonly="true" selectMultiple="true" rowClasses="rowClass1, rowClass2">

        <b:listGridCol select="id" label="Nummer" width="100px" />   

        <b:listGridCol select="hotelstatus" label="Status" width="140px" />

        <e:handler event="pageRefreshed"  type="text/javascript"><![CDATA[

                var oRow = this.viewNode.selectNodes("./div/table/tbody/tr/td[2]/div");

                for(var i=0;i<oRow.length;i++){

                if(oRow[i].innerHTML=='Neu'){

                        bb.command.setStyle(oRow[i].parentNode.parentNode,{'font-weight':'bold'});

                }

        }

]]></e:handler>

</b:listGrid>

In this row:
var oRow = this.viewNode.selectNodes("./div/table/tbody/tr/td[2]/div");

Where would i have to to put the b:fieldCreator?

greetings

For the second example, you can put the fieldCreator inside b:listGridCol (the column that you want to check).
I just tested the first example in FF 2. I know why it does not work because in IE "this.viewNode" does not have the "selectNodes" method. Therefore, it will return error. To make work, try to iterate from the listGrid modelNode not its viewNode (for instance this.selectNodes("XPath") ).This is the example:

<e:handler event="pageRefreshed"  type="text/javascript"><![CDATA[

                var oRow = this.selectNodes("view()/div[3]/table/tbody/tr/td[2]/div");

                for(var i=0;i<oRow.length;i++){

                if(oRow[i].innerHTML=='Neu'){

                        bb.command.setStyle(oRow[i].parentNode.parentNode,{'font-weight':'bold'});

                }

        }

]]></e:handler>

~Yudi

thank you very much - works

28 May, 2008 - 08:28 — Zappel

thank you very much - works like a charm :-)

it did work like charm

26 June, 2008 - 17:23 — martasoft

I used this example, slightly modified, and it was working great until I updated to 4.2.1
now I get an error message: oRow[z] is undefined
help!

<e:handler event="pageRefreshed"  type="text/javascript">

<![CDATA[

var oRow = this.selectNodes("view()/div[3]/table/tbody/tr/td[2]/div");

z = oRow.length - 1;

bb.command.setStyle(oRow[z].parentNode.parentNode,{'background-color':'#8A85A9'});

bb.command.setStyle(oRow[z].parentNode.parentNode,{'color':'white'}); 

document.getElementById('loadingMessageContainer').style.display = 'none';

]]>                     

</e:handler>

oRow[z] error

27 June, 2008 - 10:37 — andys

Hi martasoft,

I could not reproduce the same error that you have. It works fine for me.
I am using BB version 4.2.1 and have tested it in both FF2 and IE7.
The only thing different is, I dont have the

document.getElementById('loadingMessageContainer').style.display = 'none';

But it should not be a problem at all.

Andys

Client Framework