gridview boundfield width uncontrolled when text is long and wrapped

Question

User-1659672931 posted

I have a gridview where I have two long columns Primary_Skill and Resume_Title and other are short columns. I set the width of columns and wrap them as well but wrap is not going more than 2 lines and still the first two columns are appearing wider as comparison to what the width is set. Rest of columns are not displaying in the same screen. I want that with wrapping all columns will be displayed in same page with no horizontal bar. Below is my code.

<asp:GridView ID="grdSearchResult" runat="server" DataKeyNames="SeekerEmail_Id, Extension"
                        OnRowDataBound="OnRowDataBound" AutoGenerateColumns="False" BorderWidth="1px"
                        BackColor="White" CellPadding="5" BorderStyle="None" BorderColor="Gray" Width="100%"
                        GridLines="Both">
                        <FooterStyle ForeColor="Black" BackColor="White"></FooterStyle>
                        <PagerStyle ForeColor="Black" HorizontalAlign="Center" BackColor="White"></PagerStyle>
                        <HeaderStyle ForeColor="White" Font-Bold="True" BackColor="Green" Width="25%"></HeaderStyle>
                        <Columns>
                            <asp:BoundField HeaderText="Job Skills" DataField="Primary_Skill" SortExpression="Primary_Skill"
                                ItemStyle-HorizontalAlign="Center" ItemStyle-Wrap="true">
                                <ItemStyle Width="25%" />
                            </asp:BoundField>
                            <asp:BoundField HeaderText="Resume Title" DataField="Resume_Title" SortExpression="Resume_Title"
                                ItemStyle-HorizontalAlign="Center" ItemStyle-Width="25%" ItemStyle-Wrap="true">
                            </asp:BoundField>
                            <asp:BoundField HeaderText="Exp (Years)" DataField="Experience" SortExpression="Experience"
                                ItemStyle-HorizontalAlign="Center" ItemStyle-Width="10%"></asp:BoundField>
                            <asp:TemplateField HeaderText="Location" ItemStyle-HorizontalAlign="Center" ItemStyle-Width="20%">
                                <ItemTemplate>
                                    <asp:Label ID="lblLocation" runat="server" ToolTip='<%# Eval("Location")%>' Text='<%# Eval("Location").ToString().Shorten(30) %>'
                                        Style="word-wrap: normal; word-break: break-all; cursor: default;"></asp:Label>
                                </ItemTemplate>
                            </asp:TemplateField>
                            <asp:BoundField HeaderText="Post Date" DataField="Creation_Date" SortExpression="Creation_Date"
                                ItemStyle-HorizontalAlign="Center" ItemStyle-Width="15%" DataFormatString="{0:dd-MM-yyyy}">
                            </asp:BoundField>
                            <asp:TemplateField HeaderText="Download Resume" ItemStyle-HorizontalAlign="Center">
                                <ItemTemplate>
                                    <asp:UpdatePanel ID="lnkdownldUpdate" runat="server">
                                        <ContentTemplate>
                                            <asp:LinkButton ID="lnkDownload" ToolTip='<%#Eval("SeekerEmail_Id")%>' Text='<%#Eval("SeekerEmail_Id").ToString().Shorten(30) %>'
                                                CommandArgument='<%# Eval("Resume_Title") %>' OnClick="DownloadFile" runat="server"
                                                Style="word-wrap: normal; word-break: break-all; cursor: pointer;"></asp:LinkButton>
                                        </ContentTemplate>
                                        <Triggers>
                                            <asp:PostBackTrigger ControlID="lnkDownload" />
                                        </Triggers>
                                    </asp:UpdatePanel>
                                </ItemTemplate>
                            </asp:TemplateField>
                        </Columns>
                        <SelectedRowStyle ForeColor="White" Font-Bold="True" BackColor="#008A8C"></SelectedRowStyle>
                        <RowStyle ForeColor="Black" BackColor="White"></RowStyle>
                        <SortedAscendingCellStyle BackColor="#F1F1F1" />
                        <SortedAscendingHeaderStyle BackColor="#0000A9" />
                        <SortedDescendingCellStyle BackColor="#CAC9C9" />
                        <SortedDescendingHeaderStyle BackColor="#000065" />
                    </asp:GridView>

 

Answer 1

User954927490 posted

you can set the width when page is loaded using jquery on document.ready event

Answer 2

User-707554951 posted

Hi anuragrawat1....,

From your description, I suggest you could use CSS style to wrap them when content overflow. Here have an example, you could refer to it.

<style type="text/css">
        .WrappedText
{
  word-break: break-all;
  word-wrap: break-word;
}
</style>
<div class="WrappedText">
            <asp:GridView ID="SPGridView1" runat="server" AutoGenerateColumns="False" 
                Width="50%">
                <RowStyle Wrap="true" />            
                <Columns>
                    <asp:BoundField DataField="ID" HeaderText="Emp Id"  >
                        <ItemStyle Width="10%" />
                    </asp:BoundField>
                    <asp:BoundField DataField="EmployeeName"  HeaderText="Employee Name" >
                        <ItemStyle Width="45%" />
                    </asp:BoundField>
                    <asp:TemplateField HeaderText="Employee Web Site">
                        <ItemStyle Width="45%"  />
                        <ItemTemplate>
              <asp:HyperLink ID="HyperLinkFieldEdit" runat="server" NavigateUrl='<%# Eval("Url") %>' Text='<%# Eval("Url") %>'/>
                        </ItemTemplate>
                    </asp:TemplateField>
                </Columns>
            </asp:GridView >
        </div>

The output as below:

Hope this can help you. If you have any question and confusion about the problem. Please don't hesitate to let me know.

Best regards
Cathy