Unable to select rows in dhtmlxGrid

I have a layoutobject with pattern as image below

In cells(“a”) I have an attached dhtmlxMenu and a dhtmlxTreeView
In cells(“b”) I have an attached dhtmlxGrid
In cells(“c”) I have an attached dhtmlxGrid

as by this code…

layout = new dhtmlXLayoutObject({
                parent: "myDiv",
                pattern: "3L",
                height: document.getElementById("myDiv").style.height,
                width: document.getElementById("myDiv").style.width,
            });
layout.cells("a").setText("@ViewBag.treeHeader");
layout.cells("b").hideHeader();
layout.cells("c").hideHeader();

myTree = layout.cells("a").attachTreeView();
            myTree.enableCheckboxes(true);
            myTree.enableDragAndDrop(true);

var myGrid_B = layout.cells("b").attachGrid();
var myGrid_B_Header = "Column A,Column B";

myGrid_B.setHeader(myGrid_B_Header);
myGrid_B.enableAutoWidth(true);
myGrid_B.init();

var myGrid_C = layout.cells("c").attachGrid();
var myGrid_C_Header = "Column A,Column B";

myGrid_C.setHeader(myGrid_C_Header);
myGrid_C.enableAutoWidth(true);
myGrid_C.init();

myGrid_B.addRow(0, ["Value 1","Value 2"]);
myGrid_B.addRow(1, ["Value 1","Value 2"]);
myGrid_B.addRow(2, ["Value 1","Value 2"]);

myGrid_C.addRow(0, ["Value 1","Value 2"]);
myGrid_C.addRow(1, ["Value 1","Value 2"]);
myGrid_C.addRow(2, ["Value 1","Value 2"]);

I am able to select rows in myGrid_C but not in myGrid_B, but I cannot figure out why?

I found that if I add a row with row Id 0, I cannot select the row. But if the row Id is > 0 it can be selected!

Unfortunately it is not available to use the “0” as an id of the row. “0” is reserved for the “rows” tag.