0

Many thanks for reading this. I have asked as well in Adobe forums with no luck.

I am building a small library application for school books. I have created a database with lets say 2 tables

Books ( ID_Book , Writer , Title , Copies) and
Loans ( ID_Book , Load_ID , Loan_Date ) etc

I have used correctly spry to create easily a table which print the book list in a table with pagination .

var ds1 = new Spry.Data.XMLDataSet("ajaxquery.php", "root/row", {sortOnLoad: "Writer", sortOrderOnLoad: "ascending"});
ds1.setColumnType("ID_Book", "number");
var pv1 = new Spry.Data.PagedView( ds1 ,{ pageSize:10 });
var pv1PagedInfo = pv1.getPagingInfo();
pv1.setColumnType("ID_Book", "number");

I have made the necessary declarations to produce the dataset for the Loans

var ds3 = new Spry.Data.XMLDataSet("ajaxallloans", "root/row", {sortOnLoad: "ID_Book", sortOrderOnLoad: "ascending"});
ds3.setColumnType("ID_Book", "number");
ds3.setColumnType("ID_Dan", "number");

I would like to find a way to change the table row color for the BOOKS table IF an ID_Book is within the Loans table - ds3.

The table is created

<div spry:region="pv1" id="bibliapv">

<div spry:state="loading" class="loading" >Loading...</div>  

<div spry:state="ready">
  <table>
    <tr >

      <th   width="75"  spry:sort="ID_Book"> Book No</th>
      <th   width="123" spry:sort="Writer">Writer </th>
etc...

    </tr>


    <tr spry:repeat="pv1" spry:select="mySelectClass" spry:hover="hover">
      <td >{ID_Book}</td>
      <td>{writer}</td>
  etc ..
  </tr>

</table>
  </div>
</div>
<div>

Many thanks again. Dinos - Greece

1 Answers1

0

Many thanks again for reading .

I found a solution based on the ideas drawn from

labs.adobe.com/technologies/spry/samples/data_region/CustomColumnsSam ple.html

I have added the following code:

  1. created a css rule

lets say

.match {

background-color: #0CF;



}
  1. In spry:region add the class {cssrule} which is added dynamically shortly after <tr class="{cssrule}" spry:repeat="pv1" spry:select="mySelectClass" spry:hover="hover">

3.

Then just before closing tag added (you could put it earlier in code)

 <script type="text/javascript">

  ds2.addObserver({

    onPostLoad:function( ds2, data ){

    var data = ds2.getData();

    var pv1data = pv1.getData();



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

  {            

      for (var j =0 ; j< data.length ; j++)

    {     if ((data[j].Writer).toString()== (pv1data[i].Writer).toString() )   //or whatever you like!

        {pv1data[i].cssrule="match";   }

    }

   }



  }

});
</script>