Indicates the type of the column.
Examples
Bootstrap 3 Icon
<table id="grid"></table>
<script>
$('#grid').grid({
dataSource: '/Players/Get',
uiLibrary: 'bootstrap',
columns: [
{ field: 'ID', width: 34 },
{ field: 'Name', title: 'Player' },
{ field: 'PlaceOfBirth', title: 'Place of Birth' },
{
title: '', field: 'Info', width: 32, type: 'icon', icon: 'glyphicon-info-sign',
events: {
'click': function (e) {
alert('record with id=' + e.data.id + ' is clicked.');
}
}
}
]
});
</script>
Bootstrap 4 Icon
<table id="grid"></table>
<script>
$('#grid').grid({
dataSource: '/Players/Get',
uiLibrary: 'bootstrap4',
columns: [
{ field: 'ID', width: 42 },
{ field: 'Name', title: 'Player' },
{ field: 'PlaceOfBirth', title: 'Place of Birth' },
{
title: '', field: 'Info', width: 42, type: 'icon', icon: 'fa fa-pencil',
events: {
'click': function (e) {
alert('record with id=' + e.data.id + ' is clicked.');
}
}
}
]
});
</script>
Bootstrap 3 Checkbox
<table id="grid"></table>
<script>
$('#grid').grid({
dataSource: '/Players/Get',
uiLibrary: 'bootstrap',
columns: [
{ field: 'ID', width: 34 },
{ field: 'Name', title: 'Player' },
{ field: 'PlaceOfBirth', title: 'Place of Birth' },
{ title: 'Active?', field: 'IsActive', width: 80, type: 'checkbox', align: 'center' }
]
});
</script>
Bootstrap 4 Checkbox
<table id="grid"></table>
<script>
$('#grid').grid({
dataSource: '/Players/Get',
uiLibrary: 'bootstrap4',
columns: [
{ field: 'ID', width: 46 },
{ field: 'Name', title: 'Player' },
{ field: 'PlaceOfBirth', title: 'Place of Birth' },
{ title: 'Active?', field: 'IsActive', width: 80, type: 'checkbox', align: 'center' }
]
});
</script>