I have a large number (100+) of grids in my application. May of which are bound to <table> elements via the use of the data-field attribute on the headers of the table. The tables all scroll. What I'd like to do now is specify the width of just a few columns in each table, these are mainly columns that the fixed table layout makes too wide, columns containing just icons or block of colour designating a status of some sort. I have tried the following...
- Adding a width to the header column - unfortunately the header styles don't get copied to data table so we end up with the headers being the correct size but the data columns not lining up
- Adding a colgroup with widths to the table - this does seem to work in isolation, the colgroup gets copied between the two tables, however, when this method is used inside the Durandal spa framework the colgroup is not yet in the DOM when Kendo does it's thing and is therefore not picked up
- Adding the columns property to the initialisation of the grid in js and specifying width there - this always works, however, doing this for all of my grids, none of which specify the columns property currently, is a much bigger overhead than I'd like and it presents a maintenance headache going forward (plus, I'd rather not specify styling in js)
- Adding a data-width to the th and adding this to the columns collection on dataBinding or dataBound - This doesn't seem to work which is a shame as adding a simple event handler to each grid that picks up on a data attribute, much like the data-field attribute we already use would be a perfect solution in many ways.
I think the dataBinding or dataBound solution may be the way to go, I'm just not sure how to re-size columns in either of those event handlers. I've created a small fiddle with which I've been experimenting and any guidance would be greatly appreciated.
- Adding a width to the header column - unfortunately the header styles don't get copied to data table so we end up with the headers being the correct size but the data columns not lining up
- Adding a colgroup with widths to the table - this does seem to work in isolation, the colgroup gets copied between the two tables, however, when this method is used inside the Durandal spa framework the colgroup is not yet in the DOM when Kendo does it's thing and is therefore not picked up
- Adding the columns property to the initialisation of the grid in js and specifying width there - this always works, however, doing this for all of my grids, none of which specify the columns property currently, is a much bigger overhead than I'd like and it presents a maintenance headache going forward (plus, I'd rather not specify styling in js)
- Adding a data-width to the th and adding this to the columns collection on dataBinding or dataBound - This doesn't seem to work which is a shame as adding a simple event handler to each grid that picks up on a data attribute, much like the data-field attribute we already use would be a perfect solution in many ways.
I think the dataBinding or dataBound solution may be the way to go, I'm just not sure how to re-size columns in either of those event handlers. I've created a small fiddle with which I've been experimenting and any guidance would be greatly appreciated.