Introduction

In this blog I explain how you can automatically generate bootstrap table columns. Table grids are an import part of web application however coding them can be boring and error prone. In a MVC application the controller and view with the table grid are tightly coupled. The controller delivers the the table grid data so it must be possible to extract metadata from the controller. This metadata is the source for the column generation. The column generation reduces the lines of code in a view an takes away the repetitive coding task and results in faster and better development with more fun. The generation is based on the Bootstrap table

Manual Coding

The required grid coding:

Setting up a grid manually takes a lot of effort, especially the columns.

Automatic coding

With automatic columns generation the coding becomes:

As you can the see the required coding is now strongly reduced.

How it works

After the document is loaded an Ajax request is made to the controller with url <controller>/MetaData. The controller collects the metadata and sends it back to the browser. The metadata is not only about columns, it also sets other properties to configure the  grid correctly.

  • sortName sets sorting column.
  • sortOrder  sets sorting direction (ascending or descending).
  • sidePagination sets where paging occurs, client or server side.
  • cache sets if data is cached or not.
  • uniqueId denotes the column that uniquely identify a row.
  • columns as you already guessed, the column definition.

URL configuration

The controller hosts the MetaData and Load method.  The complete URL is created with the window.location.pathname parameter. Please note that in this ways the controller name is not hard coded and makes the code reusable for other views without modification.

MetaData result

With Swagger we can test and examine the MetData call. Run the solution the alter to URL to ‘http://localhost:49842/swagger/’ and invoke the MetaData api.

 

Controller MetaData function

The Controller host the MetaData function. The BootStrapTableCreator does all the hard work. In this example the BootStrapTableCreator scans the AccountListModel class with reflection for attributes. Attributes control the table grids behaviour. The controller also knows if it has CRUD (CReate, Update Delete) capablities.  If applicable and security allows it you can add CRUD columns. The security part is not coded here for simplicity.

The Serialize() method creates the JSON result with 200 (OK)  as result code.

Attributes

The BootStrapTableCreator scans for several attributes:

  • Key Denotes the uniqueId field.
  • CrudTitle Denotes the title field for CRUD dialogs, not used in this blog.
  • HiddenInput Hides a column.
  • DisableSorting (yes you guessed it all ready) disables sorting on a column.
  • OrderBy Sets field sortName and sortOrder
  • Display set column title. Param usage
    • ShortName is used for column title, if not set Name becomes column title. If property is absence the property name becomes the column title.
    • AutoGenerateFilter = false skips the column during filtering

Attribute example

The class AccountListModel gives an example on how you can use the attributes

The attributes Key, CrudTitle, and OrderBy may occur only once. If used multiple times, only the first occurrence is used.

BootStrapTableCreator

The StrapTableCreator creates the metadata based the found attributes and internal rules:

  • Boolean type is rendered as a read only checkbox.
  • Numbers (Int, float, double, decimal) are right aligned.

The Serialize() method encapsulates all the logic to create metadata that is understood by the bootstrap table. Null values must be ignored during serialization. The bootstrap table crashes setting with null as value.

 

Customize MetaData

You can customize the Metadata result if you have specific need without altering the BootStrapTableCreator.

Controller Load function

The Controller Load function delivers the actual grid data and must match the MetaData. In this blog example the datasource is the UserManager<ApplicationUser> object. It handles the user accounts and is configured during startup with DI (Dependency Injection). The ApplicationUser class has more fields then I want to show so I created the AccountListModel class with all the the desired fields. The field selection is arbitrary and acts as an example. AutoMapper handles the mapping from ApplicationUser to AccountListModel and is configured with an profile:

The mapping is ready for action after registration the Controller constructor.

The Load(params …) receives the Ajax calls from the table grid. The parameters are about sorting, paging and the search text entered by the user. The BootStrapTableData<T> creates table data in JSON format. The controller sends this JSON data back to Ajax client.

BootStrapTableData Implementation

The search method inside BootStrapTableData is simple.  All fields except for:

  • Hidden fields.
  • Fields with the Display.AutoGenerateFilter == false.
  • Byte array fields.

are converted to string values. When a string value contains the search text is considered as a hit. The search is case insensitive. The search method works fine on small to medium sized datasets. On large data sets the performance will drop because indexes can not be used and you have to implement a smarter search pattern.

The Serialize() wraps it all up and returns JSON data, suitable to populate the table grid.

Conclusion

Attributes and reflection clears the way for auto generation columns. The generation process has hooks for modifying the columns without altering the generation engine. Auto generation takes away the boring task of defining the manually, reduces the lines of code and speeds up the development.

Further reading

Bootstrap table

AutoMapper