trimming text in a datagrid to match column length

[Brian Henry]

I have a messaging application that has a data grid with information like an
email list would have (from, subject, time sent, size) but the subject
could be very long in theory, and then it would word wrap.. the subject is a
variable width column (resizes to fit space) while the others are fixed
size... the problem is that i dont want the text to ever word wrap.. but
truncate the visible subject to match the current cell width... (kinda like
gmail does) how would i go about doing this at runtime on the client's page?
thanks!

[alan.washington]

I guess there are a couple of ways that I can think of to fix this. The first and easiest way could be to only return a certain number of characters from the query of stored procedure. For example:

select substring(subje ct, 0, 10) from emaillist

that way the query will do all the work.

Now another example could be to do it within the code, for example:

<ItemTemplate >
<%# TrimSubject(Dat aBinder.Eval(Co ntainer.DataIte m, "Subject")) %>
</ItemTemplate>

public string TrimSubject(str ing subject)
{
string retVal = subject;
if(retVal.Lengt h>100)
{
retVal = retVal.Substrin g(0, 100) + "...";
}

return retVal;
}

Hope those examples help.

Alan Washington
http://www.aewnet.com

I have a messaging application that has a data grid with information like an
email list would have (from, subject, time sent, size) but the subject
could be very long in theory, and then it would word wrap.. the subject is a
variable width column (resizes to fit space) while the others are fixed
size... the problem is that i dont want the text to ever word wrap.. but
truncate the visible subject to match the current cell width... (kinda like
gmail does) how would i go about doing this at runtime on the client's page?
thanks!

User submitted from AEWNET (http://www.aewnet.com/)

[Joel Cade]

You can use GDI+ to do this. Here's some quick/dirty code I wrote to do
this. Hope this helps!

Joel Cade, MCSD
Fig Tree Solutions, LLC
http://www.figtreesolutions.com

Imports System.Drawing

Public Function MeasureString(B yVal Value As String, ByVal Font As
Drawing.Font) As SizeF
' Set up string.
Dim oBitMap As New Bitmap(1, 1)
Dim oGraphics As Graphics = Graphics.FromIm age(oBitMap)

' Measure string.
Dim Size As New SizeF
Size = oGraphics.Measu reString(Value, Font)

Return Size
End Function

Public Function GetTrimmedStrin g(ByVal Value As String, ByVal MaxSizeF
As Single, ByVal Font As Drawing.Font) As String
Dim sReturn As String

If MeasureString(V alue, Font).Width < MaxSizeF Then
sReturn = Value
Else
sReturn = Value

Dim i As Integer

Do While MeasureString(V alue.Substring( 0, Value.Length - i) &
"...", Font).Width > MaxSizeF
i += 1
Loop

sReturn = Value.Substring (0, Value.Length - i) & "..."
End If

Return sReturn
End Function

......

ListBox1.Items. Add(oFormatter. GetTrimmedStrin g("This is a test, THIS IS THE
LONGEST EVER THIS IS THE LONGEST EVER THIS IS THE LONGEST EVER THIS IS THE
LONGEST EVER", 300, New Font(New
System.Drawing. FontFamily(List Box1.Font.Name) , 12, FontStyle.Regul ar)))

[Brian Henry]

GDI+ on asp.net on the client side? doesn't sound right, because the user
could resize the window thus changing the size of the column the text is in.
"Joel Cade" <jo**@nospam.fi gtreesolutions. com> wrote in message
news:0F******** *************** ***********@mic rosoft.com...

You can use GDI+ to do this. Here's some quick/dirty code I wrote to do
this. Hope this helps!

Joel Cade, MCSD
Fig Tree Solutions, LLC
http://www.figtreesolutions.com

Imports System.Drawing

Public Function MeasureString(B yVal Value As String, ByVal Font As
Drawing.Font) As SizeF
' Set up string.
Dim oBitMap As New Bitmap(1, 1)
Dim oGraphics As Graphics = Graphics.FromIm age(oBitMap)

' Measure string.
Dim Size As New SizeF
Size = oGraphics.Measu reString(Value, Font)

Return Size
End Function

Public Function GetTrimmedStrin g(ByVal Value As String, ByVal MaxSizeF
As Single, ByVal Font As Drawing.Font) As String
Dim sReturn As String

If MeasureString(V alue, Font).Width < MaxSizeF Then
sReturn = Value
Else
sReturn = Value

Dim i As Integer

Do While MeasureString(V alue.Substring( 0, Value.Length - i) &
"...", Font).Width > MaxSizeF
i += 1
Loop

sReturn = Value.Substring (0, Value.Length - i) & "..."
End If

Return sReturn
End Function

.....

ListBox1.Items. Add(oFormatter. GetTrimmedStrin g("This is a test, THIS IS
THE
LONGEST EVER THIS IS THE LONGEST EVER THIS IS THE LONGEST EVER THIS IS THE
LONGEST EVER", 300, New Font(New
System.Drawing. FontFamily(List Box1.Font.Name) , 12, FontStyle.Regul ar)))

[Steven Cheng[MSFT]]

