Configuration object with event names as keys and functions as values that are going to be bind to each cell from the column. Each function is going to receive event information as a parameter with info in the 'data' field for id, field name and record data.
Examples
javascript configuration
<table id="grid"></table>
<script>
$('#grid').grid({
dataSource: '/Players/Get',
uiLibrary: 'bootstrap',
columns: [
{ field: 'ID', width: 34 },
{
field: 'Name',
events: {
'mouseenter': function (e) {
e.stopPropagation();
$(e.currentTarget).css('background-color', 'red');
},
'mouseleave': function (e) {
e.stopPropagation();
$(e.currentTarget).css('background-color', '');
}
}
},
{ field: 'PlaceOfBirth' },
{
title: '', field: 'Info', width: 34, type: 'icon', icon: 'glyphicon-info-sign',
events: {
'click': function (e) {
alert('record with id=' + e.data.id + ' is clicked.'); }
}
}
]
});
</script>
html configuration
<table id="grid" data-source="/Players/Get" data-ui-library="bootstrap">
<thead>
<tr>
<th data-field="ID" width="34">ID</th>
<th data-events="mouseenter: onMouseEnter, mouseleave: onMouseLeave">Name</th>
<th data-field="PlaceOfBirth">Place Of Birth</th>
<th data-events="click: onClick" data-type="icon" data-icon="glyphicon-info-sign" width="32"></th>
</tr>
</thead>
</table>
<script>
function onMouseEnter (e) {
$(e.currentTarget).css('background-color', 'red');
}
function onMouseLeave (e) {
$(e.currentTarget).css('background-color', '');
}
function onClick(e) {
alert('record with id=' + e.data.id + ' is clicked.');
}
$('#grid').grid();
</script>