Start Building Professional
Web Apps Today


 
Categories Question details Back To List
Question  posted by Tom Ince on Nov 10, 2008 07:27
open dhtmlx forum
rowselected style interfering with other javascript code

The rowselected style for dhtmlXGrid is interfering with other code generated for us by a different tool. Was wondering if it's as easy as just replace any instance of "rowselected" in

dhtmlxgrid.js
dhtmlxtreegrid.js
dhtmlxgrid.css

with "dhx_rowselected"?

Also, in future updates, is it possible to use style classes with names that will be unique to dhtmlx? If not, at a minimum, can this "rowselected" class be changed, as it's obviously very common.
Answer posted by Support on Nov 10, 2008 08:11
The css use class defenition as 
      div.gridbox table.obj tr.rowselected td
so it can't harm any other custom code on the page ( or it is very small posibility of such harm ) 

>> if it's as easy as just replace any instance of "rowselected" in
yes, replacing the rowselected with some other name in mentioned files+dhtmlxgrid.css will work without any side effects. 

>>as it's obviously very common
actually, this is first report of such issue
Answer posted by Tom Ince on Nov 10, 2008 08:24

I only meant to imply that the "rowselected" class name is a common name.

Not sure exactly why it's happening, but it is.  I've actually now discovered that even mixing in the dhtmlxwindows.css file is messing up the mouseover/mouseout row highlighting in our other grids on the page.

Answer posted by Tom Ince on Nov 10, 2008 08:48
After further review, it seems the onmouseover and onmouseout events for my TD/TR elements are being replaced.  The css is not directly causing the problem.  I can include all the css and js files no problem.   But as soon as create a dhtmlXWindow, my row highlighting ceases to work for TR elements.  I'll try and develop a small testing app to show this.
Answer posted by Tom Ince on Nov 10, 2008 09:02

Seems the problem is with me managing my own viewport (which I have to do, because dhtmlXWindows doesn't move the viewport when scolling, which makes modal windows, not totally modal!)

<HTML>
<HEAD>
<LINK rel='STYLESHEET' type='text/css' href='dhtmlx/dhtmlxwindows.css'>
<LINK rel='STYLESHEET' type='text/css' href='dhtmlx/skins/dhtmlxwindows_web.css'>
<LINK rel="STYLESHEET" type="text/css" href="dhtmlx/dhtmlxgrid.css">
<LINK rel="STYLESHEET" type="text/css" href="dhtmlx/dhtmlxgrid_skins.css">
<SCRIPT src="dhtmlx/dhtmlxcommon.js"></SCRIPT>
<SCRIPT src="dhtmlx/dhtmlxtree.js"></SCRIPT>
<SCRIPT src="dhtmlx/dhtmlxgrid.js"></SCRIPT>
<SCRIPT src="dhtmlx/dhtmlxgridcell.js"></SCRIPT>
<SCRIPT src='dhtmlx/dhtmlxcommon.js'></SCRIPT>
<SCRIPT src='dhtmlx/dhtmlxwindows.js'></SCRIPT>
<script>
   function overRow1()
   {
      document.getElementById(
"row1" ).style.backgroundColor = "Blue";
   }
   function outRow1()
   {
      document.getElementById(
"row1" ).style.backgroundColor = "Red";
   }
   function overRow2()
   {
      document.getElementById(
"row2" ).style.backgroundColor = "Purple";
   }
   function outRow2()
   {
      document.getElementById(
"row2" ).style.backgroundColor = "Gray";
   }
</script>
</HEAD>
<BODY>
   <table width="100%">
      <tr id=row1 onmouseover="overRow1();" onmouseout="outRow1();" style="background-color:Red">
         <td>LINE 1</td>
      </tr>
      <tr id=row2 onmouseover="overRow2();" onmouseout="outRow2();" style="background-color:Gray">
         <td>LINE 2</td>
      </tr>
   </table>
   <script>
      var dhxWindows = new dhtmlXWindows();
      dhxWindows.setImagePath(
"dhtmlx/imgs/" );
      dhxWindows.setSkin(
"web" );
      dhxWindows.enableAutoViewport(
false );
      // Comment out the following line of code, and you'll notice the colors change when you mouse over/out of TRs.
      // With this code below enabled you'll notice the color changes no longer occur!
      dhxWindows.setViewport( document.body.scrollLeft, document.body.scrollTop, document.body.clientWidth, document.body.clientHeight );
   </script>
</BODY>
</
HTML>

 

Answer posted by Tom Ince on Nov 10, 2008 09:41

I was able to workaround this by setting the viewport to 0,0,0,0 initially (and whever a window was displayed) and also, setting the viewport to the proper size right before creating a new window.

However, if I wasn't using Modal windows, I'd imagine there would be other problems.

Answer posted by Support on Nov 11, 2008 05:17
In your case viewport will have constant position/size and style="opsition: absolute;" and all another body changes will ignored by viewport.
If you'd like to use it 'filled' into the body you better use default viewport (default viewport is set to document.body).
Answer posted by Tom Ince on Nov 11, 2008 06:07

I mentioned before, the default viewport does not scroll.  The following code now works perfectly for me :

var dhxWindows = new dhtmlXWindows();
dhxWindows.setImagePath(
"dhtmlx/imgs/" );
dhxWindows.setSkin(
"web" );
dhxWindows.enableAutoViewport(
false );

function dhxReposition()
{
    if( dhxWindows.isWindow( "dhxWin" ) )
        dhxWindows.setViewport( document.body.scrollLeft, document.body.scrollTop, document.body.clientWidth, document.body.clientHeight );
}

document.body.onresize = dhxReposition;
document.body.onscroll = dhxReposition;

function createWindow( dhxWinWidth, dhxWinHeight )
{
    ....
    var posX = ( document.body.clientWidth / 2 ) - ( dhxWinWidth / 2 );
    var posY = ( document.body.clientHeight / 2 ) - ( dhxWinHeight / 2 );
    // I think dhtmlX already accounts for the scroll position, because when I do the following, the window gets placed at the bottom of the webpage
    //posX += document.body.scrollLeft;
    //posY += document.body.scrollTop;
    var win = dhxWindows.createWindow( "dhxWin", posX, posY, dhxWinWidth, dhxWinHeight );

    win.attachEvent( "onClose", function( win )
        {
            dhxWindows.setViewport( 0, 0, 1, 1 );
           
return true;
        }
   
);
}

 

The dhtmlXWindow now scrolls when the browser is scrolled and the viewport becomes non existant (0,0,1,1) if there is no window, so it does not interfere with other elements on the page.  If dhtmlXWindow had an option to allow the viewport to move when the browser scrolls, that'd be great.