Remove From My Forums

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.

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

0

Sign in to vote

User-2146987983 posted

Exactly what you need

http://www.programming-free.com/2012/12/aspnet-trim-text-with-ellipsis-and-show.html

Wednesday, August 29, 2018 9:38 AM
0

Sign in to vote

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

Asked by:

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.

Question

All replies