How to hide dojox grid selected row dashed borders

Question

This is dojox.grid.EnhancedGrid.

How can I hide the green dashed-square (around the check box) showing that this item is presently selected by keyboard, usually used for keyboard navigation?

The image is taken from: http://dojotoolkit.org/reference-guide/dojox/grid/EnhancedGrid.html

Thanks

Answer 1

You need to overwrite the css class that is causing the dashed border. First, determine which dojo theme you are using. In that picture above it looks like you might be using the newest theme, Claro. If that is the case, the offending css is located in the file:

/dojox/grid/enhanced/resources/claroEnhancedGrid.css

This is the css creating the dashed line:

.claro .dojoxGridCellFocus {
    border: 1px dashed darkblue !important;
}

My recommendation is to create a new stylesheet to override the one provided by dojo. In that stylesheet place the following code:

.claro .dojoxGridCellFocus {
    border-width: 1px !important;
    border-style: solid !important;
}

That should get you what you want.

Answer 2

Here is where you can hide dashed border, appears when any row is selected.

dojox/grid/enhanced/resources/tundra/EnhancedGrid.css (Line 503)

.tundra .dojoxGridCellFocus {
    /* border: 1px dashed darkblue !important; */
}

dojox/grid/resources/tundraGrid.css (Line 501)

.tundra .dojoxGridCellFocus {
    /* border: 1px dashed darkblue !important; */
}

---

PS: To hide column dynamically in script

grid.layout.setColumnVisibility(columnIndex, booleanValue);

Example:

grid.layout.setColumnVisibility(1, 0); // second column
grid.layout.setColumnVisibility(2, 0); // third column