Question

Hi and thanks for looking.

I have a GridView, and its datasource is set to an external class which returns an ArrayList. Now, in the aspx page, I have a TemplateField, and the Text property is set to

Text = '<%#Eval("Name") %>'

except that the Name is always truncated, even though the name in the db has a value much larger. I’m guessing the gridview/databinding is truncating the name for some reason? Anyway, I want to display the full name on hover, so on the _RowDataBound event, I have e.Row.Cells[2].ToolTip = something, and I’m not sure what that ‘something’ should be.

Can I use Eval in this case, too? And if so, what would the syntax be like? If not, what are my options?

Answer 1

Little playing with CSS and set tooltip will solve this

Code Behind:

   protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
    {   for(int i =0;i <GridView1.Rows.Count;i++)
        {
           Label lblName = (Label)GridView1.Rows[i].Cells[1].FindControl("lblname");
           lblName.ToolTip = "This is my toolTip";//  You can set tooltip as Fullname  
        }
    }

Default.aspx:

   <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" CssClass="gridMyClass"
        Width="125px" onrowdatabound="GridView1_RowDataBound">
        <Columns>
            <asp:TemplateField HeaderText="ID">
                <ItemTemplate>
                    <asp:Label ID="Label1" runat="server" Text='<%#Eval("Id") %>'></asp:Label>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Name">
                <ItemTemplate>
                  <asp:Label ID="lblname" CssClass="myTxtClass"  runat="server" Text='<%#Eval("name")%>'></asp:Label>

                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>

CSS:

.myTxtClass{
    display:inline;
    position: relative;
    text-decoration:none;
    cursor:pointer;
}

.myTxtClass:hover:before{
    border: solid;
    border-color: red transparent;
    border-width: 6px 6px 0 6px;
    bottom: 20px;
    content: "";
    left: 50%;
    position: absolute;
    z-index: 99;
}


.myTxtClass:hover:after{
    background-color: red;
    opacity:0.7;
    border-radius: 5px;
    bottom: 26px;
    color: #fff;
    content: attr(title);
    left: 20%;
    padding: 5px 15px;
    position: absolute;
    z-index: 98;
    width: 220px;
} 

ScreenShot: