uiLibrary : (materialdesign|bootstrap|bootstrap4)Default: 'materialdesign'

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>