|
Hi,
I want to write an event handler for individual cell in listgrid. For example when mouseover event occurs for a cell then some popup is displayed.
I am using local datasource to populate listgrid. If I write e:handler inside listGridCol then event handler is attached to column heading. For example,
<b:listGridCol select="totalfee" label="Total Fee" >
<e:handler ...>
alert('hi');
</e:handler>
</b:listGridCol>
I want the event to be bound to each cell. Please guide.
Regards,
Ajay
how to write event handler for individual cell in listgrid?
27 February, 2008 - 07:06 — akambleHi,
I gave an id to each xml element on which I want to show popup(infobox/tooltip) like this,
<e:data ...>
.
.
<book>
.
.
<price>
<p id="1">
1000
</p>
</price>
</book>
.
.
</e:data>
Then I wrote an InfoBox which refers to this paragraph id, but this doesn't work, maybe because this id will be attached to a cell of listgrid at runtime.
Please write if there is any way by which I can make individual listgrid cells respond to an event, and show popup, execute some behaviour.
Regards,
Ajay
event handler to cells in ListGrid
27 February, 2008 - 10:10 — andysHi Akamble,
you can use the pageRefreshed event handler.
<e:handler event="pageRefreshed" type="application/javascript">
<![CDATA[
//just for example, I add the alert for every row in listgrid
var totalRecords = this.viewNode.selectNodes('./div/table/tbody/tr');
for(var i=0;i<totalRecords.length;i++){
var tr = totalRecords[i];
tr.onmouseover = function(){
alert('I am on mouseover');
};
tr.onmouseout = function(){
alert('I am on mouseout');
};
}
]]></e:handler>
</b:listGrid>
hopes that help
event handler to cells in ListGrid
27 February, 2008 - 14:34 — akambleHi Andy,
Is it possible to attach each listGrid cell with an InfoBox ?
I want to display some summary data in listGrid cells, and when user clicks on any cell then I want to present detailed information in an InfoBox.
Since listGrid model is made up of listGridCol, we can't access individual cells, to write InfoBox code in it.
Also if I try to put InfoBox through 'bb.command.create' then, InfoBox will be inserted into HTML(view), and BackBase runtime will not process it.
Please let me know if there is any way to bind InfoBox to individual listGrid cells.
Regards,
Ajay
event handler to 1 cell in each row
23 April, 2008 - 21:22 — MikeADavisIs is possible to have the event handler single out a particular cell? I would like to do the above but for only the cell labeled "Change".
<b:listGridCol label="Title" select="title" />
<b:listGridCol label="Description" select="description" />
<b:listGridCol label="Location" select="location" />
<b:listGridCol label="Start Time" select="start_time" />
<b:listGridCol label="End Time" select="end_time" /
<b:listGridCol label="Change" select="change" width="75px" />
</b:listGrid>
Thanks,
Mike
event handler to 1 cell in each row
24 April, 2008 - 07:39 — akambleHi Mike,
You can use <b:fieldCreator /> for this purpose. Here is sample code,
<b:listGridCol label="Title" select="title" />
<b:listGridCol label="Description" select="description" />
<b:listGridCol label="Location" select="location" />
<b:listGridCol label="Start Time" select="start_time" />
<b:listGridCol label="End Time" select="end_time" /
<b:listGridCol label="Change" select="change" width="75px">
<b:fieldCreator type="text/javascript">
var containerDiv = bb.document.createElementNS('http://www.w3.org/1999/xhtml', 'div');
containerDiv.viewNode.innerHTML = value;
containerDiv.addEventListener('click', function() {alert("Change is : " +value)}, false);
controller.appendChild(containerDiv);
return containerDiv;
</b:fieldCreator>
</b:listGridCol>
</b:listGrid>
Here we are creating a div for each Change cell, we are putting value (value is the current cell value) in innerHTML of this div. Then we are attaching an click event listener to this div. The second argument to this function can be name of a function or an inline function as I have used.
Hope this solves your problem :)
Regards,
Ajay
event handler to 1 cell in each row
24 April, 2008 - 07:52 — MikeADavisThank you, I understand a bit more now.
Mike
listgrid with infobox
27 February, 2008 - 16:27 — andysHi Ajay,
you can try to access the td for each row like this one
<p>
Just an example of listgrid showing infobox for each cell
</p>
</b:infoBox>
<b:listGrid ...>
<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:listGrid>
hopes that help
listgrid with infobox
28 February, 2008 - 09:47 — akambleHi Andy,
Thanks for your replies, they are being really helpful to us :).
I tried your solution, and it worked, but I have some queries, I wrote following code,
//just for example, I add the alert for every row in listgrid
var totalRecords = this.viewNode.lastChild.lastChild.lastChild.childNodes;
for(var i=0;i<totalRecords.length;i++){
var node = totalRecords[i].lastChild;
node.onmouseover = function(event) {
var infoBox = bb.document.getElementById('infoBox');
infoBox.open();
bb.command.position(infoBox, node, 'at-pointer', event.clientX, event.clientY);
};
node.onmouseout = function(event) {
var infoBox = bb.document.getElementById('infoBox');
infoBox.close();
};
}
]]></e:handler>
1. I get a infoBox attached to each listGrid cell, however infoBox is not positioned on that cell as we want. InfoBox is positioned on the boundaries of listGrid. Maybe this is happening because event in event.clientX refers to event property of e:handler and not to one declared in javascript function. Please write, how to position infoBox exactly on listgrid cell.
2. On pageRefreshed event handler we are just binding event handlers(mouseover, mouseout) to cells. The code in this handlers should execute on mouseout and mouseover events on listgrid cells. But this code gets executed on pageRefreshed event too. We found that when we browse through pages, pageRefreshed is called, and infoBox is displayed without any mouseover activity. Please write, how to avoid this, and make mouseover and mouseout handlers respond to those events only.
3. As you can see in my code, I have used combination of firstNode, lastNode, childNodes to traverse listgrid. Whenever I use selectNodes()/selectSingleNode() on viewNode, runtime gives error that 'Object does not support this property'. However firstChild, lastChild syntax works fine. Please write, if you know the reason for this error. I really want to work with simple XPaths instead of this alternate syntax.
Anyone have an answer to
10 March, 2008 - 17:48 — tordonaAnyone have an answer to akamble's #3 question?
I think using Xpath would solve a problem of mine that's on the same line. I've tried using various ways to grabs the TR nodes of a listgrid, but have only been able to see those TRs of limited results due to a pagerbar.
I think viewNode is not available at runtime and that is why is not working. I could be wrong.
listgrid
10 March, 2008 - 18:17 — andysHi,
I can not reproduce the problem you gave, eventhought I used your code directly.
Which browser do you use?
Which version of Backbase do you use?
thanks
The "onkeyup"-event wont work on this...
23 June, 2008 - 12:53 — MaxikHi,
your solution is great, but can you tell me why it´s not working on any key-actions? Mouse-actions (onmouseover, onclick) work fine, but for example "onkeyup" it doesnt show reaction.
code-snippet:
tr.onkeyup = function()
...
Thanks in advance!
tr.onkeyup does not work
23 June, 2008 - 13:16 — andysHi Maxik,
The onkeyup handler is allowed when you are in edit mode of the listgrid.
Thank you
Andys