Coloring a row in listGrid based on XML attribute

27 October, 2007 - 21:53 — kikkertm

Hi - very new to BB - doing some experiments.

My XML:

  <books>

    <book sale="true">

      <title>book1</book1>

      <price>$8.99</price>

    </book>

    <book sale="false">

      <title>book2</book1>

      <price>$8.99</price>

    </book>

    <book sale="false">

      <title>book3</book1>

      <price>$8.99</price>

    </book>

  </books>

I need the whole row of a book that has a sale attribute of "true" to be red, so not just the price but also the title (i.e. to have another class)

Is this possible?

Thanks!
Mike.

Yes, this is possible, but

8 November, 2007 - 16:54 — ghica

Yes, this is possible, but not easy. Here goes:

<style type="text/css">

        .on-sale { background-color:#FF9999 !important; }

</style>

<b:listGrid width="auto" height="100%" readonly="true" rowClasses="rowClass1, rowClass2">

<b:dataSource e:behavior="b:localData" dataType="application/xml">

<b:dataContainer>

<books>

<book sale="true">

<title>book1</title>

<price>$8.99</price>

</book>

<book sale="false">

<title>book2</title>

<price>$8.99</price>

</book>

<book sale="false">

<title>book3</title>

<price>$8.99</price>

</book>

</books>

</b:dataContainer>

</b:dataSource>

<b:listGridCol select="title" label="Title" width="200px" />

<b:listGridCol select="price" label="Price" width="100px" />

<b:listGridCol select="@sale" label="On Sale" width="70px" align="right" />

<b:listGridCol select="@sale" label="On Sale" width="70px" align="right">

<b:fieldCreator type="application/javascript">

        //viewNode, controller, recordId, value

        var oRow = controller.getProperty('localRecords')[recordId];

        if( value == 'true') bb.html.addClass( oRow, 'on-sale');

</b:fieldCreator>

</b:listGridCol>

</b:listGrid>

The trick is adding a fieldCreator to the listGridCol, that changes the style for the row. If you would like to be able to update the fields in a row, then you would also need a fieldUpdater, and it would become slightly more complicated.

Regards, Ghica.

Excellent - I wasn't even

8 November, 2007 - 18:20 — kikkertm

Excellent - I wasn't even aware of that possibility. I'll try it out, thanks!

Hi, I have quite a similar

8 November, 2007 - 20:54 — evanss2000

Hi,

I have quite a similar question as well. For instance, in one of my gridCol, lets call it "format", the values are either "pdf", "html", "excel", etc. And based on the values, I like to display the appropriate icons. Can you please provide a snippet of a code that does that?

Thanks,
Evan

There were some flaws in my

9 November, 2007 - 11:38 — ghica

There were some flaws in my previous posting. Here is a corrected one that also has an example of displaying icons. The problems were that the fieldCreator should return an object that is displayed in the field (and then it does not have to be included twice). The other problem was my use of local data, where you need to add a namespace to the books tag.

<style type="text/css">

        .on-sale { background-color:#FF9999; }

</style>

<b:listGrid width="auto" height="100%" readonly="true"

        rowClasses="rowClass1, rowClass2">

        <b:dataSource e:behavior="b:localData"

                dataType="application/xml">

                <b:dataContainer>

<books xmlns="">

<book sale="true">

<title>book1</title>

<price>$8.99</price>

<language>Italian</language>

</book>

<book sale="false">

<title>book2</title>

<price>$9.99</price>

<language>Dutch</language>

</book>

<book sale="false">

<title>book3</title>

<price>$7.99</price>

<language>Italian</language>

</book>

</books>

                </b:dataContainer>

        </b:dataSource>

        <b:listGridCol select="title" label="Title" width="200px" />

        <b:listGridCol select="price" label="Price" width="100px" />

        <b:listGridCol select="@sale" label="On Sale"

                width="70px" align="right">

                <b:fieldCreator type="application/javascript">

                        //viewNode, controller, recordId, value var

                        oRow = controller.getProperty(

                        'localRecords')[recordId]; if( value ==

                        'true') bb.html.addClass( oRow, 'on-sale');

                        viewNode.innerHTML = value; return viewNode;

                </b:fieldCreator>

        </b:listGridCol>

        <b:listGridCol select="language" label="Language"

                width="100px" >

                <b:fieldCreator type="application/javascript">

                //viewNode, controller, recordId, value var

                        var oRow = controller.getProperty('localRecords')[recordId]; 

                        var lang;

                        if( value == 'Italian') lang = "../media/italian.gif";

                        else lang = "../media/dutch.gif";

                        var oImg = document.createElement('img');

                        oImg.src = lang;

                        viewNode.appendChild(oImg);

                        return viewNode;

                </b:fieldCreator>

        </b:listGridCol>        

</b:listGrid>

Cheers, Ghica.

-Evan

Client Framework