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



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!


Related

GridView 4515667917674281063

Post a Comment

  1. Quickbooks provides all kind of accounting software , quickbooks is very user friendly software QuickBooks tech support can guide you throughout the process with all the version of Quickbooks that full fill your business Needs. you can contact with us by dialling toll free number Quickbooks customer support number.Quickbooks tech support

    ReplyDelete
  2. If you are looking for the best Events sale so here is one of the best leather jacket website from where you can get the best leather jacket designs and quality. visit ot our website to get the best leather quality

    ReplyDelete

emo-but-icon

SUBSCRIBE


item