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
  3. Appreciate the effort you put into creating such detailed content.
    Internet marketing service In Gwalior

    ReplyDelete

emo-but-icon
:noprob:
:smile:
:shy:
:trope:
:sneered:
:happy:
:escort:
:rapt:
:love:
:heart:
:angry:
:hate:
:sad:
:sigh:
:disappointed:
:cry:
:fear:
:surprise:
:unbelieve:
:shit:
:like:
:dislike:
:clap:
:cuff:
:fist:
:ok:
:file:
:link:
:place:
:contact:

SUBSCRIBE


Hot in weekRecentComments

Recent

Spring Security 4 for Spring MVC using Spring Data JPA and Spring Boot

I have been writing a series of tutorials on using Spring Security 4 in Spring MVC application starting from the basic in-memory authentication. In this post, I am writing a step by ste...

Spring Security JDBC Authentication with Password Encryption

I published a basic level tutorial on how to implement JDBC Authentication and Authorization using Spring Security last week. There are few best practices to be followed while implementing secur...

Spring Security 4 - Simple JDBC Authentication and Authorization

In one of my articles, I explained with a simple example on how to secure a Spring MVC application using Spring Security and with Spring Boot for setup. I am going to extend the same example to ...

Java String Split with Pipe Character Not Working - Solution

If you are working on Java, you might have run into this issue when you try to split a string based on a pipe character ("|"). It simply won't work. Split method in Java takes regex as an argumen...

Comments

DigitalSaga:

Wow, this was packed with great information. Thank you for putting it all together so clearly. 7-17-2025

We Care India:

These features are perfect for real-world use, and the design is flawless. You're definitely a pro at this—keep 7-17-2025

Ninja:

Impressive! Your content always adds something new to the conversation.Internet marketing service In Gwalio...

Ninja:

Impressive! Your content always adds something new to the conversation.social media marketing company in g...

Saanvi:

"SOC 360 offers detailed SOC training in Hyderabad, ideal for freshers and professionals who want to build a strong career in cybersecurity."

item