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




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.

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

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.

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.

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!)

<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>
   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”;
   <table width=“100%”>
      <tr id=row1 onmouseover=“overRow1();” onmouseout=“outRow1();” style=“background-color:Red”>
         <td>LINE 1</td>
      <tr id=row2 onmouseover=“overRow2();” onmouseout=“outRow2();” style=“background-color:Gray”>
         <td>LINE 2</td>
      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 );


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.

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).

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.