Color Animation in ListGrid

23 July, 2008 - 07:25 — raji_neelam

We are having a listgrid which is being populated from an xml
We want to put color animation for each row of list grid as in
http://demo.backbase.com/explorer/#|examples/smilColorAnimation.xml

We are already using dataFormatter for this but are unable to achieve same effect as shown for table.

Code for animation

<d:namespace name="http://www.backbase.com/2007/explorer">

<d:behavior name="fx-color">

<d:handler event="mouseenter" type="application/xml">

<smil:animate attributeName="background-color" dur="250ms" to="#7d8fce" />

</d:handler>

<d:handler event="mouseleave" type="application/xml">

<smil:animate attributeName="background-color" dur="1s" to="#fff" />

</d:handler>

</d:behavior>

</d:namespace>

Here is the code in dataFormatter

<b:dataFormatter name="contents" type="application/javascript"><![CDATA[

                return '<span class="gridSummary" e:behavior="exp:fx-color">' + value + '</span>';   

        ]]></b:dataFormatter>

This is how we are using it in out listgrid

<b:listGrid selectMultiple="false" rows="3" readonly="true" dataSource="mySource" rowClasses="rowClass1, rowClass2"> 

                <b:listGridCol dataField="dateDue" width="90px" label="Date Due" format="contents">

                </b:listGridCol> 

 </b:listGrid>

Please Help in correcting the code.

listgrid animation dataFormatter

23 July, 2008 - 11:39 — andys

Hi raji_neelam,

dataFormatter widget is only possible to return a pure html standard. Therefore the e:behavior that you attached into the span will never be executed, because it will never be rendered by the engine.

There is a way to have smil animation for the listgrid row.

<b:listGrid ...>

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

     <![CDATA[

                var totalRecords = this.selectNodes('view()/div/table/tbody/tr');

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

                {

                        var tr = totalRecords[i];

                        tr.onmouseover = function(){

                            var oAnimationInfo = {

                                attributeName: "background-color",

                                attributeType:"CSS", dur: "250ms", to: "#7d8fce"

                                }

                            bb.smil.animateColor(this, oAnimationInfo);

                        }

                        tr.onmouseout = function(){

                            var oAnimationInfo = {

                                attributeName: "background-color",

                                attributeType:"CSS", dur: "1s", to: "#fff"

                                }

                            bb.smil.animateColor(this, oAnimationInfo);

                        }

                }

                ]]>

        </e:handler>

...

</b:listGrid>

Hope this helps,

Andys

Thanks a lot

23 July, 2008 - 11:45 — raji_neelam

Thanks a lot Andys.
Its Working.
Rajinder

Client Framework