|
Please can anybody help me for what am looking,
Can we have the follwing features for a table in the listGrid.
1)Hide/show table column
2)Marking alternative column as white-gray
3)Freeze index, and column heder
4)Tooltips support
5)Exporting the table contents as excel sheet
6)Context help
Following is the sample code for ListGrid.I want I want all the above feature to it. Is this possible ?
<!-- -->
<!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>
<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" />
<b:listGrid width="auto" height="100%" rowClasses="rowClass1, rowClass2">
<b:dataSource e:behavior="b:localData" dataType="application/xml">
<b:dataContainer>
<xi:include href="test.xml" />
</b:dataContainer>
</b:dataSource>
<b:listGridCol label="Title" select="title" />
<b:listGridCol label="Author" select="author"/>
<b:listGridCol lable="Price" select="price"/>
</b:listGrid>
</script>
</body>
</html>
<!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>
<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" />
<b:listGrid width="auto" height="100%" rowClasses="rowClass1, rowClass2">
<b:dataSource e:behavior="b:localData" dataType="application/xml">
<b:dataContainer>
<xi:include href="test.xml" />
</b:dataContainer>
</b:dataSource>
<b:listGridCol label="Title" select="title" />
<b:listGridCol label="Author" select="author"/>
<b:listGridCol lable="Price" select="price"/>
</b:listGrid>
</script>
</body>
</html>
listgrid help
25 July, 2008 - 11:58 — andysHi Prasad,
I will try to answer some of your listgrid questions
1)Hide/show table column
Yes, it is possible to hide and show the table column. You can use the display attribute. It determines whether the listgrid column is being displayed or not.
2)Marking alternative column as white-gray
It is possible by using a fieldCreator. You can find more information in the reference.chm
3)Freeze index, and column heder
This one, I am not quite understand what you mean. Would you like to explain more about it?
4)Tooltips support
Yes, it is possible. However you have to attached the tooltip in the viewNode for every column of row (depends on what you want). And you can attached it via the pageRefreshed event handler. (there is some post about it, I will tell you when I have found one)
5)Exporting the table contents as excel sheet
Means?
6)Context help
Do you mean Context help is ContextMenu? When you right click then it will display more option for selected row in the listgrid?
Andys
Hi Andys, Thanks for your help
28 July, 2008 - 04:29 — SimondropPlease find the below message for more clarifications on point 3 and 5, and can you please give a sample example of the tooltip,
3)Freeze index, and column header
Column headers should not be scrollable like in the html how we do for frames scrolling="no".
6)Context help in the sense , some help for navigating through our designed GUI.
I appreciate your help.
Listgrid pageRefreshed
28 July, 2008 - 09:30 — andysHi Prasad,
This node is almost the same as the toolTip problem you have.
But in this node, instead of using tooltip...the case is using infoBox.
But the logic is the same.
http://bdn.backbase.com/node/4362
Hope this helps,
Andys
Thank You Andys
28 July, 2008 - 09:45 — SimondropI followed the url which you sent to me for tooltip in the form of infoBox, but am not able to see the infobox on mouse over of every cell, can you please go through my code and let me know where am I going wrong.
<!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:infoBox id="infoBox" width="250px;">
<p>
Just an example of listgrid showing infobox for each cell
</p>
</b:infoBox>
<b:listGrid width="auto" height="100%" readonly="true" rowClasses="rowClass1, rowClass2">
<e:handler event="pageRefreshed" type="application/javascript">
<![CDATA[
var totalRecords = this.viewNode.selectNodes('./div/table/tbody/tr');
for(var i=0;i<totalRecords.length;i++){
var tr = totalRecords[i];
var totalTd = tr.selectNodes('td');
for(var j = 0; j<totalTd.length; j++){
var td = totalTd[j];
td.onmouseover = function(event){
var infoBox = bb.document.getElementById('infoBox');
infoBox.open();
bb.command.position(infoBox,this,'at-pointer',event.clientX,event.clientY);
};
td.onmouseout = function(event){
var infoBox = bb.document.getElementById('infoBox');
infoBox.close();
}
}
}
]]>
</e:handler>
<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 Andys, let me know where I am going wrong inthe above code,
I appreciate your help
Thank You Andys,
28 July, 2008 - 11:21 — SimondropAm trying the following code but am getting an error as under....
GENERIC: Javascript error: "Object doesn't support this property or method". b:listGrid [ undefined]
GENERIC: Javascript error: "GENERIC: Javascript error: "Object doesn't support this property or method".". b:listGrid [ undefined, undefined, undefined]
And my code is as under...
<!-- -->
<!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:infoBox id="infoBox" width="250px;">
<p>
Just an example of listgrid showing infobox for each cell
</p>
</b:infoBox>
<b:listGrid width="auto" height="100%" readonly="true" rowClasses="rowClass1, rowClass2">
<e:handler event="pageRefreshed" type="application/javascript">
<![CDATA[
var totalRecords = this.viewNode.selectNodes('./div/table/tbody/tr');
for(var i=0;i<totalRecords.length;i++){
var tr = totalRecords[i];
var totalTd = tr.selectNodes('td');
for(var j = 0; j<totalTd.length; j++){
var td = totalTd[j];
td.onmouseover = function(event){
var infoBox = bb.document.getElementById('infoBox');
infoBox.open();
bb.command.position(infoBox,this,'at-pointer',event.clientX,event.clientY);
};
td.onmouseout = function(event){
var infoBox = bb.document.getElementById('infoBox');
infoBox.close();
}
}
}
]]>
</e:handler>
<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>
I appreciate your help.
undefined
30 July, 2008 - 11:03 — andysHi Sandy,
There is some code-issue in the pageRefreshed event handler. Based on this code, it seems that we would like to access the Object which is not exist (null).
Try to replace it with the code below
<![CDATA[
var totalRecords = this.selectNodes('view()/div/table/tbody/tr/td');
for(var i=0;i<totalRecords.length;i++){
var td = totalRecords[i];
td.onmouseover = function(event){
var infoBox = bb.document.getElementById('infoBox');
infoBox.open();
bb.command.position(infoBox,this,'at-pointer',event.clientX,event.clientY);
};
td.onmouseout = function(event){
var infoBox = bb.document.getElementById('infoBox');
infoBox.close();
};
}
]]>
</e:handler>
Hope this works for you
Andys