开发者

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..

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