GridView with fixed row height - FIXED!

How can something that should be so easy, be so difficult ???

If you have tried to use a Gridview, where some of the columns contains a lot of text. You maybe know what I am talking about ...
You get some very high rows who are destroying the entire design of your page.
To be honest, it looks like crap!

Here's an example:
 



And that's only 2 rows!
Microsoft please - give us a fixed rowheight!
Believe me when I say that it doesn't help to set the height to 20 or 15 pixels.
GridView is totally indifferent :0(


If you only have to use your Gridview with a single table the solution is very simple.
Connect your grid view with a datasource, so you get your columns delivered free of charge. 
Transform your columns into TemplatedFields. Now you can wrap the whole package into a div and hide the overflowing text, as shown in the code below. 

<asp:TemplateField>
<div style="height:15px;overflow:hidden">
<
asp:Label id="lbl" runat="server" text='<%# eval("Description")%>' />
</div>
</asp:TemplateField>


But when you do not know in advance which table your Gridview will be associated with, you immediately have problems.
Problems like this should be solved just by setting a rowheight property to 15px.

Well, I began to look for a solution on the web and discovered that I certainly was not alone with my problem.
After 2½ hours of surfing I gave up - there were apparently no one who had solved this problem ...

Very frustrated, I began to think - sometimes that really helps - my experience with the gridview told me that it is in RowDataBound event  things are happening.
Hmmm - we have a whole row filled with cells, what if we take the text out of each cell and put a Label in there instead, put some styles on the label and then we paste the text into our new label. 

It is worth a try ! 

Protected Sub gvTable_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles gvTable.RowDataBound

If e.Row.RowType = DataControlRowType.DataRow Then
     For Each tc As TableCell In e.Row.Cells
          Dim l As New Label
          l.Height = 15
          l.Style.Add("Overflow-y", "hidden")
          l.Text = tc.Text
          tc.Text = ""
          tc.Controls.Add(l)
Next

End If

End Sub


Yes Yes Yes it works!


But it would be really nice if we could read the text in a tooltip, so let's try again:

 

Protected Sub gvTable_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles gvTable.RowDataBound

If e.Row.RowType = DataControlRowType.DataRow Then
     For Each tc As TableCell In e.Row.Cells
          Dim l As New Label
          l.Height = 15
          l.Style.Add("Overflow-y", "hidden")
          l.Text = tc.Text
          l.ToolTip = tc.Text
          tc.Text = ""
          tc.Controls.Add(l)
Next

End If

End Sub


I think we are just about there ... 

Now our Grid View like this: 


 

That is certainly something nicer.

So it still ended up being a nice day: 0)

 

 


Currently rated .0 by 13 people

  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Tags: , ,
Categories: ASP.Net

0 Comments
Actions: E-mail | Permalink | Comment RSSRSS comment feed

Add comment


(Will show your Gravatar icon)  

  Country flag

biuquote
  • Comment
  • Preview
Loading