FlexGrid

Tab over Read-Only cells (column)

by Troy Taylor

HTML

<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.min.js"></script>
<link rel="stylesheet" href="http://cdn.wijmo.com/5.latest/styles/wijmo.min.css">
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.input.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.grid.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<div class="container">
  <div class="row">
  
  <h1>
  FlexGrid
  </h1>
  <p>The FlexGrid below uses custom tabbing to navigate to cells. It also skips over the Downloads column when tabbing through. When tabbing to a cell containing a button, the button gains focus immediately and the text becomes red. This allows end-users to use the space-bar to handle the button's click action.
  </p>
  <div id="theGrid"></div>
  
  </div>  
</div>

CSS

.wj-flexgrid {
  height: 300px;
  margin-bottom:24px  
}
.disabled-column{
  background: lightgray !important;
  cursor: default;
}
.wj-cell button {
    color: blue;
}
.wj-cell button:focus {
    color: red;
}

JavaScript

// create some random data
  var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','),
    data = [];
  for (var i = 0; i < countries.length; i++) {
    data.push({
      country: countries[i],
      downloads: Math.round(Math.random() * 20000),
      sales: Math.random() * 10000
    });
  }
  
  var template = '<button class="btn btn-default button-column" name="deleteBtn">Delete Row</button>';

  // initialize a grid in code
  var grid = new wijmo.grid.FlexGrid('#theGrid', {
  	autoGenerateColumns: false,
    itemsSource: data,
    keyActionTab: "Cycle",
    selectionMode: "Cell",
    isReadOnly: false,
    columns: [
    	{ header: 'Delete', binding: 'template', cssClass: 'button-column', isReadOnly:true },
      { binding: 'country', header: 'Country', cssClass: 'test' },
      { binding: 'downloads', header: 'Downloads', isReadOnly: true, cssClass: 'disabled-column' },
      { header: 'Delete', binding: 'template', cssClass: 'button-column', isReadOnly: true },
      { binding: 'sales', header: 'Sales', format: 'c' },
      { header: 'Delete', binding: 'template', cssClass: 'button-column', isReadOnly: true }
    ],
    formatItem: function(s,e) {
    		//console.log(s);
        if (e.panel == s.cells && s.columns[e.col].binding == 'template') {
        	var item = s.rows[e.row].dataItem,
              html = wijmo.format(template, item);
          e.cell.innerHTML = html;
        }
    },
    selectionChanged: function(s,e) {
    	if( !s.isReadOnly && e.row >= 0 && e.col >= 0 ) {
      	if( !s.columns[e.col].isReadOnly ) {
        	s.startEditing(true, e.row, e.col, true);
        } else {
        	if( s.columns[e.col].cssClass.includes('button-column')) {
          	var el = e.panel.getCellElement(e.row, e.col);
            if (el) {
            	var button = el.querySelector('button');
              if (button) {
              	button.focus();
              }
            }
          }
        }
      }
    }, // end selectionChanged
    
   ...