How to align columns in multiple GridViews

Question

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

Answer 1

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);
});

Answer 2

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