This is a migrated thread and some comments may be shown as answers.

[Solved] tooltip for header as well as cells in telerik mvc grid

1 Answer 115 Views
Grid
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Richa
Top achievements
Rank 1
Richa asked on 01 Mar 2012, 02:36 PM
I want to show a tooltip when i hover my mouse on the telerik mvc grid header as well for all the cells in the grid. i have tried out many options but nothing seems to work.i want to implement it as a java script. can anybody please help me?
my grid is defined in the following manner-

@(Html.Telerik().Grid<NPSPPOC.Models.

 

tblNPSPDetail>()

 

.DataBinding(dataBinding => dataBinding.Ajax().Select(

 

"TakeOwnershipAjax", "NPSP"))

 

.Name(

 

"MyGrid1")

 

.Columns(columns =>

{

columns.Bound(o => o.Priority).Title(

 

"!");

 

columns.Bound(o => o.CenterId).Title(

 

"Center Id");
columns.Bound(o => o.MPI).Title("MPI");
}))

I have tried to implement the header tooltip in the following manner-
columns.Bound(o => o.ClaimNumber).Title("Claim #").HeaderHtmlAttributes(new { title = "Claim Number" });

 

However, for cells, i do not know what to do. I want to use a java script instead of implementing the tooltip for header and cells separetely in the grid definition itself.

I tried out the solution at http://www.paynepoints.com/?page_id=29 but i cannot find the livequery plugin.
Please let me know a solution to this asap.

 

 

1 Answer, 1 is accepted

Sort by
0
Dadv
Top achievements
Rank 1
answered on 01 Mar 2012, 05:12 PM
Hi,

did you try the jquery tips plugin ? (http://vadikom.com/demos/poshytip/)

Bind on the OnDataBound  (http://demos.telerik.com/aspnet-mvc/grid/clientsideevents)

    function onDataBound() {
        $(".t-header").poshytip({
            className: 'tip-yellowsimple',
            bgImageFrameSize: 9
        });
        $("#Grid td").poshytip({
             className: 'tip-yellowsimple',
             bgImageFrameSize: 9,
            content: function () {  return $(this).html();}
        });
    }



don't forget to add a title to the header :

columns.Bound(o => o.LastName).Title("Last Name").HeaderHtmlAttributes(new {title="Last Name"});

and the clients events :
.ClientEvents(e => e.OnDataBound("onDataBound"))

it work for me in none edit mode

Regards,

you could try with http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/  too
Tags
Grid
Asked by
Richa
Top achievements
Rank 1
Answers by
Dadv
Top achievements
Rank 1
Share this question
or