Start Building Professional
Web Apps Today


 
Categories Question details Back To List
Question  posted by Michael on Jan 12, 2010 16:04
open dhtmlx forum
dhtmlxgrid and rollover link

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
Answer posted by Alex (support) on Jan 13, 2010 01:21

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]+"</a>",valsAr);

with

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

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

Answer posted by Michael on Jan 13, 2010 08:24
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
Answer posted by Alex (support) on Jan 13, 2010 08:51

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]+"</a>",valsAr);

Answer posted by Michael on Jan 13, 2010 09:16
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]+"</a>",valsAr);
Answer posted by Alex (support) on Jan 14, 2010 02:02

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]+"</a>",valsAr);

Answer posted by Michael on Jan 15, 2010 16:58
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?
Answer posted by Alex (support) on Jan 18, 2010 01:53

There is public event - onMouseOver http://www.dhtmlx.com/dhxdocs/doku.php?id=dhtmlxgrid:event_onmouseover 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]+"</a>",valsAr)

Answer posted by Michael on Jan 18, 2010 15:02
I used the code for the excell link but get an error.  This is the callback function

    <script>
        function trapRollover(param,iIndex,iRow,oGrid){
            if(iIndex==0){
                alert(mygrid.cells(0,1).getValue());
            }
        }
       </script>


this initializes the grid:

<script type="text/javascript" language="javascript">
    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: http://localhost/plugin/index.php?setperm=true&category=sku&mode=view&permission=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
Answer posted by Alex (support) on Jan 19, 2010 03:21

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]+"</a>",valsAr);

Answer posted by Michael on Jan 19, 2010 07:57
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: http://localhost/plugin/dhtmlxgrid/codebase/dhtmlxgrid.js
Line: 860

My code:

    <script>
        function trapRollover(param,iIndex,iRow,oGrid){
            if(iIndex==0){
                alert(myGrid.cells(iRow,12).getValue());
            }
        }
       </script>


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
Answer posted by Alex (support) on Jan 19, 2010 08:13

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.



Answer posted by Michael on Jan 19, 2010 09:14
Still having the problem.  Files attached.
Michael
Attachments (1)
test_demo.zip232.15 Kb
Answer posted by Alex (support) on Jan 19, 2010 10:09

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]+"</a>",valsAr);

Answer posted by Michael on Jan 19, 2010 13:03
Hi - I tried the code you suggest, but still get an error: when I rollover:

Error: syntax error
Source File: http://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</a>
Answer posted by Alex (support) on Jan 20, 2010 01:21

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]+"</a>",valsAr);

Answer posted by Michael on Jan 20, 2010 11:38
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</a>


Michael
Answer posted by Alex (support) on Jan 21, 2010 04:08

Hello

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

Attachments (1)
sample_mouseover_link.zip59.90 Kb
Answer posted by Michael on Jan 21, 2010 14:43
Thank you Alex.  The code you provided seems to have solved my problem!