Dodawanie Hvertext na nagłówkach kolumn tabeli KendoUI

Próbuję dodać niestandardowy hvertext (jak etykieta narzędzia) do nagłówków kolumn w siatce KendoUI. Tekst powinien być specyficzny dla każdej kolumny i najlepiej nie wyświetlać się na czymkolwiek poza wierszem nagłówka. Nie ma opcji tooltip dla obiektu Grid, ale nie jestem pewien, czy istnieje sposób, aby to zrobić, używając CSS lub konfiguracji row template.Dodawanie Hvertext na nagłówkach kolumn tabeli KendoUI

Byłby zainteresowany wysłuchaniem, czy ktoś zrobił to wcześniej, a jeśli tak, to w jaki sposób lub może nie być to możliwe.

Dzięki.

Źródło

2013-10-28 Bryce Sandlund

Jeśli treść etykiety narzędziowej jest statyczna, można użyć columns.headerTemplate, aby następnie dodać tooltip do nagłówka.

Example jsFiddle.

Kod:

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

Źródło

2013-10-29 00:36:02 CodingWithSpike

małe ulepszenie: filtr: ".k-nagłówek .k-link span" celniej celuje w komórkę nagłówka. Ten, który odpowiada, powoduje, że okienko popup nie pojawia się czasami z powodu pojawienia się podpowiedzi. – yogi

Jeśli chcesz określić podpowiedź na każdym columnn nagłówku można określić kendoTooltip na siatce elementu thead tak:

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

To pokazuje tekst unosić po najechaniu nagłówek w dowolnym miejscu, nie tylko w nagłówku. Etykieta narzędzia jest wyświetlana nawet wtedy, gdy kolumna ma minimalną szerokość, a tekst nagłówka nie jest prezentowany/pokazany na całej jego długości lub w ogóle nie jest wyświetlany. Zobacz example.

Oto kompletny kod z przykładu na jsbin.com w przypadku, musi być powtórzone w przyszłości:

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

Źródło

2014-11-26 22:46:17 mparulski

Łącza mogą być przydatne jako informacje uzupełniające, ale [odradzane są tylko linki] (http://meta.stackoverflow.com/a/8259/228805). Podaj podsumowanie powiązanych informacji, które są istotne dla pytania, i wyjaśnij, w jaki sposób rozwiązuje problem. –

Zaktualizowałem swoją odpowiedź – mparulski

Lepiej, ale powinieneś zawsze podać pełny kod potrzebny do odtworzenia przykładów z witryn takich jak jsbin i jsfiddle, w przypadku zgnilizny linków. Zdecydowanie umieść znaczącą część w osobnym bloku, tak jak to zrobiłeś; następnie dodaj resztę kodu dla odniesienia na dole. Dodałem to dla ciebie. I +1, odkąd pokazałeś, że to działa. –

Dodawanie Hvertext na nagłówkach kolumn tabeli KendoUI

Odpowiedz

Powiązane problemy