The name of the UI library that is going to be in use. Currently we support Bootstrap 3, Bootstrap 4 and Material Design.
The css files for Bootstrap or Material Design should be manually included to the page where the grid is in use.
Examples
Material Design With Icons
<table id="grid"></table>
<script>
$('#grid').grid({
dataSource: '/Players/Get',
columns: [ { field: 'ID', width: 56 }, { field: 'Name', sortable: true }, { field: 'PlaceOfBirth' } ],
pager: { limit: 2, sizes: [2, 5, 10, 20] }
});
</script>
Material Design Without Icons
<table id="grid"></table>
<script>
$('#grid').grid({
dataSource: '/Players/Get',
uiLibrary: 'materialdesign',
iconsLibrary: '',
columns: [ { field: 'ID', width: 56 }, { field: 'Name', sortable: true }, { field: 'PlaceOfBirth' } ],
pager: { limit: 2, sizes: [2, 5, 10, 20] }
});
</script>
Bootstrap 3
<div class="container"><table id="grid"></table></div>
<script>
$('#grid').grid({
dataSource: '/Players/Get',
uiLibrary: 'bootstrap',
columns: [
{ field: 'ID' },
{ field: 'Name', sortable: true },
{ field: 'PlaceOfBirth' }
],
pager: { limit: 2, sizes: [2, 5, 10, 20] }
});
</script>
Bootstrap 4 Font Awesome
<table id="grid"></table>
<script>
$('#grid').grid({
dataSource: '/Players/Get',
uiLibrary: 'bootstrap4',
iconsLibrary: 'fontawesome',
columns: [ { field: 'ID', width: 38 }, { field: 'Name', sortable: true }, { field: 'PlaceOfBirth' } ],
pager: { limit: 2, sizes: [2, 5, 10, 20] }
});
</script>