|
Hi Please let me know is there any other way than i did, to have the alternate while and black LidtGrid row clors i.e. even rows should be white and the odd rows should be grey, I have written a code for this, it works fine for this I have used an attribute sale="false" or "true" for coloring the particular row, what I want is , all XMl file will not have this id, so is it possible to have alternate color for the rows of the ListGrid, with some CSS and JavaScript which is generic for all kind off XML data's
My Code is as follows.
<!-- -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="../Backbase_4_2_1/engine/boot.js"></script>
</head>
<body>
<center>
<script type="text/backbase+xml"
xmlns:xi="http://www.w3.org/2001/XInclude"
xmlns:e="http://www.backbase.com/2006/xel"
xmlns:c="http://www.backbase.com/2006/command"
xmlns:b="http://www.backbase.com/2006/btl"
xmlns:d="http://www.backbase.com/2006/tdl">
<xi:include href="../Backbase_4_2_1/bindings/config.xml" />
<style type="text/css">
.on-sale { background-color:#E0FFFF !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 xmlns="">
<book sale="false">
<title>book1</title>
<price>$8.99</price>
<language>Italian</language>
</book>
<book sale="true">
<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>
<book sale="true">
<title>book4</title>
<price>$6.99</price>
<language>Tamil</language>
</book>
<book sale="false">
<title>book5</title>
<price>$10.99</price>
<language>Hindi</language>
</book>
<book sale="true">
<title>book6</title>
<price>$2.99</price>
<language>French</language>
</book>
<book sale="false">
<title>book7</title>
<price>$34.99</price>
<language>Kannada</language>
</book>
<book sale="true">
<title>book8</title>
<price>$4.99</price>
<language>Spanish</language>
</book>
</books>
</b:dataContainer>
</b:dataSource>
<b:listGridCol select="title" label="Title" />
<b:listGridCol select="price" label="Price" />
<b:listGridCol select="@sale" label="On Sale" >
<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">
<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>
</script>
</center>
</body>
</html>
Please provide me a generic solution
I appriciate your support.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="../Backbase_4_2_1/engine/boot.js"></script>
</head>
<body>
<center>
<script type="text/backbase+xml"
xmlns:xi="http://www.w3.org/2001/XInclude"
xmlns:e="http://www.backbase.com/2006/xel"
xmlns:c="http://www.backbase.com/2006/command"
xmlns:b="http://www.backbase.com/2006/btl"
xmlns:d="http://www.backbase.com/2006/tdl">
<xi:include href="../Backbase_4_2_1/bindings/config.xml" />
<style type="text/css">
.on-sale { background-color:#E0FFFF !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 xmlns="">
<book sale="false">
<title>book1</title>
<price>$8.99</price>
<language>Italian</language>
</book>
<book sale="true">
<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>
<book sale="true">
<title>book4</title>
<price>$6.99</price>
<language>Tamil</language>
</book>
<book sale="false">
<title>book5</title>
<price>$10.99</price>
<language>Hindi</language>
</book>
<book sale="true">
<title>book6</title>
<price>$2.99</price>
<language>French</language>
</book>
<book sale="false">
<title>book7</title>
<price>$34.99</price>
<language>Kannada</language>
</book>
<book sale="true">
<title>book8</title>
<price>$4.99</price>
<language>Spanish</language>
</book>
</books>
</b:dataContainer>
</b:dataSource>
<b:listGridCol select="title" label="Title" />
<b:listGridCol select="price" label="Price" />
<b:listGridCol select="@sale" label="On Sale" >
<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">
<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>
</script>
</center>
</body>
</html>
Please provide me a generic solution
I appriciate your support.
rowClasses attribute
28 July, 2008 - 12:39 — nick@backbaseTo display alternate rows in different colors you can use the rowClasses attribute. For example, the following code shows how to apply the user-defined classes "whiteRow" and "blackRow" to the odd and even rows of a listGrid.
.whiteRow {
background-color: white;
color: black;
}
.blackRow {
background-color: black;
color: white;
}
</style>
.
.
.
<b:listGrid width="auto" height="100%" readonly="true" rowClasses="whiteRow, blackRow">
.
.
.
</b:listGrid>
Thank you
28 July, 2008 - 12:54 — SimondropThank you very much its working fine.