views:

175

answers:

3

How can I get several GridViews on a single page to share the same Column widths?

I have four GridViews with (essentially) the same columns in each. They have unique headers and represent data from different queries. I want to maximize readability by allowing the columns to be dynamically sized based on the data but I don't want each GridView to do it independently. Having same-named columns one above the other with different widths looks very sloppy. Instead want all four GridViews to choose the same size for column 1, the same size for column 2, etc.

In windows apps I believe there is a property for this called SharedSizeGroup which allows you to set columns from different controls to collaborate when deciding on the optimum size.

Can this be achieved at all in ASP.NET? Is it just too much to ask because the dynamic column widths are up to the browser?

Thanks

+2  A: 

I am pretty sure that you can only set the width for yourself. I dont think their is an option that allows you to do what you are looking for.

If you are using asp:TemplateFields, asp:BoundFields, etc. to form your fields you can use ItemStyle-Width="100px" to set the width of each Column

jmein
A: 

Is it just too much to ask because the dynamic column widths are up to the browser?

Pretty much. Unless you explictly set the column width, the browser will choose - so ASP.NET has no knowledge of it. You could probably use some jQuery to compensate though:

$(function() {
   var maxWidth = 0;
   $('TBODY TR:first TD.col1').each(function() {
       maxWidth = $(this).width > maxWidth ? $(this).width : maxWidth;
   });

   $('TBODY TR:first TD.col1').width(maxWidth);
});
Mark Brackett
Thanks for the info.I don't think I'll play with re-adjusting the column widths myself. I would probably keep tinkering and not be happy with it until I had recreated the entire dynamic column sizing logic found in a browser. :)Because my project is not too big I've just changed the four into a single gridView. I aggregate the query data into a single dataTable serverside before binding then I use some javascript to pretty up the table with summary rows, repeated headers, etc. separating the different chunks of data.
Owen
@Owen - FWIW, my code snippet (untested) would just set the width to the max the browser laid out. That's essentially what stuffing it all into a single table does.
Mark Brackett
Yeah, that's why I could see myself tinkering endlessly. That behavior means if table A thinks column 3 needs a lot of room, table B thinks column 1 needs a lot of room and table C thinks column 7 needs a lot of room I end up setting columns 1, 3 and 7 all big in all tables. Either that gets wide and requires scrollbars (if I use pixels) or it squishes the not-so-big columns more than usual if I normalize to percentages.
Owen
A: 

Hi!

I have the same problem. But I'm already using ItemStyle.Width with fixed size in all columns. My problem is that the columns of the first gridview (the only one that has the header - column names - visible) don't behave the same way as the others. I already tried having the same data in all of them and they are never aligned with the first gridview. I also tried fixing the size in the HeaderStyle.Width but no luck.

Can anyone help-me?

Thanks from Portugal, Gonçalo

Gonçalo
Have you tried hiding the header info in the first table as well? That will let you verify that rendering the header is the cause of the problem if it lines up perfectly without the header or rule it out if it still doesn't match.
Owen