Wednesday, 21 August 2013

GridView Bootstrap Update

It would appear that issue that pushed me towards using Control Adapters to fix my issues with the GridView were “Not entirely accurate” it seems that if you do the following to the default List pages we will get the GridView to perform as we wish with Bootstrap. Scott Hunter has a post here Cleaning up Default GridView Mark-up this showed me we can clean the mark-up up fully without resorting to Control Adapters.

Default GridView Mark-Up For Dynamic Data

Figure 1 – Default GridView Mark-Up For Dynamic Data

Going back to my original post Bootstrap Friendly Dynamic Data I showed the mark-up in Figure 2 and demonstrated this caused issues with Bootstrap and other CSS styles applied to the grid.

table mark-up Issues

Figure 2- Table mark-up issues

So we change the mark-up to that in Figure 3 and then we get this nicely cleaned mark-up in Figure 4

Updated GridView Mark-Up For Dynamic Data

Figure 3 – Updated GridView Mark-Up For Dynamic Data

table mark-up fixed

Figure 4 – table mark-up fixed

GridView output with Bootstrap

Figure 5 – GridView output with Bootstrap

Hope that helps

Download

As usual you can get the code from the Project on Bootstrap Friendly Control Adaptors and on my SkyDrive

No comments: