jquery ui + wijmo flexgrid
HTML
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script src="http://cdn.wijmo.com/5.20153.102/controls/wijmo.min.js"></script>
<link rel="stylesheet" href="http://cdn.wijmo.com/5.20153.102/styles/wijmo.min.css">
<script src="http://cdn.wijmo.com/5.20153.102/controls/wijmo.grid.min.js"></script>
<script src="http://cdn.wijmo.com/5.20153.102/controls/wijmo.input.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="https://code.jquery.com/ui/jquery-ui-git.css">
<button id='btn'>open dialog</button>
<div id='dialogInput' style='display:none;'>
<div id="theGrid"></div>
</div>
JavaScript
$(document).ready(function () {
$("#btn").button().click(function(){
$("#dialogInput").dialog('open');
// 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,
expenses: Math.random() * 5000
});
}
// create CollectionView on the data (to get events)
var view = new wijmo.collections.CollectionView(data);
// initialize the grid
var grid = new wijmo.grid.FlexGrid('#theGrid', {
columns: [{
binding: 'country',
header: 'Country'
}, {
binding: 'sales',
header: 'Sales'
}, {
binding: 'expenses',
header: 'Expenses'
}, {
binding: 'downloads',
header: 'Downloads',
format: 'n0'
}],
autoGenerateColumns: true,
itemsSource: view,
selectionMode: wijmo.grid.SelectionMode.Row
});
});
$("#dialogInput").dialog({
autoOpen: false, width: 'auto', height: 'auto', modal: false, closeOnEscape: false,
buttons: [{
id: "btnCancel",
text: "Close",
click: function () { $(this).dialog('close'); }
}]
});
});