views:

285

answers:

1

I'm really concerned about the aesthetic aspect of my web app and that's why I'm asking this sort of a silly question. Forgive me in advance if you think it's not that much a big deal.

I'm building a desktop like web app and using jqGrid awesome plugin to show some tabular data. In desktop applications like iTunes, the table has enough empty rows to fill its dimensions. I mean if you set table grid to be 500px in hight and it only has one row the table (zebra) will continue to the end of page. This is something that I want to have but can not accomplish right now using javascript or css.

My first idea was to make background image to the table that fake the empty rows but there are two problems for this method. First it will not work if the user zoom and make the text bigger and second I'm showing some borders between columns that are realizable which makes it impossible to replicate them in background image.

Does anyone have ever tried to make such kind of table grid? Any idea how to do it?

+1  A: 

What I would do is simply create a Table container with a specific height; give it a vertically-tiled background; set overflow to scroll/auto; and then put the dynamically-sized table inside of it.

Edit: Sorry, I didn't read your question carefully enough. Given your other requirements, I would simply use JavaScript. It shouldn't be hard to set a minimum number of rows to your table, though I'm not familiary with jqgrid.

The other option is just to use 2 tables--the top one for the actual data, the bottom one for empty rows. Each time a row is added to the top table, one is removed from the bottom table, and vice versa. You'll also have to capture the column-resize events of the top table, and resize the columns of the bottom table as well. But this is pretty cludgy.

Calvin
yep, there are possible solutions but all of them are pretty cludgy. right now I'm going to contact jqGrid developer to see if he's interested in adding this feature. jqGrid is under heavy development these days. I guess I'll make some dirty hacks in jqGrid to make this happen.
Allen Bargi
Well, you might also want to try your hand at adding this functionality to jqGrid yourself and contributing your code to jQuery. It might be just what the community needs =]
Calvin