13 Answers, 1 is accepted
You can use the ClientID of the cell as shown below:
protected
void
RadGrid1_ItemDataBound(
object
sender, Telerik.Web.UI.GridItemEventArgs e)
{
if
(e.Item.ItemType == GridItemType.Header)
{
GridHeaderItem item = e.Item
as
GridHeaderItem;
foreach
(TableCell cell
in
item.Cells)
{
if
((cell.Controls.Count > 0))
{
// add tooltip to header title link
RadToolTipManager1.TargetControls.Add(cell.ClientID,
true
);
}
}
}
}
Please, test this solution and let us know how it goes.
All the best,
Svetlina
the Telerik team
I cant call Header ItemEvent, how to do that?
I tried everything with grid but get only pager ItemEvent!
The RadGrid has an ItemDataBound event, you would attach it like this:
<
telerik:RadGrid
ID
=
"RadGrid1"
runat
=
"server"
OnItemDataBound
=
"RadGrid1_ItemDataBound"
>
</
telerik:RadGrid
>
I hope that helps.
Try this approach instead.
ASPX Page:
<
div
id
=
"zone"
>
<
telerik:RadGrid
ID
=
"RadGrid1"
runat
=
"server"
AutoGenerateColumns
=
"false"
OnItemDataBound
=
"RadGrid1_ItemDataBound"
OnNeedDataSource
=
"RadGrid1_NeedDataSource"
>
<
MasterTableView
ShowHeadersWhenNoRecords
=
"true"
>
<
Columns
>
<
telerik:GridBoundColumn
DataField
=
"ABC"
HeaderText
=
"ABC"
>
</
telerik:GridBoundColumn
>
</
Columns
>
</
MasterTableView
>
</
telerik:RadGrid
>
</
div
>
<
telerik:RadToolTipManager
ID
=
"RadToolTipManager1"
runat
=
"server"
AutoTooltipify
=
"true"
ToolTipZoneID
=
"zone"
>
</
telerik:RadToolTipManager
>
Code-Behind:
protected
void
RadGrid1_ItemDataBound(
object
sender, Telerik.Web.UI.GridItemEventArgs e)
{
if
(e.Item.ItemType == GridItemType.Header)
{
GridHeaderItem item = e.Item
as
GridHeaderItem;
foreach
(TableCell cell
in
item.Cells)
{
cell.ToolTip = cell.Text;
}
}
}
I hope that helps.
I suggest to simply set ShowEvent="OnClick" for the tooltip as explained below:
http://demos.telerik.com/aspnet-ajax/tooltip/examples/showevent/defaultcs.aspx
Svetlina
the Telerik team
I suggest to simply set ShowEvent="OnClick" for the tooltip as explained below:
http://demos.telerik.com/aspnet-ajax/tooltip/examples/showevent/defaultcs.aspx
Svetlina
the Telerik team
Hello,
how to achieve display radtooltip onmouse over event only on one specific radgrid column header ? I don't want to use AutoTooltipify="true" because it tooltify everything...
Regards
Vasssek
If you want to have simple text, perhaps the easiest way is to declare it in the grid settings.
<
telerik:RadGrid
runat
=
"server"
ID
=
"rg1"
RenderMode
=
"Lightweight"
AutoGenerateColumns
=
"false"
OnNeedDataSource
=
"rg1_NeedDataSource"
>
<
MasterTableView
>
<
Columns
>
<
telerik:GridBoundColumn
HeaderTooltip
=
"aaaaaa"
DataField
=
"someField"
></
telerik:GridBoundColumn
>
<
telerik:GridBoundColumn
HeaderTooltip
=
""
DataField
=
"someColumn"
></
telerik:GridBoundColumn
>
</
Columns
>
</
MasterTableView
>
</
telerik:RadGrid
>
If you want to have rich content that does not change, you can use a static RadToolTip and perhaps the easiest way to access the header cell to add it as a target is on the client:
<telerik:RadGrid runat=
"server"
ID=
"rg1"
RenderMode=
"Lightweight"
AutoGenerateColumns=
"false"
OnNeedDataSource=
"rg1_NeedDataSource"
>
<MasterTableView>
<Columns>
<telerik:GridBoundColumn HeaderStyle-CssClass=
"forTooltip"
DataField=
"someField"
></telerik:GridBoundColumn>
<telerik:GridBoundColumn HeaderTooltip=
""
DataField=
"someColumn"
></telerik:GridBoundColumn>
</Columns>
</MasterTableView>
</telerik:RadGrid>
<telerik:RadToolTip runat=
"server"
ID=
"rtt1"
RelativeTo=
"Element"
Position=
"BottomCenter"
Width=
"200"
Height=
"100"
>
<asp:Label Text=
"special static content here"
runat=
"server"
/>
</telerik:RadToolTip>
<script>
function
addTtipToHeader() {
var
headerCell = $telerik.$(
".RadGrid .forTooltip"
).first().get(0);
var
ttipCtrl = $find(
"<%=rtt1.ClientID%>"
);
ttipCtrl.set_targetControl(headerCell);
Sys.Application.remove_load(addTtipToHeader);
}
Sys.Application.add_load(addTtipToHeader);
</script>
With the same approach, you can create a tooltip through the tooltip manager (https://demos.telerik.com/aspnet-ajax/tooltip/examples/radtooltipmanagerclientapi/defaultcs.aspx):
<telerik:RadGrid runat=
"server"
ID=
"rg1"
RenderMode=
"Lightweight"
AutoGenerateColumns=
"false"
OnNeedDataSource=
"rg1_NeedDataSource"
>
<MasterTableView>
<Columns>
<telerik:GridBoundColumn HeaderStyle-CssClass=
"forTooltip"
DataField=
"someField"
HeaderText=
"first column"
></telerik:GridBoundColumn>
<telerik:GridBoundColumn HeaderTooltip=
""
DataField=
"someColumn"
></telerik:GridBoundColumn>
</Columns>
</MasterTableView>
</telerik:RadGrid>
<telerik:RadToolTipManager runat=
"server"
ID=
"rttm1"
RelativeTo=
"Element"
Position=
"BottomCenter"
Width=
"200"
Height=
"100"
>
</telerik:RadToolTipManager>
<script>
function
addTtipToHeader() {
var
headerCell = $telerik.$(
".RadGrid .forTooltip"
).first().get(0);
var
ttipManagerCtrl = $find(
"<%=rttm1.ClientID%>"
);
var
tooltip = ttipManagerCtrl.getToolTipByElement(headerCell);
if
(!tooltip) {
tooltip = ttipManagerCtrl.createToolTip(headerCell);
tooltip.set_value(headerCell.innerText)
}
Sys.Application.remove_load(addTtipToHeader);
}
Sys.Application.add_load(addTtipToHeader);
</script>
Regards,
Marin Bratanov
Progress Telerik
Hi,
your suggestion works, but not as expected.
First I have to set tooltip value through declaration of the column, then on column hover both Microsoft original tooltip and RadTooltipManager are shown. If I leave Radgrid column tooltip value empty in column declaration section, then I couldn't set value from client side through tooltip.set_value('') method. Result is that when I hover mouse over column header nothing is shown.
What can I do ?
Best regards
Vasssek
Hi,
inspired by this link: https://www.telerik.com/forums/getting-column-header-text-client-side#-aT45XsUZUWYKOoigcIBZg i did it :-)
Here is the result function:
function addTtipToHeader() {
var tableView = $find("<%= RadGrid1.ClientID %>").get_masterTableView();
var column = tableView.getColumnByUniqueName("zakazka_HU_navratka");
//column.get_element().innerHTML = "Changed Column Header";
headerCell = column.get_element();
headerCell.title = "- MOP - Zákazka<
br
>- Expedícia - číslo HU<
br
>- Návratka - príjemca (Mat. doklad)";
var ttipManagerCtrl = $find("<%=RadToolTipManager1.ClientID%>");
var tooltip = ttipManagerCtrl.getToolTipByElement(headerCell);
if (!tooltip) {
tooltip = ttipManagerCtrl.createToolTip(headerCell);
}
}
This way only radtooltip is shown...
Regards
Vasssek
You may also find interesting this KB article for a similar double tooltip issue, it may just fit your scenario: https://www.telerik.com/support/kb/reporting/create-interactive-ad-hoc-reports/details/two-tooltips-for-header-cell-when-column-resizing-is-enabled.
Regards,
Marin Bratanov
Progress Telerik