Question

customize header row of a datagrid

1

Hi there, I am thinking that to show some data as follows. Since datagrid widget cannot display multiline for a header, I tried to use a table (to display the header) and templateDatagrid (to display the data) as follows. But I don't know whether this implementation is good or not... I would like to know other solution of this. Does anyone have any other idea? Thanks in advance! Satomi

asked 2018-01-29

Satomi Uematsu

2 answers

Austin McNicholas · Answer 1 · 2018-01-29

Hi Satomi,

One thing to keep in mind is how much data this is going to be displaying. If this is a big dataset, then the user will have a longer load time compared to a datagrid, and I would probably stay away from listviews or templategrids for this. If its a smaller dataset, then your current design should be fine.

I usually use listviews when trying to build nicely styled tables. Two classes that will be very helpful in this situation will be "table-spaceless" and "table-header". For the header table, add both of these classes, and for the table inside the template grid, use table-spaceless. You will find that the template grid will look more similar to a datagrid with these two classes.

Andrej Gajduk · Answer 2 · 2018-01-29

Hi Satomi,

One potential issue with your implementation is that you lose the native datagrid functionality such as search & paging support. If this is not something that you care about, then you are good to go IOP.

Otherwise, I would suggest the following: If you only want to change the look of the header maybe you can use some css hacks to hide the standard datagrid header and instead show your own custom header, while keeping the rest of the table as it is.

Hope this helps,

Andrej