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!I guess there are a couple of ways that I can think of to fix this. The fir
st and easiest way could be to only return a certain number of characters fr
om 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 lik
e
> gmail does) how would i go about doing this at runtime on the client's pag
e?
> thanks!
>
>
User submitted from AEWNET (http://www.aewnet.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("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(ListBox1.Font.Name), 12, FontStyle.Regular)))
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" <joel@.nospam.figtreesolutions.com> wrote in message
news:0F697488-C620-4C51-80EB-803D11AF5D0C@.microsoft.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("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(ListBox1.Font.Name), 12, FontStyle.Regular)))
>
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/ar...100202-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/d...uthor/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.)
thanks that worked perfectly!
"Steven Cheng[MSFT]" <v-schang@.online.microsoft.com> wrote in message
news:%23bjDCLxtEHA.3696@.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/ar...100202-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
> [url]http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/ref[/ur
l]
> 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.)
>
![Smile [:)]](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_uf47RAQJnOusxg4jpGSAvtO1y9wq7mgq_CygRsbKz87lnaIZRukfUimt2o3eKJ2aipizt4YdsaZh2Kbjq2HaI_oQ7xlitwNuD3Wu1yZMXTIrlaMiNRqA=s0-d)