Tooltip for ForeignKeyColumns

6 posts, 0 answers
  1. ManniAT
    ManniAT avatar
    877 posts
    Member since:
    Nov 2003

    Posted 23 Jul 2015 Link to this post

    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

  2. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 27 Jul 2015 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. ManniAT
    ManniAT avatar
    877 posts
    Member since:
    Nov 2003

    Posted 27 Jul 2015 in reply to Alexander Popov Link to this post

    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

     

  5. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 29 Jul 2015 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  6. ManniAT
    ManniAT avatar
    877 posts
    Member since:
    Nov 2003

    Posted 30 Jul 2015 in reply to Alexander Popov Link to this post

    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.

  7. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 30 Jul 2015 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
UI for ASP.NET MVC is VS 2017 Ready