Logo Questions Linux Laravel Mysql Ubuntu Git Menu

Kendo UI - Tooltip in a grid

I'm trying to create a tooltip for my grid like this:

    autoHide: true,
    showOn: "mouseenter",
    position: "right",
    filter: ".k-grid-content a.hasTooltip",
    content: kendo.template($("#storeTerritory").html())

The template definition:

<script type="text/x-kendo-template" id="storeTerritory">
<div class="tooltipcontent">
    #for(var i = 0; i < Territories.length; i++){#
        #if (Territories != 'null' && Territories != '')  {#
        #} else{#
            <p>Information not available</p>

I've setup a sample here:

I get a ReferenceError: Territories is not defined error in the console when I mouse over on 'Wilton'

Let's say I were to replace the contents of the storeTerritory template with plain-old HTML, then the tooltip appears:


What could the issue be?

like image 855
nouptime Avatar asked Apr 22 '14 10:04


People also ask

How to show Tooltip in kendo grid?

Use the Tooltip template to display the content of its anchor elements. Wrap the Grid component inside the kendoTooltip directive. Set showOn to none and handle the mouseover event to show the Tooltip in specific conditions. Use the toggle and hide methods to change the visibility of the Tooltip programmatically.

How to add Tooltip in kendo grid header?

For anyone attempting to do this with Kendo UI MVC it can be achieved by using the following logic: On the grids DataBound event create a JavaScript function to handle the databound. This will create a tool tip to display on the grids header with the position of the tool tip above the header.

How do you check null values in kendo grid?

$("#eCount"). kendoGrid({ dataSource: { data: myModel, pageSize: 5 }, columns: [ { field: "Count", title: "Count", template: '# if (Count == "null" ) {#1#} else {#Count#}#' }] });

2 Answers

The problem is that there is no model associated with the tooltip; in order to do what you want, you need to create the content using a function:

    autoHide: true,
    showOn: "mouseenter",
    width: 125,
    height: 125,
    position: "right",
    filter: ".k-grid-content a.hasTooltip",
    content: function (e) {
        var row = $(e.target).closest("tr");
        var dataItem = $("#grid").data("kendoGrid").dataItem(row);

        var template = kendo.template($("#storeTerritory").html());
        return template(dataItem);

(updated demo)

like image 88
Lars Höppner Avatar answered Oct 04 '22 22:10

Lars Höppner

 grid = $("#grid").kendoGrid({
      dataSource: dataSource,
      scrollable: true,
      filterable: true,
      toolbar: ["create"],
      columns: [
        { field: "ID", width: "50px" },
        { field: "Text", width: "200px", attributes: {
          style: 'white-space: nowrap '
        }  }],
      editable: "incell"

      filter: "td:nth-child(2)", //this filter selects the second column's cells
      position: "right",
      content: function(e){
        var dataItem = $("#grid").data("kendoGrid").dataItem(e.target.closest("tr"));
        var content = dataItem.Text;
        return content;


like image 31
tom lee Avatar answered Oct 04 '22 23:10

tom lee