Grid 3.0 bug: same row cell selection issue

Suite and Optimus Suite 5
#1

Hi,

We just recently replaced our dhtmlxgrid 2.6 code with 3.0 and noticed a strange issue with cell selection:

When you select another cell on the same row as the currently selected cell, cell highlighting disappears and row highlighting remains. The newly selected cell does become the active cell, however since we navigate our grids using arrow keys, it gets frustrating not knowing where we are on a certain row.

If you click any cell on a different row, cell highlighting returns.

Here’s my test code – I can confirm it works fine on v2.6:

dhtmlxgrid.html:

<!doctype html>
<html lang="en-us">
<head>
  <link rel="stylesheet" type="text/css" href="./dhtmlxGrid-3.0/codebase/dhtmlxgrid.css" />
  <script src="./dhtmlxGrid-3.0/codebase/dhtmlxcommon.js" language="javascript"></script>
  <script src="./dhtmlxGrid-3.0/codebase/dhtmlxgrid.js" language="javascript"></script>
  <script src="./dhtmlxGrid-3.0/codebase/dhtmlxgridcell.js" language="javascript"></script>
</head>
<body>
  <h4>dhtmlxgrid test</h4>
  <div id="testgrid" style="width:900px; height: 200px;"></div>
  <script language="javascript">
    testgrid = new dhtmlXGridObject('testgrid');
    testgrid.setImagePath('./dhtmlxGrid-3.0/codebase/imgs/');
    testgrid.init();
    testgrid.setSkin('dhx_skyblue');
    testgrid.loadXML('./dhtmlxgrid.xml');
  </script>
</body>
</html>

dhtmlxgrid.xml:

<?xml version="1.0" encoding="utf-8"?>
<rows>
  <head>
    <column type="ed" sort="str" width="140" align="center">Col1</column>
    <column type="ed" sort="str" width="*" align="center">Col2</column>
    <column type="ed" sort="str" width="86" align="center">Col3</column>
    <column type="ed" sort="str" width="60" align="center">Col4</column>
    <column type="ed" sort="str" width="65" align="center">Col5</column>
    <settings>
      <colwidth>px</colwidth>
    </settings>
  </head>
  <row id="0">
    <cell></cell>
    <cell></cell>
    <cell></cell>
    <cell></cell>
    <cell></cell>
  </row>
  <row id="1">
    <cell></cell>
    <cell></cell>
    <cell></cell>
    <cell></cell>
    <cell></cell>
  </row>
</rows>
#2

I forgot to mention that I realized the onRowSelect event doesn’t work either… only works if the new cell is from a different row every time.

#3

Seems like a fairly significant bug. I’m surprised at the lack of responses.

#4

All of these bugs were already fixed.
You can contact our support to get the fixed version.

#5

I can confirm the onRowSelect bug as well. It only works if you change rows between selections.

#6

This issues has been fixed and will be included at the next version of dhtmlxGrid. if you want fixes faster please contact support@dhtmlx.com

#7

Hi,

There is an upgrade for this (Pro version)?

#8

We actually encountered this same problem when working with the grid. Here’s how we modified the code to make this work as expected.

In dhtmlxgrid.js, find the following function declaration:

this.doClick=function(el, fl, selMethod, show){

Look for this block of code, about halfway down in the function:

} else if (selMethod == 2){ if (el.parentNode.className.indexOf("rowselected") != -1){ el.parentNode.className=el.parentNode.className.replace(/rowselected/g, ""); this.selectedRows._dhx_removeAt(this.selectedRows._dhx_find(el.parentNode)) var skipRowSelection = true; } } this.editStop();
We need to handle the case where the row has already been selected. Change this block of code to be the following (inserting a new “else if” statement code block):

} else if (selMethod == 2){ if (el.parentNode.className.indexOf("rowselected") != -1){ el.parentNode.className=el.parentNode.className.replace(/rowselected/g, ""); this.selectedRows._dhx_removeAt(this.selectedRows._dhx_find(el.parentNode)) var skipRowSelection = true; } } else if(el.parentNode.className.indexOf("rowselected") !== -1) { this.clearSelection(); return this.doClick(el, fl, 0, show); } this.editStop();

This will make selections work as expected on rows that have already been selected.