dhtmlxgrid and rollover link

Suite and Optimus Suite 5
#1

I am converting an existing webpage to use dhtmlxgrid. The existing page has a grid (not dhtmlx) that includes rollover links. When user rolls over an image or text it uses the onmouseover and onmouseout events to create a popover frame that displays the an image or text from the database based on the link.



I can create links in a dhtmlxgrid that popup new windows - is it possible to hook mouse events to the link?



Thanks,

Michael

#2


You can modify the dhtmlxgrid_excell_link.js to call some function on mouseover:


For example if you replace the following line in this library:


this.setCValue("<a style=‘color:black’ “+valsAr[1]+” onclick=’(_isIE?event:arguments[0]).cancelBubble = true;’>"+valsAr[0]+"",valsAr);


with


this.setCValue("<a style=‘color:black’ “+valsAr[1]+” onclick=’(_isIE?event:arguments[0]).cancelBubble = true;’ onmouseover=‘someFunc(event||arguments[0])’>"+valsAr[0]+"",valsAr);


the someFunc function will be called on mouseover and it’ll get native event object as a parameter.

#3

Is this a universal solution - meaning will it apply to all links generated in the grid that references that js?  In my grid I have several columns of data, several columns of links (which should not be mouse rollovers) and one or two columns that should be mouse rollovers.  Can I modify the script so that links in some columns are mouseovers and some are not?

Thanks,
Michael

#4


You can also pass column index to this function:


this.setCValue("<a style=‘color:black’ “+valsAr[1]+” onclick=’(_isIE?event:arguments[0]).cancelBubble = true;’ onmouseover=‘someFunc(event||arguments[0],"+this.cell._cellIndex+")’>"+valsAr[0]+"",valsAr);

#5

Is it possible to access the column name instead of the column index so that I can pass this value into the function?  The order of the column which needs the mouseover may vary from grid to grid, but I could probably make the name static.  Or if not is there some tag or comment field that can be set for a column when I initialize the grid that can be used as a flag when the mouseover event is triggered?

e.g.

this.setCValue("<a style=‘color:black’ “+valsAr[1]+” onclick=’(_isIE?event:arguments[0]).cancelBubble = true;’ onmouseover=‘someFunc(event||arguments[0],"+this.SomeOtherPropertyOfTheColumnLikeNameOrTagWhichCanBeSetThroughGridInitialization+")’>"+valsAr[0]+"",valsAr);

#6


The following code passes 3 parameter. grid object is the third one:


this.setCValue("<a style=‘color:black’ “+valsAr[1]+” onclick=’(_isIE?event:arguments[0]).cancelBubble = true;’ onmouseover=‘someFunc(event||arguments[0],"+this.cell._cellIndex+","+this.grid+")’>"+valsAr[0]+"",valsAr);

#7

Is it possible to get the row index of the link which fires the mouseOver event?  More generally, is there a list of properties or objects that can be passed into my custom function from the mouseOver event as you describe above?  In my situation,  I need a key value for the row in the grid which I can pass through the mouseOver event to another url to generate the popover.  One way might to create a hidden column in the grid which stores the key - if I can get the row index or id I should be able to access the value of the hidden cell to retrieve the key.  Is this also possible?

#8


There is public event - onMouseOver dhtmlx.com/dhxdocs/doku.php? … nmouseover You can try to use it instead of approach provided before.


In case of link excell modification - the parameter highlighted in the following link is rowId


this.setCValue("<a style=‘color:black’ “+valsAr[1]+” onclick=’(_isIE?event:arguments[0]).cancelBubble = true;’ onmouseover=‘someFunc(event||arguments[0],"+this.cell._cellIndex+","+this.cell.parentNode.idd+","+this.grid+")’>"+valsAr[0]+"",valsAr)

#9

I used the code for the excell link but get an error.  This is the callback function

   


this initializes the grid:


    var mygrid;
    function doInitGrid(){
        mygrid = new dhtmlXGridObject(‘mygrid_container’);     
        …
        //mygrid.attachEvent(“onSubGridLoaded”, setTimeout(‘filterGrid()’, 300));               
    }

This is the error:

Error: missing ] after element list
Source File: localhost/plugin/index.php?setpe … rmission=4
Line: 1, Column: 54
Source Code:
trapRollover(event||arguments[0],0,0000000045,[object Object])

I can’t figure out what’s causing the error.

Thanks,
Michael

#10


Hello,


there were a mistake in the approach provided before. Please try to use the next one instead


this.setCValue("<a “+valsAr[1]+” onclick=’(_isIE?event:arguments[0]).cancelBubble = true;’ onmouseover=‘trapRollover(event||arguments[0],"+this.cell._cellIndex+","+this.cell.parentNode.idd+",this.parentNode.parentNode.grid)’>"+valsAr[0]+"",valsAr);

#11

Thanks - the revised code does not error.  When I try to access the value of a cell from the grid using the row index supplied by the code, it errors with the following message:

Error: c is null
Source File: localhost/plugin/dhtmlxgrid/code … mlxgrid.js
Line: 860

My code:

   


I try accessing the cell value using my variable in JS referring to the grid (myGrid) but also the variable passed into the fxn containing the reference to the grid from your code (oGrid).  What is wrong with my code?

Thanks,
Michael

#12


Locally the following code shows the correct value:


function trapRollover(param,iIndex,iRow,oGrid){
alert(oGrid.cells(iRow,iIndex).getValue());
}


If the issue isn’t solved, please provide the complete demo.






#13

Still having the problem.  Files attached.
Michael

test_demo.zip (227 KB)

#14


Row ids aren’t number in your grid. So the id should be placed in quotes when it’s passed to the trapRollover function:


this.setCValue("<a “+valsAr[1]+” onclick=’(_isIE?event:arguments[0]).cancelBubble = true;’ onmouseover=‘trapRollover(event||arguments[0],"+this.cell._cellIndex+",’"+this.cell.parentNode.idd+"’,this.parentNode.parentNode.grid)’>"+valsAr[0]+"",valsAr);

#15

Hi - I tried the code you suggest, but still get an error: when I rollover:

Error: syntax error
Source File: localhost/plugin/test_demo/test.html
Line: 1, Column: 34
Source Code:
trapRollover(event||arguments[0],0,


I looked at the underlying html in the bad rollover link (through firebug) and it looks like this:
<a ,this.parentnode.parentnode.grid)="" 0000000001="" onmouseover=“trapRollover(event||arguments[0],0,” onclick="(_isIE?event:arguments[0]).cancelBubble = true;" title="">1234

#16


There was my typo. The quotes must be escaped as ’ ’ are already used:


this.setCValue("<a “+valsAr[1]+” onclick=’(_isIE?event:arguments[0]).cancelBubble = true;’ onmouseover=‘trapRollover(event||arguments[0],"+this.cell._cellIndex+",’"+this.cell.parentNode.idd+"’,this.parentNode.parentNode.grid)’>"+valsAr[0]+"",valsAr);

#17

Hi Alex,

I plugged the code you sent into dhtmlxgrid_excell_link.js but the demo I sent you still has the same error.  The html of the link of the first cell of the first column that it spits out is:

<a ,this.parentnode.parentnode.grid)="" 0000000001="" onmouseover=“trapRollover(event||arguments[0],0,” onclick="(_isIE?event:arguments[0]).cancelBubble = true;" title="">1234


Michael

#18


Hello


please see attached sample. Possibly it’ll solve the problem


sample_mouseover_link.zip (58.5 KB)

#19

Thank you Alex.  The code you provided seems to have solved my problem!