Tooltip for each row of grid, populated dynamically?

6 posts, 0 answers
  1. Eddie
    Eddie avatar
    66 posts
    Member since:
    May 2008

    Posted 04 Mar 2014 Link to this post

    I have a kendo grid contains a list of people.  I would like to add a kendo tooltip to each row so that, in essence, a detail view for the selected row will be shown in the tooltip.  To do this I need to call a web service method when the tooltip is loaded, passing in the key value of the row, then I use a template to layout the content of tooltip.  I'm a bit stuck trying to figure out where to pass the key value of the row to the tooltip...  I'm doing this in pure javascript, so no server-side code is used at all.  The web service call to get the details must be a POST, not a GET, if that makes any difference...?

    Here's what I have, which isn't even close to working (the grid populates fine, but the tooltips aren't working):

    $grid.kendoGrid({
     dataSource: dsPeople,
     scrollable: { virtual: true },  
     height: 600,
     resizable: true,
     selectable: "row",
     pageable: true,
     dataBound: function(e) {
      $("#grid").find("tr").kendoTooltip({
       content: People.GetPerson(e.data.Xref, 6012, '127.0.0.1', 'netname'),
       width: 680,
       height: 120,
       position: "bottom",
      });
     },
     columns: [
      { field: "FullName", title: "Name", groupable: false, resizable: true },
      { field: "StreetAddress", title: "Address", groupable: false, resizable: true },
      { field: "Sex", title: "S", groupable: true, resizable: false, width: 30 },
      { field: "Race", title: "R", groupable: true, resizable: false, width: 30 },
      { field: "Height", title: "Ht", groupable: false, resizable: false, width: 40 },
      { field: "Weight", title: "Wt", groupable: false, resizable: false, width: 40 },
      { field: "Age", groupable: true, resizable: false, width: 40 },
      { field: "DOB", groupable: false, resizable: false, format: "{0:MM/dd/yyyy}", width: 90 },
      { field: "Xref", title: "XREF", groupable: false, resizable: true, width: 70 }
     ],
     mobile: true
    });

    Can anyone point me to an example where something like this is being done?

    Thanks!
    Eddie
  2. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 06 Mar 2014 Link to this post

    Hi Eddie,

    I would recommend checking this example, which illustrates how similar behavior could be implemented.

    Regards,
    Alexander Popov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Eddie
    Eddie avatar
    66 posts
    Member since:
    May 2008

    Posted 06 Mar 2014 in reply to Alexander Popov Link to this post

    Alexander,

    Thanks for your reply!  That got me a lot further along than I was before, but I'm still a bit stuck on populating a tooltip using a template, with data from an ajax call...  Here's what I've got so far:

    <div id="grid" style="height: 380px"></div>
    <script type="text/x-kendo-template" id="PersonTemplate">
        <div class="personSummary">
            <img src="http://testserver.com/photo.ashx?x=#=Xref#" alt="#=FullName#" class="photo" />           
            <div class="summary">
                <div class="row">
                    <div class="col-md-2">XREF: #=Xref#</div>
                    <div class="col-md-2">Age: #=Age#</div>
                    <div class="col-md-2">Sex: #=Sex#</div>
                    <div class="col-md-2">Race: #=Race#</div>
                </div>
                <div class="row">
                    <div class="col-md-3">POB City: #=PlaceOfBirthCity#</div>
                </div>
            </div>
        </div>
    </script>

    Here's my javascript code:
    var dsPeople = People.GetPeople(search, 20);
     
    var $grid = $("#grid");
     
    $grid.kendoGrid({
        dataSource: dsPeople,
        scrollable: { virtual: true },         
        height: 600,
        groupable: true,
        sortable: true,
        resizable: true,
        selectable: "row",
        navigatable: true,
        pageable: true,
        //detailTemplate: kendo.template($("#PersonTemplate").html()),
        //detailInit: detailInit,
        dataBound: function(e) {
            imagePreview(50,20);
        },
        columns: [
            {
                field: "AlertFlags",
                attributes: { "rel": "flags" },
                encoded: true,
                title: "Flags",
                groupable: false,
                resizable: false,
                width: 55,
                template: "<span class='flags' title='#=AlertFlagsHelp#'>#=AlertFlags#</span>"
             },
            {
                field: "Xref",
                title: "Pic",
                template:  "<a href='http://aserver.com/photo.ashx?x=#=Xref#' class='preview' title='#=FullName#'><img src='http://aserver.com/photo.ashx?x=#=Xref#&s=small' class='photoThumb' alt='#=FullName#' /></a>",
                resizable: false, groupable: false, width: 41
            },
            { field: "FullName", title: "Name", groupable: false, resizable: true },
            { field: "StreetAddress", title: "Address", groupable: false, resizable: true },
            { field: "Sex", title: "S", groupable: true, resizable: false, width: 30 },
            { field: "Race", title: "R", groupable: true, resizable: false, width: 30 },
            { field: "Height", title: "Ht", groupable: false, resizable: false, width: 40 },
            { field: "Weight", title: "Wt", groupable: false, resizable: false, width: 40 },
            { field: "Age", groupable: true, resizable: false, width: 40 },
            { field: "DOB", groupable: false, resizable: false, format: "{0:MM/dd/yyyy}", width: 90 },
            { field: "Xref", title: "XREF", groupable: false, resizable: true, width: 70 }
        ],
        mobile: true
    })
    .data("kendoGrid")
    .bind("change", GetSelectedRow);           
     
    var $template = kendo.template($("#PersonTemplate").html());
    var tooltip = $("#grid").kendoTooltip({
        filter: "tr", //this filter selects the first column cells
        position: "top",
        content: function(e){
            var dataItem = $("#grid").data("kendoGrid").dataItem(e.target.closest("tr"));
            var person = {
                GetSummary: true,
                RequestParameters: {
                    IpAddress : '127.0.0.1',
                    SystemsUserId : 1234,
                    AppCode : 'Web Services',
                    UniqueUserIdentifier : '3jh578y6f',
                    Xref: dataItem.Xref
                }
            };
            $.ajax({
                type: "POST",
                url: "http://localhost:8333/Person",
                data: JSON.stringify(person),
                dataType: 'json',
                contentType: 'application/json',
                success: function(data){           
                    return $template(data);
                },
                error: function(error,statusText){
                    return $template(error);
                }
            });
       }
    }).data("kendoTooltip");

    I can confirm that when I hover over a row the ajax runs and I DO get a full person object in the 'data' object that is returned.  I pass it to the template, but the tooltip I get is just an empty tooltip.  There is no content, so it does not use the template or the data, as far as I can tell...

    Thanks again for your help!
  5. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 10 Mar 2014 Link to this post

    Hello again Eddie,

    Basically you need to have the template data before the content function finished executing, so you can use the template's output as return value. This could be accomplished in a couple of ways:
    • Attach a mouse over event handler to the Grid's rows and once it's triggered make the Ajax call first and display the Tooltip when the response arrives 
    • Use a synchronous call instead of asynchronous, thus ensuring that the template will be correctly rendered. Here is an updated example showing how this could be implemented.

    Regards,
    Alexander Popov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Bryan
    Bryan avatar
    28 posts
    Member since:
    Oct 2014

    Posted 06 Feb 2015 Link to this post

    I'm just curious if Eddie got this working, since I'm in the same position. The provided example for the second method no longer seems to work, and the console returns a message about the synchronous http request being deprecated in jquery.
  7. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 10 Feb 2015 Link to this post

    Hello Bryan,

    Here is an updated example using a slightly different approach for populating the Tooltip's content. 

    Regards,
    Alexander Popov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready