2013-10-28 18 views
7

Ich versuche, benutzerdefinierte Hovertext (wie eine QuickInfo) zu den Spaltenüberschriften in einem KendoUI-Gitter hinzufügen. Der Text sollte für jede Spalte spezifisch sein und im Idealfall nur in der Kopfzeile angezeigt werden. Es gibt keine Tooltip-Option für das Grid-Objekt, aber ich bin mir nicht sicher, ob es eine Möglichkeit gibt, dies entweder über CSS oder ihre row template-Konfiguration zu tun.Hinzufügen von Hovertext auf KendoUI Grid Spaltenüberschriften

Wäre interessiert zu hören, wenn jemand dies bereits getan hat und wenn ja wie, oder wenn es nicht möglich ist.

Danke.

Antwort

6

Wenn der Inhalt der QuickInfo statisch ist, können Sie columns.headerTemplate verwenden, um dann eine tooltip zur Kopfzeile hinzuzufügen.

Example jsFiddle.

Der Code:

$("#grid").kendoGrid({ 
    dataSource: { 
     type: "odata", 
     transport: { 
      read: "http://demos.kendoui.com/service/Northwind.svc/Orders" 
     }, 
     schema: { 
      model: { 
       fields: { 
        OrderID: { 
         type: "number" 
        }, 
        Freight: { 
         type: "number" 
        }, 
        ShipName: { 
         type: "string" 
        }, 
        OrderDate: { 
         type: "date" 
        }, 
        ShipCity: { 
         type: "string" 
        } 
       } 
      } 
     }, 
     pageSize: 20, 
     serverPaging: true, 
     serverFiltering: true, 
     serverSorting: true 
    }, 
    height: 430, 
    filterable: true, 
    sortable: true, 
    pageable: true, 
    columns: [{ 
     field: "OrderID", 
     filterable: false 
    }, 
     "Freight", { 
     field: "OrderDate", 
     title: "Order Date", 
     width: 120, 
     format: "{0:MM/dd/yyyy}", 
     headerTemplate: '<span title="This is the date the order was made.">Order Date</span>' 
    }, { 
     field: "ShipName", 
     title: "Ship Name", 
     width: 260, 
     headerTemplate: '<span title="The company the order was shipped to.">Ship Name</span>' 
    }, { 
     field: "ShipCity", 
     title: "Ship City", 
     width: 150, 
     headerTemplate: '<span title="The city the order was shipped to.">Ship City</span>' 
    }] 
}); 

$("#grid").kendoTooltip({ 
    filter: ".k-header span" 
}); 
+0

eine kleine Verbesserung: Filter: ". K-Header. K-Link-Bereich" zielt auf die Header-Zelle genauer. Die Antwort in der Antwort macht das Filter-Popup manchmal nicht sichtbar, weil der Tooltip dazwischen kommt. – yogi

3

Wenn Sie Tooltip auf jedem columnn Header definieren möchten, können Sie kendoTooltip auf Raster Thead Element wie folgt definieren:

grid.thead.kendoTooltip({ 
    filter: "th", 
    content: function (e) { 
     var target = e.target; 
     return $(target).text(); 
    } 
}); 

Dies zeigt Hover Text, wenn Sie schweben den Header überall, nicht nur auf Text in der Kopfzeile. Der Tooltip wird auch dann angezeigt, wenn die Spalte eine minimale Breite hat und der Text des Headers nicht in voller Länge angezeigt wird oder überhaupt nicht angezeigt wird. Siehe example.


Hier ist der komplette Code aus dem Beispiel bei jsbin.com, falls es muss in der Zukunft wiedergegeben werden:

HTML: *

<!DOCTYPE html> 
<html> 
<head> 
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.common.min.css" rel="stylesheet" type="text/css" /> 
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.default.min.css" rel="stylesheet" type="text/css" /> 
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" /> 
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" /> 
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
<script src="http://cdn.kendostatic.com/2013.1.319/js/kendo.all.min.js"></script> 
<meta charset=utf-8 /> 
<title>JS Bin</title> 
</head> 
<body> 
<div id="grid"></div> 
</body> 
</html> 

JavaScript:

var grid = $("#grid").kendoGrid({ 
    dataSource: { 
     type: "odata", 
     transport: { 
      read: "http://demos.kendoui.com/service/Northwind.svc/Orders" 
     }, 
     schema: { 
      model: { 
       fields: { 
        OrderID: { 
         type: "number" 
        }, 
        Freight: { 
         type: "number" 
        }, 
        ShipName: { 
         type: "string" 
        }, 
        OrderDate: { 
         type: "date" 
        }, 
        ShipCity: { 
         type: "string" 
        } 
       } 
      } 
     }, 
     pageSize: 20, 
     serverPaging: true 
    }, 
    height: 430, 

    columns: [{ 
      field: "OrderID", 
      width: 250 
     }, { 
      field: "ShipName", 
      title: "Ship Name", 
      width: 200 

     } 
    ] 
}).data("kendoGrid"); 

grid.thead.kendoTooltip({ 
    filter: "th", 
    content: function (e) { 
     var target = e.target; // element for which the tooltip is shown 
     return $(target).text(); 
    } 
}); 
+1

Links können als ergänzende Informationen hilfreich sein, aber [nur Link-Antworten werden dringend empfohlen] (http://meta.stackoverflow.com/a/8259/228805). Fügen Sie eine Zusammenfassung der verknüpften Informationen ein, die für die Frage relevant sind, und erläutern Sie, wie das Problem behoben wird. –

+0

Ich habe meine Antwort aktualisiert – mparulski

+0

Besser, aber Sie sollten immer den vollständigen Code zur Verfügung stellen, um Beispiele von Websites wie jsbin und jsfiddle zu reproduzieren, im Falle von Link rot. Schreiben Sie den signifikanten Teil auf jeden Fall in einen eigenen Block, wie Sie es getan haben; Fügen Sie dann den Rest des Codes als Referenz unten hinzu. Ich habe es für dich hinzugefügt. Und +1, seit du gezeigt hast, dass das funktioniert. –

Verwandte Themen