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(subject, 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(DataBinder.Eval(Container.DataItem, "Subject")) %>
</ItemTemplate>

public string TrimSubject(string subject)
{
string retVal = subject;
if(retVal.Length>100)
{
retVal = retVal.Substring(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(ByVal 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.FromImage(oBitMap)

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

Return Size
End Function

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

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

Dim i As Integer

Do While MeasureString(Value.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.GetTrimmedString("Th is 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(ListBox1.Font.Name), 12, FontStyle.Regular)))

[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.figtreesolutions.com> wrote in message
news:0F**********************************@microsof t.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(ByVal 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.FromImage(oBitMap)

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

Return Size
End Function

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

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

Dim i As Integer

Do While MeasureString(Value.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.GetTrimmedString("Th is 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(ListBox1.Font.Name), 12, FontStyle.Regular)))

[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:Hidden", 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:100">
<% 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" AutoGenerateColumns="False">
<Columns>
<asp:BoundColumn DataField="Column1"
HeaderText="Column1"></asp:BoundColumn>
<asp:BoundColumn DataField="Column2"
HeaderText="Column2"></asp:BoundColumn>
<asp:TemplateColumn HeaderText="Column3">
<ItemTemplate>
<p style="OVERFLOW:hidden;WIDTH:90%">
<asp:Label runat="server" Text='<%# DataBinder.Eval(Container,
"DataItem.Column3") %>'>
</p>
</asp:Label>
</ItemTemplate>
</asp:TemplateColumn>
</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(object sender, System.EventArgs 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.microsoft.com> wrote in message
news:%2****************@cpmsftngxa10.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:Hidden", 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:100">
<% 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" AutoGenerateColumns="False">
<Columns>
<asp:BoundColumn DataField="Column1"
HeaderText="Column1"></asp:BoundColumn>
<asp:BoundColumn DataField="Column2"
HeaderText="Column2"></asp:BoundColumn>
<asp:TemplateColumn HeaderText="Column3">
<ItemTemplate>
<p style="OVERFLOW:hidden;WIDTH:90%">
<asp:Label runat="server" Text='<%# DataBinder.Eval(Container,
"DataItem.Column3") %>'>
</p>
</asp:Label>
</ItemTemplate>
</asp:TemplateColumn>
</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(object sender, System.EventArgs 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.)