Aggiunta di Hovertext su intestazioni di colonne di griglia KendoUI

Sto tentando di aggiungere un hovertext personalizzato (come un suggerimento) alle intestazioni di colonna in una griglia KendoUI. Il testo dovrebbe essere specifico per ogni colonna e idealmente non viene visualizzato su nulla tranne la riga di intestazione. Non esiste un'opzione di suggerimento per l'oggetto Grid, ma non sono sicuro che ci sia un modo per farlo usando i CSS o la loro configurazione row template.Aggiunta di Hovertext su intestazioni di colonne di griglia KendoUI

Sarebbe interessato a sentire se qualcuno ha fatto prima e se sì come, o se potrebbe non essere possibile.

Grazie.

fonte

2013-10-28 Bryce Sandlund

Se il contenuto del suggerimento è statico, è possibile utilizzare columns.headerTemplate per aggiungere un tooltip all'intestazione.

Example jsFiddle.

Il codice:

$("#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" 
});

fonte

2013-10-29 00:36:02 CodingWithSpike

un piccolo miglioramento: filtro: ".k-header .k-link span" punta più precisamente alla cella dell'intestazione. Quello in risposta rende il popup del filtro non visibile a volte a causa del tooltip che si frappone. – yogi

Se si desidera definire tooltip su ogni intestazione columnn, è possibile definire kendoTooltip sulla griglia di elementi thead come questo:

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

Questo dimostra il testo hover quando si passa l'intestazione ovunque, non solo sul testo nell'intestazione. Il suggerimento è mostrato anche quando la colonna ha una larghezza minima e il testo dell'intestazione non viene presentato/mostrato nella sua intera lunghezza o non viene mostrato affatto. Vedi example.

Ecco il codice completo dell'esempio a jsbin.com, nel caso in cui esso deve essere riprodotto in futuro:

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(); 
    } 
});

fonte

2014-11-26 22:46:17 mparulski

I collegamenti possono essere utili come informazioni supplementari, ma [le risposte solo per collegamento sono fortemente sconsigliate] (http://meta.stackoverflow.com/a/8259/228805). Includi un riepilogo delle informazioni collegate pertinenti alla domanda e spiega come risolve il problema. –

Ho aggiornato la mia risposta – mparulski

Meglio, ma dovresti sempre fornire il codice completo necessario per riprodurre esempi da siti come jsbin e jsfiddle, in caso di link rot. Sicuramente postare la parte significativa nel proprio blocco separato, come hai fatto tu; quindi aggiungi il resto del codice come riferimento in basso. L'ho aggiunto per te. E +1 da quando hai dimostrato che funziona. –

Aggiunta di Hovertext su intestazioni di colonne di griglia KendoUI

risposta

Problemi correlati