ASP.NET: Trim text with ellipsis and show tooltip in GridView

In a gridview if data in a cell consists of more number of characters making it very wide in appearance, a good design option to rectify it would be to cut short the displayed text according to the column width and show ellipsis indicating that there is still more to be shown. We can then have a tooltip on the cells of that column displaying the complete data string.

Option 1:

To trim text and show ellipsis to the cells of a column in gridview, use a TemplateField with a label and use CSS3's text-overflow option. Then in the 'ToolTip' property of the label field, add code to bind the field with the value from data source as shown below.

<asp:GridView ID="GridView1" runat="server" OnRowDataBound="GridView1_RowDataBound" AutoGenerateColumns="false">
    <Columns>
     <asp:TemplateField HeaderText ="Product_Review">
           <ItemTemplate>
                 <div style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100px">
                      <asp:Label ID="review" runat="server" Text='<%# Bind("Product_Review") %>' Tooltip='<%#Bind("Product_Review")%>'></asp:Label>
                 </div>
           </ItemTemplate>
           <HeaderStyle Wrap="false" Width="100" HorizontalAlign="Left" />
           <ItemStyle Wrap="false" Width="100"></ItemStyle>
     </asp:TemplateField>
    </Columns>
</asp:GridView>

Option 2:

Use the same logic to trim text and show ellipsis, use gridview's RowDataBound event to display tooltip. Here we find the label control and use its text value to display tooltip.

<asp:GridView ID="GridView1" runat="server" OnRowDataBound="GridView1_RowDataBound" AutoGenerateColumns="false">
   <Columns>
       <asp:TemplateField HeaderText ="Product_Review" HeaderStyle-ForeColor="Orange">
                <ItemTemplate>
                    <div style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100px">
                        <asp:Label ID="review" runat="server" Text='<%# Bind("Product_Review") %>'></asp:Label>
                    </div>
                </ItemTemplate>
                <HeaderStyle Wrap="false" Width="100" HorizontalAlign="Left" />
                <ItemStyle Wrap="false" Width="100"></ItemStyle>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

In the code-behind page,

     protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
        {
            if (e.Row.RowType == DataControlRowType.DataRow)
            {
                Label lblReview = (Label)e.Row.FindControl("review");
                string tooltip = lblReview.Text;
                e.Row.Cells[4].Attributes.Add("title", tooltip);
            }
        }

Sample output is shown below,

Please leave your comments and queries about this post in the comment sections in order for me to improve my writing skills and to showcase more useful posts.Thanks for reading!!

Subscribe to GET LATEST ARTICLES!