[Solved] Grid row tooltip to show hidden values?

[Matt]

I would like to create a tooltip whenever I hover over a row in the MVC grid using jquery.  I want to show field values that are not visible columns in my row. Can someone give me an example of how I can store the fields I'm not displaying in each row and how to access them client side in javascript.  I was planning to user the jquery hover event like below.  I just need to know how to access the field values client side, and then I can figure out how to put them in a tooltip or pop up a div at the mouse position etc.  I was wondering if storing the values in the datakeys is a good idea and if so, how can I access datakeys in the hover event?

$('#myGrid').delegate('tr', 'hover', (
    function (e) {
        //access row values here

    }
    ));

 

[Petur Subev]

Hello Matt,

If you are using Ajax binding I suggest you to use the dataItem method provided by the Grid API. Doing so you will only need to pass the tr element to receive the actual dataItem representing the current row.
I hope this is what you are looking for.

All the best,
Petur Subev
the Telerik team

[Matt]

Hi Petur,

I am using ajax binding, but the I cannont get access to the dataItem.  In the Jquery event below the e.dataItem is "undefined".  The tr element ( which would be $(this) in the code below, does not have dataItem either.  I need a way to do this on mouseover or hover over.  I am not using one of the telerik clientside events which seem to have access to e.dataItem. 

Can you give me advise on how to get the dataItem in my hover or mouseover client event?

$('#ColorSchemeGrid').delegate('tr', 'hover', (
    function (e) {
        //access row values here
        alert(e.dataItem);
    }
    ));

 

 

[Petur Subev]

Hi again Matt,

What I meant is the following:

$('#Grid').delegate('tr', 'hover', (
    function (e) {
        var dataItem = $('#Grid').data().tGrid.dataItem(e.currentTarget);
        alert(dataItem);
    }
));

I hope this makes things clear.

Kind regards,
Petur Subev
the Telerik team

[Matt]

Hi Petur,

This is not working.  I tested and $('#Grid').data().tGrid.dataItem(e.currentTarget) is undefined.  Any suggestions?  Thanks.

[Petur Subev]

Hi again Matt,

The dataItem method returns a value if you are using ajax binding. If your Grid is server bound or you are passing a collection to the constructor of the Grid the dataItem wont return any object.
If this is the case on your side you should configure your Grid to use ajax binding if you want to take advantage of the dataItem method.

Kind regards,
Petur Subev
the Telerik team

[Andreas]

Hi Matt,

You wrote that you tried $('#Grid').data().tGrid.dataItem(e.currentTarget). But looking at a former of your posts you wrote
$('#ColorSchemeGrid').delegate('tr', 'hover', (... 

Did you really used '#Grid' in your last test?  If so and your grid actually has 'ColorSchemeGrid' as it's ID then it's clear why you got back an 'undefined'.  Try '$('#ColorSchemeGrid').data().tGrid.dataItem(e.currentTarget)' instead and it should work.

Hope this helps,
Andreas

[Matt]

Andreas,

Thanks for the suggestion.  I was just trying to make my example in my forum post generic, by using "#Grid", but you are correct in my code I am using the real gridname #ColorSchemeGrid. 

[Matt]

Peter,

Thanks for the Help.  You were correct, my issue was I was using Server binding for the initial load and ajaxbinding for paging, sorting etc.  I removed the Server binding and let it bind initially using just the ajaxbinding and now I can access the dataitem.  Thanks.

[Mahesh]

Hi,

Can u please tell me how to use this delegate method to get the tooltip  for the grid cellls???
If possible pls share your solution...
I also trying to get the tooltip...Pls help me..

Thanks....

[Andreas]

Have a look here:

http://api.jquery.com/delegate/ 

Here a slightly modified version of Petur's sample:

$('#Grid .t-grid-content').delegate('tr', 'hover', (
    function (e) {
        var gridControl    = $('#Grid').data('tGrid');
        var hoveredRowData = gridControl.dataItem(e.currentTarget);
        alert(hoveredRowData);
    }
));

What it does is to instruct jQuery to attach a hover handler to each current and future table row of the grid.  The hover handler than get's a hold on the Grid control (line 3) and then uses the Grid API 'dataItem' to extract the data of the currently hovered over Grid row.

In contrast to Petur's selector I have added the '.t-grid-content' class selector to make sure to attach the hover handler to the correct 'tr' elements.  The actual Grid control is build up of two different tables, one for the header and one for the content.  Just adding to all 'tr' in the Grid might give an error when trying to extract the row data when hovering over the header.

Hope this helps,
Andreas