Showing data in grid format is an important task for many webapplications. This blog gives a demo how to display data with the Bootstrap Table pluging. The demo shows advanced features like server side paging, filtering and sorting.

With the  demo application, I cover these aspects in more detail:

  1. Setup Bootstrap Table pluging.
  2. Setup DataSource.
  3. Table definition in cshtml file.
  4. Custom cell rendering.
  5. Server side paging, sorting and filtering.
  6. Highlight selected row.
  7. Custom Toolbar.
  8. Additional Load parameters.

Bootstrap Table pluging

There are many data grid packages available, all with their own strengths and weaknesses. In this demo I use the Bootstrap Table pluging. Its a free pluging with usefull features:

  1. Ajax enabled.
  2. Server side paging, filtering and sorting.
  3. Easy to use.
  4. Lightweight and fast.
  5. Bootstrap support.
  6. Third party packages are available for extra functionality.

Setup Bootstrap Table pluging

Start Visual Studio and create a new .Net Core Project with no authentication.

Bootstrap Table is a javascript library and you only need to include the library files the in the application. It has two files, a javascript and a css file. The rendersection is set at the end of the _Layout.cshtml file. The rendersection provides a hook to an individual cshtml page. This hook is executed during the rendering of the individual cshtml page.

This chain renders the shared bootstraptable.cshtml, located in the shared views folder. This makes re-use in other pages easy and the files are just in time loaded for optimal performance. Dot Net Core offers a neat solution to differentiate between production and development files. In development you can use the larger, easy readable files, while for production you automatically switch to the smaller and faster, minified files.

Setup DataSource

In most cases the data is retrieved from database server or a REST-api. This demo focus on how to show data and less on how to get data. In this case the data is fetched from a simple JSON file, located at the web server. This keeps the datasource simple and easy to setup. The controller has a private IList<Country> countries property. Country is a simple POCO class:

Entity Framework Support

This sample uses IList<Country> as datasource, but it can easily be replaced by a DbSet<Country> delivered by the Entity Frame Work. The demo works with every kind of datasource, provided the datasource can be casted to the none generic IQueryable type.

Table definition in cshtml file

You can setup the table definition in either html or jquery. I prefer html because I find it easier to read. A combination as also possible. In this demo html sets the table layout and the table events are handled in jquery. Data attributes in the <table> section sets the table behaviour, the columns and rows are configured in the <tr> section.

Column settings like alignment, width, date and number formats can be configured with attributes. The data-unique-id="Code" sets the primary key column. During rendering each table row  gets a data-uniqueid attribute with it’s key value.

This key attribute is vital for CRUD (Create, Retrieve, Update and Delete) operations. With jquery you can retrieve the key value from a row with little effort. If the data-unique-id is empty or not set, the table will still be renderend. The data-sort-name and  data-sort-order attributes sets the initial sort column and order. These values are passed to the controller during the data request.

Custom cell rendering

Bootstrap Table supports custom cell rendering with the  data-formatter attribute. This offers maximum flexibility if the standard configuration options are not enough.

The value parameter is the column value and row parameter contains all the row values.

Server side paging, sorting and filtering

It takes only a few attributs to setup server side paging, sorting and filtering.

The data-url="Load" attribute specifies that the controller class has a public Load function. The Load function handles the input parameters and returns a JSON document.

Input parameters:

  • sort :  sort colum name.
  • order : sort direction, asc or desc.
  • search : search argument entered by user.
  • limit :  page size.
  • offset : number of records to skip before fetching the data page.

JSON Output:

total: number of records available after filtering.
rows:  array with country records. The array capacity is equal or less than the limit page size.

Exclude filter fields

Field ISO2 is used for rendering the flag image, the code itself is not visible for the user. In this GUi design the search parameter applies only for visible data. This means that the ISO2 property must be excluded from searchable fields.

Reusable filtering with Dynamic Linq

Linq is a great innovation. It gives the ability to execute queries on an enumerable collection. Unlike SQL, Linq has compile time syntax checking. This is helpfull in most cases. It already detects errors during compile time instead of runtime. If I want a to create a reusable filter method, the compile time syntax, becomes an obstacle. Different entities has different fieldnames, so how to pass diferent field names to one reuseable method? Runtime parsing instead of compile time parsing is the solution. The Dynamic Linq Core packages does just this. It smoothly intergrates with Linq and provides extra overload functions for where clauses, sorting and other operations. Dynamic Linq is used in SearchItems to create a searchExpression at runtime.

Country searchExpression  generated by SearchItems:

Please note the ISO2 field is not in the searchExpression as expected. In this demo the SearchItems implementation is pretty straightforward. If a more complicated filtering is required, the SearchItems can be overriden to meet the new needs.

Generating JSON document

The ItemsToJson function creates the JSON document that is consumed by the Bootstrap Table.

Input parameters:

  • items : unsorted, filtered  entity set
  • columnNames : fields included in JSON document
  • sort :sort colum name.
  • order : sort direction, asc or desc.
  • search : search argument entered by user.
  • limit : page size.
  • offset :number of records to skip before fetching the data page.

The columnNames variable limits the number of properties exposed in the JSON document. This can be usefull if you don’t want to show all available entities properties for performance or security reasons. The paging requires sorting and is provided by Dynamic Linq. The paging is implemented with the standard Linq Skip and Take functions. The option Formatting.None reduces the JSON document size, and increases performance, but makes it more difficult to read. I only use the option Formatting.Indented for debugging purposes.

Highlight selected row

Bootstrap Table has several row selection options. It can even remember selected rows on a previous page, which I think is pretty cool. You can read the documentation how this can be done. In the demo application I use jquery and css. On forums there are many questions about this topic, so lets give it some attention here. First I modified the css style to make the selected row more apparent. I could overwrite the bootstrap css file, but all the work would be lost in case of an update. Setting the new style in the site.css file frees you from this risk.

Next step is to attach the Bootrstrap Table row click event to the  highLightRow function.

The  highLightRow function assigns the  highlight css class to the selected row and remove the css class from all other rows. This makes that only one row at a time is selected.

Custom Toolbar

With Bootstrap Table you can customize the toolbar with just plain html. In some other packages you need to know a lot about the grid details and it’s API. Bootstrap Table is breath taking simple. Create your toolbar buttons and other controls inside a div with an id. Assign this id to the data-toolbar attribute and thats all it takes!

Additional Load parameters

Sometimes the GUI requires that additional parameters are sent to the controller. This takes only a few simple steps. First set what function injects the extra parameter with the data-query-params attribute.

In this demo the extra paramater is fixed, normally you would use the value of an input control.

Last step is modifying the Load function on the controller to process the extra parameter

Conclusion

Displaying data in a grid is an important requirement for many applications. Bootstrap Table does an excellent job at this. It’s easy to setup and use and works well with Boostrap and Dot Net Core. Dynamic Linq makes the solution highly reusable. I added the demo application so you can play with it. If you have any comments or questions, please let me know.

Further Reading

BootstrapTable Download

BootstrapTable Documentation

BootstrapTable Examples

Dynamic Linq

Download DatagridDemo