JS
// populate Array of data
var rawData = data.getData(100);
// create and bind Wijmo 3 wijgrid
$('#mywijgrid').wijgrid({
columnsAutoGenerationMode: 'none',
data: rawData,
allowSorting: true,
scrollMode: 'auto',
selectionMode: 'singleRow',
ensureColumnsPxWidth: true,
columns: [
{ dataKey: 'Id', dataType: 'number', dataFormatString: 'n0', width: '20%' },
{ dataKey: 'Country', width: '20%' },
{ dataKey: 'Date', dataType: 'datetime', width: '20%' },
{ dataKey: 'Amount', dataType: 'currency', width: '20%' },
{ dataKey: 'Active', dataType: 'boolean', width: '20%' }
]
});
// Sort Grid when button clicked
$('#btnSortWij').click(function () {
$('#mywijgrid').wijgrid('columns')[3].options.sortDirection = 'ascending';
$('#mywijgrid').wijgrid('ensureControl', true);
});
// Show Row Headers in Grid when button clicked
$('#btnHeadersWij').click(function () {
if ($('#mywijgrid').wijgrid('option', 'showRowHeader') === true) {
$('#mywijgrid').wijgrid('option', 'showRowHeader', false);
} else {
$('#mywijgrid').wijgrid('option', 'showRowHeader', true);
}
});
// Bind to selectionChange in wijgrid
$("#mywijgrid").bind("wijgridselectionchanged", function (e, args) {
var amt = args.addedCells.item(3).value();
$('#lblWij').text(amt); // set text of span tag to Amount value
});