Start Building Professional
Web Apps Today

Onmouseover in attachfooter hides the data behind the grid

Hi,
I'm having a grid. I'm making use of images in the cells and also making use of the 'onmouseover' functionality for the images. On mouse i've written a function to display the html table. If i dont have footer in the grid then the html table is displayed on the table. If i have footer also which displays the image and also having the 'onmouseover' functionality to display the html table, then on moving the cursor over the image the table is displayed behind the grid. i.e. the html table within the range of the grid is hidden and only the table outside the area of the grid is displayed. How can this be solved? Please suggest the solution?

When grid has footers it sets position:relative to its container , as result your custom content must have z-Index value > 0 to be shown over grid.
Just increase z-index value of your "mouseover" table - it must resolve issue.

Thanks for the reply. Can you be a bit more specific on how to increase the z-index? I dont want to alter any of the files from the grid. Can this be handled by using the xml code? Suggest me the process.

I've tried with

<div style=""z-index:1;""><table> - - -  - - </table></div>

for the table that is being displayed on mouse over,

Still i'm not able to get the desired value. What might be the problem?

>><div style=""z-index:1;""><table> - - -  - - </table></div>
Actually this must be enough to show data ( unless you are setting some z-index for grid's container as well.
Attached sample uses the same approach and tooltip show over grid in all modern browsers.

If problem still occurs for you - try to increase z-index value.

Thanks for the reply,

I was still not able get the issue resolved. I've set the z-index of grid table to be '0' and then i've set the z-index of the table(HTML Table) that is displayed onmouseover of the image to '1'. In the grid i have made use of attach footer functionality. Also i'm making use of smart rendering. If i take out the attach footer functionality from the grid then the table onmouseover is  displayed without any problem. Guide me in this issue.

The sample of the code that i'm making use of is given below.

For HTML table that is displayed onmouseover

sHeader = "<div id=""itable"" style=""z-index:1;""><table width=" 10 _
      " border=1><tr><th colspan=2>Header</th></tr>"

sString = sHeader & "<tr><td>Row1</td></tr>" & _
       "<tr><td>Row2</td></tr>" & _
       "<tr><td>Row3</td></tr>" & _
       "<tr><td>Row4</td</tr>" & _
       "<tr><td>Row5</td</tr></table></div>"     

For image in the grid with mouseover function

Temporary = "<img onmouseover=""Function1(getMouseoverTable(Parameter)\, event);"" onmouseout=""HideTable();"" " & _
    "border=""0"" align=""left"" src=""/Path/Image.gif"

The same variable above mentioned is used for displaying the image in the footer and also in the cells of the rows also.

 

 

Please check attached sample - uses exactly same code for table creation and mouseover processing - correctly works in both IE and FF
If problem still occurs for you - please provide any kind of sample where issue can be reconstructed.