Tooltips in a boundcolumn

[tshad]

In a datagrid, is there a way to put a tooltip and use a field from the data
that is returned from the sql statement to fill it?

For example:

<asp:BoundColumn DataField="CompanyDesc"
HeaderText="Company:"
ReadOnly="true"
Visible="true"
ItemStyle-Width="135px"
ItemStyle-VerticalAlign="Middle"
SortExpression="Company"> </asp:BoundColumn>

In the above, CompanyDesc, is an abbreviated Company name. I also am
passing the full Company and would like to put that in the tooltip.

Can we do this in a datagrid?

Thanks,

Tom

 

[Lars-Erik Aabech]

Hi!

You'd have to replace the BoundColumn with a TemplateColumn and put a Label
control (or something else) inside it. If you use Visual Studio, it's a
peace of cake Just "convert" the column to a template control in the
Property Builder for the grid.
The markup should look like this:

<asp:TemplateColumn>

<HeaderTemplate>
<b>Company</b>
</HeaderTemplate>

<ItemTemplate>
<asp:Label
Text='<%# DataBinder.Eval(Container.DataItem,
"CompanyDesc") %>'
ToolTip='<%# DataBinder.Eval(Container.DataItem,
"Company") %>'
runat="server"/>
</ItemTemplate>

</asp:TemplateColumn>

More info on TemplateColumns here:
http://msdn.microsoft.com/library/e...ntrolstemplatecolumnclasstopic.asp?frame=true

HTH,
Lars-Erik

 

[tshad]

Hi!

You'd have to replace the BoundColumn with a TemplateColumn and put a
Label control (or something else) inside it. If you use Visual Studio,
it's a peace of cake Just "convert" the column to a template control in
the Property Builder for the grid.
The markup should look like this:

<asp:TemplateColumn>

<HeaderTemplate>
<b>Company</b>
</HeaderTemplate>

<ItemTemplate>
<asp:Label
Text='<%# DataBinder.Eval(Container.DataItem,
"CompanyDesc") %>'
ToolTip='<%# DataBinder.Eval(Container.DataItem,
"Company") %>'
runat="server"/>
</ItemTemplate>

</asp:TemplateColumn>

I tried that, but the tooltip doesn't show for an asp:Label, apparently.

Tom

 

[Lars-Erik Aabech]

I tried that, but the tooltip doesn't show for an asp:Label, apparently.

Tom

That's strange.. The following code works for me:

Codebehind:
---------------
namespace localhost
{
public class ToolTipTest : System.Web.UI.Page
{
protected System.Web.UI.WebControls.DataGrid DataGrid1;

private void Page_Load(object sender, System.EventArgs e)
{
SomeDataItem item1 = new SomeDataItem("Text 1", "ToolTip 1");
SomeDataItem item2 = new SomeDataItem("Text 2", "ToolTip 2");
SomeDataItem item3 = new SomeDataItem("Text 3", "ToolTip 3");

SomeDataItem[] items = new SomeDataItem[] {item1, item2, item3};

DataGrid1.DataSource = items;
DataGrid1.DataBind();
}

#region Web Form Designer generated code
// ...
#endregion
}

public class SomeDataItem
{
private string text;
private string toolTip;

public string Text
{
get
{
return text;
}
set
{
text = value;
}
}

public string ToolTip
{
get
{
return toolTip;
}
set
{
toolTip = value;
}
}

public SomeDataItem(string text, string toolTip)
{
Text = text;
ToolTip = toolTip;
}
}
}

-------------------

Web page:
-------------------
<aspataGrid id="DataGrid1" style="Z-INDEX: 101; LEFT: 120px; POSITION:
absolute; TOP: 128px"
runat="server" AutoGenerateColumns="False" Width="184px">
<Columns>
<asp:TemplateColumn>
<ItemTemplate>
<asp:Label id=Label1 runat="server" ToolTip='<%#
DataBinder.Eval(Container.DataItem, "ToolTip") %>' Text='<%#
DataBinder.Eval(Container.DataItem, "Text") %>'>
</asp:Label>
</ItemTemplate>
</asp:TemplateColumn>
</Columns>
</aspataGrid>
-----------------

Generated HTML output:
-----------------
<table cellspacing="0" rules="all" border="1" id="DataGrid1"
style="width:184px;border-collapse:collapse;Z-INDEX: 101; LEFT: 120px;
POSITION: absolute; TOP: 128px">
<tr>
<td>&nbsp;</td>
</tr><tr>
<td>
<span id="DataGrid1__ctl2_Label1" title="ToolTip 1">Text 1</span>
</td>
</tr><tr>
<td>
<span id="DataGrid1__ctl3_Label1" title="ToolTip 2">Text 2</span>
</td>
</tr><tr>
<td>
<span id="DataGrid1__ctl4_Label1" title="ToolTip 3">Text 3</span>
</td>
</tr>
</table>
---------

The title attribute of a <span> displays a tooltip, at least in IE 6.0

HTH,
Lars-Erik