Demo - FlexGrid Overflow on Hover
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>
FlexGrid: Overflow on Hover
</h1>
<p>
Hover cells to show their full content.</p>
<div id="theGrid">
</div>
</div>
CSS
.wj-flexgrid {
max-height: 250px;
margin-bottom: 12px;
--overflow-color: yellow;
}
.wj-cells .wj-cell:hover {
overflow: visible;
z-index: 6;
color: black;
text-shadow: /* Many shadows blur out the area around the text */
0 0 1px var(--overflow-color),
0 0 2px var(--overflow-color),
0 0 3px var(--overflow-color),
0 0 4px var(--overflow-color),
0 0 5px var(--overflow-color),
0 0 6px var(--overflow-color),
0 0 7px var(--overflow-color),
0 0 8px var(--overflow-color),
0 0 9px var(--overflow-color),
0 0 10px var(--overflow-color)
}
JavaScript
onload = function() {
new wijmo.grid.FlexGrid('#theGrid', {
alternatingRowStep: 0,
showMarquee: true,
showSelectedHeaders: 'All',
itemsSource: getData()
});
// create some random data
function getData() {
var countries = [
'United States of America',
'Germany (Deutsches Bundesrepublik)',
'United Kingdom',
'Japan (Nippon)',
'Italy (Il Bel Paese)',
'Greece'
];
var data = [];
for (var i = 0; i < 10; i++) {
data.push({
id: i,
from: getOne(countries),
to: getOne(countries),
active: i % 5 != 0,
downloads: Math.round(Math.random() * 200000),
sales: Math.random() * 100000,
expenses: Math.random() * 50000
});
}
return data;
}
function getOne(arr) {
return arr[Math.floor(Math.random() * arr.length)];
}
}