Sunday, October 01, 2006

DataGrid and CSS

I am currently writing a website in Visual Studio 2005 using C#. One thing that makes this satisfying is that a team of outsourced developers was fired so I could do the work instead !

Yes I know GridView has replaced DataGrid but I have the exact styling we want on the DataGrid from previous work, so unless I find a really good reason to change I will stick with the DataGrid for now. I use templated columns defined in markup ( doesnt everyone ? ).

Does anybody use the DataGrid in the way MS demos always seem to show. i.e. the user has to click on a Update link, then edit the row ( after a postback put in the edit boxes ), then click on save. Seems messy compared to the more natural way in which every cell in the grid is editable at once.

We certainly dont, instead the DataGrids ItemTemplate definitions contain TextBoxes ( or checkboxes or dropdowns ) rather than labels. Add some custom JavaScript to allow navigation to be done using the arrow keys.

More JavaScript allows rows to be deleted by the user with Control-Delete or new rows added with arrow down on the last row. Unfortunetaly postbacks are required to do this in the current code.

The major thing I am unhappy about is all those itemstyle-backcolour="whatever" e.t.c junk markup I have put into the datagrid to get the exact styling we want. Moving this junk markup to stylesheet rules and using itemstyle-cssrule tags worked fine on IE, but looked horrible in Firefox.

The markup output by DataGrid seems unneccesarily complex and not really designed for easy application of CSS.

I plan to experiment with this later, but for now at least it looks perfect on Firefox, Opera and IE even if the markup isnt beautiful if you view source.

Maybe I will play with a CSS Control Adaptor class sometime, ideally I want absolutley semantic markup with enough cssclasses defined so I can get it looking exactly right with Css only.

No comments: