Tooltip for ForeignKeyColumns

[ManniAT]

Hi,

I have a grid showing several columns like this:

 

columns.Bound(c => c.WeekNumber).ClientGroupHeaderTemplate("KW: #=value#").Hidden(true);
         columns.Bound(c => c.Date).Format("{0:dddd dd.MM.yy}") ;
         columns.ForeignKey(c => c.ThisToSoup, (IEnumerable<EECanteen.Models.FoodItem>)ViewData["Soups"], "ID", "Name").Width(200);
         columns.ForeignKey(c => c.ThisToMenuOne, (IEnumerable<EECanteen.Models.FoodItem>)ViewData["Menus"], "ID", "Name").Width(200);
         columns.ForeignKey(c => c.ThisToMenuTwo, (IEnumerable<EECanteen.Models.FoodItem>)ViewData["Menus"], "ID", "Name").Width(200);
         columns.ForeignKey(c => c.ThisToMenuThree, (IEnumerable<EECanteen.Models.FoodItem>)ViewData["Menus"], "ID", "Name").Width(200);
         columns.ForeignKey(c => c.ThisToCake, (IEnumerable<EECanteen.Models.FoodItem>)ViewData["Cakes"], "ID", "Name").Width(200);
         columns.Bound(c => c.Salads).ClientTemplate("#=SaladsTemplate(Salads)#");
         columns.Command(command => { command.Destroy(); command.Edit(); }).Width(180);

 

I want to display a tooltip for the foreign key and for the selected items in the "Salads" column.
And I want to load the data via Ajax using a controller method where I pass the ForeignKey.

Fortunately these Key (also for the Salads) reference the same table in my database.

I also have this ID in my Salads Template which is built like this:

<script type="text/kendo" id="SaladsTemplate">
    <strong>
        #for(var i = 0; i< data.length; i++){#
        <a title="#:data[i].Name#" data-id="#:data[i].ID#" href="">#:data[i].Name#</a>
        #}#
    </strong>
</script>

<script type="text/javascript">
    var SaladsTemplate = kendo.template($("#SaladsTemplate").html(), { useWithBlock: false });
</script>

By the way - I want no tooltip on the Date and other columns (not shown here).

Manfred

[Alexander Popov]

Hello Manfred,

This could be done by initializing a Tooltip widget and setting its filter to a custom class. Then, assign this class to the column that you wish to have a tooltip and use the content function get the dataItem and display the desired values. Here is an example illustrating similar behavior.

Regards,
Alexander Popov
Telerik

[ManniAT]

Hi,

 the example you linked just handles one column - I need it for multiple columns.
The example you linked uses static text already present in the grid - I need extra data (I don't want to load this initially - therefore I asked for Ajax).

Wouldn't assigning a class would ovveride the default class? (Alternating rows or so)
Anyhow this is not a big problem.

But it seems as if this "class approach" would mean that I have to provide an extra tooltip for every one of the columns I want to display data.

Maybe my question was not clear.

Assume the grid above would display:

........Menu 1............Menu 2...............Menu 3....
.....H and E (7)....TS and P (9).....CW and FF (2)...
The not visible ID's (7, 9, 2) are my keys to a controller method which provides a (partial) view I want to display in the Tooltip.

The link would be something like:
Controller/Details/IDofTheItem

Example:s
when I hover the first column:
Controller/Details/7
or for the last one:
Controller/Details/2

 

And the resulting data (view) - something like:
H and E ==> Ham and Eggs
....Calories: 1234
....Fat: 222
....(several nutrient informations)
...Imagine the taste of..... (pretty long text)

 

Manfred

 

[Alexander Popov]

Hello,

The class is added to the cells, not the rows, so it should not affect the default look and feel. Using a JavaScript function to generate the content allows you to use remote data, however the requests should be synchronous, otherwise the Tooltip's content will be rendered before the response arrives. For example:  

@(Html.Kendo().Tooltip()
    .Filter(".hasTooltip")
    .For("#grid")
    .ContentHandler("getContent")
)

<script>
    function getContent(e) {
        var result = "";
        $.ajax({
            data: {
                CategoryID: $("#grid").getKendoGrid().dataItem(e.target.closest("tr")).CategoryID
            },
            async: false,
            url: "test",
            success: function (data) {
                result = data.something;
            }
        });

        return result;
    }

</script>

@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ProductViewModel>()
    .Name("grid")
    .Columns(columns =>
    {
        columns.Bound(p => p.ProductName).HtmlAttributes(new {@class ="hasTooltip" });
        columns.ForeignKey(p => p.CategoryID, (System.Collections.IEnumerable)ViewData["categories"], "CategoryID", "CategoryName")
            .Title("Category").Width(150).HtmlAttributes(new { @class = "hasTooltip" });
        columns.Bound(p => p.UnitPrice).Width(150);
        c

Regards,
Alexander Popov
Telerik

[ManniAT]

Hi Alexander,

 did you check my first post?

I have several columns showing one element from a list of "FoodItems".

The content of the column (as result in the browser) is the Name of such an item.

 

Again

columns.ForeignKey(c => c.ThisToSoup, (IEnumerable<EECanteen.Models.FoodItem>)ViewData["Soups"], "ID", "Name").Width(200);
         columns.ForeignKey(c => c.ThisToMenuOne, (IEnumerable<EECanteen.Models.FoodItem>)ViewData["Menus"], "ID", "Name").Width(200);
         columns.ForeignKey(c => c.ThisToMenuTwo, (IEnumerable<EECanteen.Models.FoodItem>)ViewData["Menus"], "ID", "Name").Width(200); 

 The first column shows "SoupXX" because ThisToSoup has (for an example) the value 10.

Second column "Hamburger" (This2MenuOne has ID 15)

Third column "Schnitzel" (This2MenuTwo has ID 21)​

 

What your code does (as I can see) is to obtain the ID of the ROW (the whole thing).
But what I need is (depending on the column) This2Soup, This2MenuOne, This2MenuTwo....

Of course, taking your code I could do something like

$.ajax({
            data: {
                CategoryID: $("#grid").getKendoGrid().dataItem(e.target.closest("tr")).ThisToSoupID
            },
            async: false,

$.ajax({
            data: {
                CategoryID: $("#grid").getKendoGrid().dataItem(e.target.closest("tr")).ThisToMenuOne
            },
            async: false,

Or in other words - for each column an extra tooltio. My hope was to have ONE tooltip and get the ID (needed to send to the controller) from this item.

[Alexander Popov]

Hi ManniAT,

The example I shared is just a proof of concept, not an end-to-end solution that fully matches your criteria. The behavior you wish to achieve could be done in the same manner though: 

<script>
    function getContent(e) {
        var grid = $("#grid").getKendoGrid();
        var item = grid.dataItem(e.target.closest("tr"));
        var field = grid.columns[e.target.index()].field;

        var result = "";
        $.ajax({
            data: {
                id: item.get(field)
            },
            async: false,
            url: "test",
            success: function (data) {
                result = data.something;
            }
        });

        return result;
    }

</script>

Regards,
Alexander Popov
Telerik