Hi Brian,

As for the truncating string values in DataGrid Cell(Table cell), I think
generally we have two means:

1. Truncating the string's length at serverside when we retrieve it from db
or output into the page via code. Just as the other members have suggested.
But this will make the output string's length be a fixed size.

#Creating a Custom DataGridColumn Class, Part 2
http://aspnet.4guysfromrolla.com/art...00202-1.2.aspx

2. Using css style on the output <table> and the text content in table
cell. There is one css attribute named
"OVERFLOW", it can be applied on <div> or <p> ... and when we set the
"OVERFLOW:Hidde n", it will truncat the exceeded content according to the
container element's width.

#overflow Attribute | overflow Property
http://msdn.microsoft.com/library/de...thor/dhtml/ref
erence/properties/overflow.asp

For example:

<p style="OVERFLOW :hidden;WIDTH:1 00">
<% Response.Write( new String('d',1000 )); %>
</p>

Also, since in our problem, we need to set the datagrid column's width
unfixed, so we also need to make the with of the <p> as a relative size.
After some testing, it seems that we also have to assign the "table-layout
: fixed" css attribute to the DataGrid(<table >). Here is some demo code on
applying the styles on datagrid:

<asp:DataGrid id="dgStyle" runat="server" AutoGenerateCol umns="False">
<Columns>
<asp:BoundColum n DataField="Colu mn1"
HeaderText="Col umn1"></asp:BoundColumn >
<asp:BoundColum n DataField="Colu mn2"
HeaderText="Col umn2"></asp:BoundColumn >
<asp:TemplateCo lumn HeaderText="Col umn3">
<ItemTemplate >
<p style="OVERFLOW :hidden;WIDTH:9 0%">
<asp:Label runat="server" Text='<%# DataBinder.Eval (Container,
"DataItem.Colum n3") %>'>
</p>
</asp:Label>
</ItemTemplate>
</asp:TemplateCol umn>
</Columns>
</asp:DataGrid>

=============== ========
In our code-behind , we can use the following code (in Page_load) to apply
the "table-layout" style on datagrid:

private void Page_Load(objec t sender, System.EventArg s e)
{
............... .....

dgStyle.Style["TABLE-LAYOUT"] = "fixed";
}
Hope these help. Thanks.

Regards,

Steven Cheng
Microsoft Online Support

Get Secure! www.microsoft.com/security
(This posting is provided "AS IS", with no warranties, and confers no
rights.)

[Brian Henry]

thanks that worked perfectly!

"Steven Cheng[MSFT]" <v-******@online.m icrosoft.com> wrote in message
news:%2******** ********@cpmsft ngxa10.phx.gbl. ..

Hi Brian,

As for the truncating string values in DataGrid Cell(Table cell), I think
generally we have two means:

1. Truncating the string's length at serverside when we retrieve it from
db
or output into the page via code. Just as the other members have
suggested.
But this will make the output string's length be a fixed size.

#Creating a Custom DataGridColumn Class, Part 2
http://aspnet.4guysfromrolla.com/art...00202-1.2.aspx

2. Using css style on the output <table> and the text content in table
cell. There is one css attribute named
"OVERFLOW", it can be applied on <div> or <p> ... and when we set the
"OVERFLOW:Hidde n", it will truncat the exceeded content according to the
container element's width.

#overflow Attribute | overflow Property
http://msdn.microsoft.com/library/de...thor/dhtml/ref
erence/properties/overflow.asp

For example:

<p style="OVERFLOW :hidden;WIDTH:1 00">
<% Response.Write( new String('d',1000 )); %>
</p>

Also, since in our problem, we need to set the datagrid column's width
unfixed, so we also need to make the with of the <p> as a relative size.
After some testing, it seems that we also have to assign the "table-layout
: fixed" css attribute to the DataGrid(<table >). Here is some demo code
on
applying the styles on datagrid:

<asp:DataGrid id="dgStyle" runat="server" AutoGenerateCol umns="False">
<Columns>
<asp:BoundColum n DataField="Colu mn1"
HeaderText="Col umn1"></asp:BoundColumn >
<asp:BoundColum n DataField="Colu mn2"
HeaderText="Col umn2"></asp:BoundColumn >
<asp:TemplateCo lumn HeaderText="Col umn3">
<ItemTemplate >
<p style="OVERFLOW :hidden;WIDTH:9 0%">
<asp:Label runat="server" Text='<%# DataBinder.Eval (Container,
"DataItem.Colum n3") %>'>
</p>
</asp:Label>
</ItemTemplate>
</asp:TemplateCol umn>
</Columns>
</asp:DataGrid>

=============== ========
In our code-behind , we can use the following code (in Page_load) to apply
the "table-layout" style on datagrid:

private void Page_Load(objec t sender, System.EventArg s e)
{
............... ....

dgStyle.Style["TABLE-LAYOUT"] = "fixed";
}
Hope these help. Thanks.

Regards,

Steven Cheng
Microsoft Online Support

Get Secure! www.microsoft.com/security
(This posting is provided "AS IS", with no warranties, and confers no
rights.)