Fix Width Column of Gridview with Word Wrap
I have been looking for an answer to this for awhile and haven't found what I am looking for. I have a GridView with 5 columns. One of those columns is a very long string with instead of " ". I need to be able to fix the width of the column and have word wrap take care of the string till the end of it. I have tried all the properties on the gridview to get what I need but the span always stretches out horizontally and never wraps. Here is my gridView code
<asp:GridView ID="resultsGrid" AutoGenerateColumns="False" runat="server" AllowPaging="True"
AllowSorting="True" PageSize="20" O开发者_开发知识库nPageIndexChanging="gridView_PageIndexChanging"
OnSorting="gridView_Sorting" PagerSettings-Position="TopAndBottom" PagerStyle-HorizontalAlign="Center">
<PagerSettings Position="TopAndBottom" />
<Columns>
<asp:TemplateField>
<ItemTemplate>
<%# Container.DataItemIndex + 1 + "." %>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField Visible="false" SortExpression="record_id">
<ItemTemplate>
<asp:Label ID="lblRecordID" runat="server" Text='<%# Bind("RecordID") %>' Visible="false"></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Note Type" SortExpression="business_content_type_cd">
<ItemTemplate>
<asp:Label ID="lblNoteType" runat="server" Text='<%# Bind("NoteType") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Author" SortExpression="author_user_name">
<ItemTemplate>
<asp:Label ID="lblAuthor" runat="server" Text='<%# Bind("Author") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Date" SortExpression="content_dttm">
<ItemTemplate>
<asp:Label ID="lblDate" runat="server" Text='<%# Bind("Date") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<asp:Label Width="100px" ID="lblData" runat="server" Text='<%# Bind("NoteContent") %>'></asp:Label>
<asp:HyperLink ID="linkMore" runat="server" />
</ItemTemplate>
<FooterStyle Wrap="true" Width="100px" />
<HeaderStyle Wrap="true" Width="100px" />
<ItemStyle Wrap="true" Width="100px" />
</asp:TemplateField>
<asp:TemplateField SortExpression="size" Visible="false">
<ItemTemplate>
<asp:Label ID="lblSize" runat="server" Text='<%# Bind("Size") %>' Visible="false"></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<PagerStyle HorizontalAlign="Center" />
</asp:GridView>
I am not a fan of what I have to do but the client wants what the client wants(I need to mimic the user interface of a mainframe screen). Thanks for the help
have used white-space: normal;
for String that has space between them
word-break: break-all
for String that are like joined.
and add css style for grid on document ready Table-layout:fixed in grid style worked for me
<asp:TemplateField HeaderText="Action">
<ItemStyle Wrap="true"/>
<ItemTemplate>
<div style="white-space: normal; word-break: break-all;">
<asp:Label ID="lblLogStatus" runat="server" Text='<%# Eval("LogMsg")%>' Style="white-space: normal !important; word-break: break-all !important;"></asp:Label>
</div> </ItemTemplate>
</asp:TemplateField>
Try this
<asp:TemplateField>
<ItemTemplate>
<asp:Label ID="lblData" runat="server"
Text='<%# Bind("NoteContent") %>'></asp:Label>
</ItemTemplate>
<ItemStyle Width="200px" />
</asp:TemplateField>
Wordwrap have problem when the text is too long (without space in text), my solution is using css: hidden text if it's too long
This is sample code
<Columns>
<asp:TemplateField HeaderText="Parameter path">
<ItemTemplate>
<div class="paraGraphtext">
<asp:Label ID="lblId" runat="server" Text='<%# Eval("tableField") %>'></asp:Label>
</div>
</ItemTemplate>
</asp:TemplateField>
</Columns>
and css
.paraGraphtext
{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width:150px;
}
I ended up breaking the text by width with
tags... Not what I wanted to do, but could not find an answer
I am sure this is still being discussed but something like adding "word-wrap","break-word" on the ItemDataBound event might work.
<Columns>
<asp:TemplateField HeaderText="Parameter path">
<ItemTemplate>
<div style="white-space:normal;">
<asp:Label ID="lblId" runat="server" Text='<%# Eval("tableField") %>'></asp:Label>
</div>
</ItemTemplate>
</asp:TemplateField>
</Columns>
Set the style="table-layout:fixed" and Width="1000px" in gridview field.. This worked for me.
the code is as follows:
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" style="table-layout: fixed" Width="900px" onprerender="GridView1_PreRender">
Add GridView1_PreRender event if you want to remove the default gridview setting: style="border-collapse:collapse"
the code for GridView1_PreRender event is as follows:
protected void GridView1_PreRender(object sender, EventArgs e)
{
GridView1.CellSpacing = -1;
GridView1.Style["border-collapse"] = "seperate";
}
Please do revert if you have any doubts..
精彩评论