locked
While showing in grid we show only that long string which can be accommodated in column and then add "..." (only if string is more than what is showing) and then add a tooltip to show the full string. RRS feed

  • Question

  • User1878568433 posted

    While showing in grid we show only that long string which can be accommodated in column and then add "..." (only if string is more than what is showing) and then add a tooltip to show the full string.  If user wants he can hover his mouse and see the whole string.

    My code Below..

    <td style="width:30%" valign="top">
      <div style="margin-left:15px; overflow:scroll; height:658px; width:calc(100% - 15px)">
        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" OnRowDataBound="GridView1_RowDataBound" 
    EmptyDataText="No files" CssClass="universal-grid2-blue-left" HeaderStyle-CssClass="FixedHeader"> <AlternatingRowStyle CssClass="alternate-row" /> <RowStyle CssClass="main-row" /> <HeaderStyle CssClass="table-header" HorizontalAlign="center" VerticalAlign="Middle" /> <Columns> <asp:BoundField DataField="Text" HeaderText="File Name" /> <asp:TemplateField> <ItemTemplate> <asp:LinkButton ID="lnkShow" Text="Show" CommandArgument='<%# Eval("Value") %>' runat="server"
    OnClick="ShowFile" Font-Underline="True"></asp:LinkButton> </ItemTemplate> </asp:TemplateField> </Columns> </asp:GridView> </div> </td>

    Please Help soon how to do.

    Wednesday, August 29, 2018 9:34 AM

All replies

  • Wednesday, August 29, 2018 9:38 AM
  • User1878568433 posted

    While showing in grid we show only that long string which can be accommodated in column and then add "..." (only if string is more than what is showing) and then add a tooltip to show the full string.  If user wants he can hover his mouse and see the whole string.

    Wednesday, August 29, 2018 9:40 AM
  • User283571144 posted

    Hi sripadasatpathy,

    According to your description, I suggest you could consider using bootstrap tooltip and jquery function to achieve your requirement.

    More details, you could refer to below codes:

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ToolTipBootstrap.aspx.cs" Inherits="TestApplication.ToolTipBootstrap" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <script>
            $(document).on('mouseenter', ".iffyTip", function () {
                var $this = $(this);
                if (this.offsetWidth < this.scrollWidth && !$this.attr('title')) {
                    $this.tooltip({
                        title: $this.text(),
                        placement: "bottom"
                    });
                    $this.tooltip('show');
                }
            });
        </script>
        <style>
            .wd20 {
                width: 20px;
            }
    
            .wd100 {
                width: 100px;
            }
    
            .iffyTip {
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <hr />
                <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" >
                    <Columns>
                         <asp:TemplateField HeaderText="Text">
                            <ItemTemplate>
                                <div class="iffyTip wd100"> <asp:Label ID="Label1" runat="server" Text='<%# Eval("Text") %>'></asp:Label></div>
                              </ItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField>
                            <ItemTemplate>
                                <asp:LinkButton ID="lnkShow" Text="Show" CommandArgument='<%# Eval("Value") %>' runat="server" OnClick="lnkShow_Click" Font-Underline="True"></asp:LinkButton>
                            </ItemTemplate>
                        </asp:TemplateField>
                    </Columns>
                </asp:GridView>
            </div>
    
        </form>
    </body>
    </html>
    

    Code-behind:

    using System;
    using System.Collections.Generic;
    using System.Data;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    
    namespace TestApplication
    {
        public partial class ToolTipBootstrap : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
                DataTable d1 = new DataTable();
                d1.Columns.Add("Text");
                d1.Columns.Add("Value");
                d1.Rows.Add("Supercalifragilisticexpialidocious" , "aaaa");
                d1.Rows.Add("aous", "aaaa");
                GridView1.DataSource = d1;
                GridView1.DataBind();
            }
    
            protected void lnkShow_Click(object sender, EventArgs e)
            {
    
            }
        }
    }

    Result:

    Best Regards,

    Bradno

    Tuesday, September 4, 2018 6:20 AM