Start Building Professional
Web Apps Today


 
Categories Question details Back To List
Question  posted by Tim on Jul 14, 2009 07:53
open dhtmlx forum
DHTMLGrid - Horizontal scrolling occuring on mouse over

I have a grid with about 30 columns which produces a horizontal scroll bar because of its width. For some reason when I mouse over the grid and glide my mouse to the right edge it automatically and abruptly scrolls the grid to the right. The same thing happens when I then glide my mouse to the left, but less abruptly.

This happens without touching the scroll bar and without any clicking of the mouse.

Is this a "feature"? And can I turn it off.

Thanks!
Answer posted by dhxSupport on Jul 15, 2009 03:16
Unfortunately we cannot reproduce this issue locally. Could you please provide any kind of sampel where we can reproduce this issue. 
Please try this example http://dhtmlx.com/docs/products/dhtmlxGrid/samples/initialization_loading/grid_config_xml.html
Does issue is reproduced here?
Answer posted on Jul 15, 2009 11:10
Answer posted by Tim on Jul 15, 2009 11:17

After I applied a stylesheet the problem seems to have gone away. However, on an older version of the page, it continues to do it. Here is the source code:

--------------------------------------------------------------------------------------------------------------------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

<html xmlns="http://www.w3.org/1999/xhtml" >

<head><title>

                View

</title></head>

<body>

    <form name="aspnetForm" method="post" action="view.aspx?viewid=a1030ffe-a318-4b8c-bc7a-d421e541ab29" id="aspnetForm">

<div>

<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTQ1Mjg2Nzc2NmRki6++F01DHVqxMYYwDg5vtRMCZmw=" />

</div>

 

    <div>

        Header<br />

        <br />

       

   

<link rel="stylesheet" type="text/css" href="js/dhtml/dhtmlxGrid/codebase/dhtmlxgrid.css" />

<link rel="stylesheet" type="text/css" href="js/dhtml/dhtmlxCombo/codebase/dhtmlxcombo.css" />

<link rel="stylesheet" type="text/css" href="js/dhtml/dhtmlxCalendar/codebase/dhtmlxcalendar.css" />

<script src="js/dhtml/dhtmlxGrid/codebase/dhtmlxcommon.js" type="text/javascript"></script>

<script src="js/dhtml/dhtmlxGrid/codebase/dhtmlxgrid.js" type="text/javascript"></script>

<script src="js/dhtml/dhtmlxGrid/codebase/dhtmlxgridcell.js" type="text/javascript"></script>

<script src="js/dhtml/dhtmlxGrid/codebase/dhtmlXGrid_ssc.js" type="text/javascript"></script>

<script src="js/dhtml/dhtmlxGrid/codebase/ext/dhtmlxgrid_filter.js" type="text/javascript"></script>

<script src="js/dhtml/dhtmlxCombo/codebase/dhtmlxcombo.js" type="text/javascript"></script>

<script src="js/dhtml/dhtmlxGrid/codebase/excells/dhtmlxgrid_excell_dhxcalendar.js" type="text/javascript"></script>

<script src="js/dhtml/dhtmlxGrid/codebase/excells/dhtmlxgrid_excell_link.js" type="text/javascript"></script>

<script src="js/dhtml/dhtmlxCalendar/codebase/dhtmlxcalendar.js" type="text/javascript"></script>

<script src="js/dhtml/dhtmlXDataProcessor/codebase/dhtmlXDataProcessor.js" type="text/javascript"></script>

<script src="js/dhtml/dhtmlxGrid/codebase/dhtmlxgrid_srnd.js" type="text/javascript"></script>

 

<script type="text/javascript">

    var mygrid;

    var myDataProcessor;

   

    function doInitGrid(){

        mygrid = new dhtmlXGridObject('gridbox');

        mygrid.setImagePath("dhtmlxSuite/dhtmlxGrid/codebase/imgs/");

 

        mygrid.init();

       

        //mygrid.saveSizeToCookie();//to save column width

                   // mygrid.loadSizeFromCookie();//to load width from cookies

                    mygrid.enableAutoSizeSaving();//enable automatic saving width

                    mygrid.saveOrderToCookie();

                    mygrid.saveSortingToCookie();

                   

                    mygrid.enableLightMouseNavigation(true);

        mygrid.preventIECaching(true);

        mygrid.enableSmartRendering(true);

 

                   

                    //mygrid.loadXML("service/viewconfig.ashx?viewid=a1030ffe-a318-4b8c-bc7a-d421e541ab29");

                    mygrid.loadXML("service/viewconfig.ashx?viewid=a1030ffe-a318-4b8c-bc7a-d421e541ab29",function(){

          mygrid.loadSizeFromCookie();

          mygrid.loadSortingFromCookie();

          mygrid.loadOrderFromCookie();

          //alert(mygrid.hdr.rows[2].cells[1].tagName);

//          var input = mygrid.hdr.rows[2].cells[1].getElementsByTagName("TD");

//           input.value="Foo";

//           mygrid.filterByAll();

        });

       

      

                myDataProcessor = new dataProcessor("service/save.ashx");

        myDataProcessor.setUpdateMode("cell");//available values: cell (default), row, off

        myDataProcessor.enableDataNames(true);

        myDataProcessor.enableDebug(true);

        myDataProcessor.init(mygrid);

    }

   

   

 

   

</script>

 

<div id="gridbox" style="width:100%;height:600px;"></div>

 

<script type="text/javascript">

    doInitGrid();

</script>

 

        <br />

        <br />

        Footer

    </div>

    </form>

</body>

</html>

 

Answer posted by Eric on Nov 05, 2009 13:19
You've enabled the "LightMouseNavigation" option. This causes the scrolling with the wave of your mouse.