Demo - Spillable Cells

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.grapecity.com/wijmo/5.latest/styles/wijmo.min.css">
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.grid.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.input.min.js"></script>
<div class="container">
  <h1>
    Spillable Cells
  </h1>
  <p>
    This sample shows an easy way to implement Excel-style
    "spillable" cells.</p>
  <p>
    The <b>formatItem</b> event is used to add a "spill" 
    class to any cells followed by empty ones. The "spill"
    class changes the "overflow" and "zIndex" style attributes
    so the cell content is not truncated and spills over the
    neighbor cell.</p>
  <p>
    The code also sets the <b>showMarquee</b> property to true so the
    text of the selected cell remains black (as in Excel).</p>
  <div id="theGrid">
  </div>
</div>

CSS

.wj-flexgrid {
  height: 250px;
  margin-bottom: 12px;
}

.wj-cell.spill {
  overflow: visible;
  z-index: 1; /* render over empty cells */
  /*border-right: none;*/
}

.wj-flexgrid .wj-marquee,
.wj-flexgrid .wj-colheaders,
.wj-flexgrid .wj-rowheaders,
.wj-flexgrid .wj-topleft {
  z-index: 2; /* render over spill cells */
}

.wj-cell.wj-state-selected,
.wj-cell.wj-state-multi-selected {
    background: rgba(0, 0, 0, 0.1);
    color: #000;
}

body {
  margin-bottom: 48pt;
}

JavaScript

onload = function() {

  // default grid
  var theGrid = new wijmo.grid.FlexGrid('#theGrid', {
    itemsSource: getData(),
    alternatingRowStep: 0,
    anchorCursor: true,
		showMarquee: true,
    showSelectedHeaders: 'All',
    
    // add spill class if this cell is not empty and the next one is
    formatItem: function(s, e) {
    	if (e.panel == s.cells) {
				var spill = e.col < s.columns.length - 1 && 
        	e.cell.innerHTML && !s.getCellData(e.row, e.col + 1);
				wijmo.toggleClass(e.cell, 'spill', spill);
      }
    }
  });
	theGrid.columns.defaultSize = 70;
  
  // create some random data
  function getData() {
	  var countries = [
    			'United States of America', 
    			'United Kingdom',
      		'Germany',
      		'Japan',
      		'People\'s Republic of China',
      		'South Africa'
    		],
  		  data = [];
  	for (var i = 0; i < 20; i++) {
	    data.push({
	      id: i,
	      country: countries[Math.floor(Math.random() * countries.length)],
        fld1: '',
        fld2: Math.random() < 0.25 ? 'xxx':'',
        fld3: Math.random() < 0.15 ? 'xxx':'',
	      sales: Math.random() * 100000,
	    });
	  }
    return data;
  }
}