KendoUI Grid Sütun Başlıkları Üzerinde Hovertext Ekleme

KendoUI kılavuzundaki sütun başlıklarına özel hovertext (bir araç ipucu gibi) eklemeye çalışıyorum. Metin, her sütuna özel olmalı ve ideal olarak başlık satırındaki hiçbir şeyde gösterilmemelidir. Grid nesnesi için bir araç ipucu seçeneği yoktur, ancak CSS'yi veya row template yapılandırmasını kullanarak bunu yapmanın bir yolu olup olmadığından emin değilim.KendoUI Grid Sütun Başlıkları Üzerinde Hovertext Ekleme

Bunu daha önce kim yaptıysa ve nasıl yapılıyorsa, ya da mümkün değilse, duymak ilginizi çeker.

Teşekkürler.

kaynak

2013-10-28 Bryce Sandlund

Araç ipucunun içeriği statik ise, columns.headerTemplate numarasını kullanarak başlığa tooltip kodunu ekleyebilirsiniz.

Example jsFiddle.

kodu: her Sütunlar başlığındaki ipucu tanımlamak isterseniz

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

kaynak

2013-10-29 00:36:02 CodingWithSpike

Küçük bir geliştirme: filter: ".k-header .k-link span" başlık hücresini daha doğru bir şekilde hedefler. Yanıt olarak, bazen, aralarında gelen araç ipucu nedeniyle, filtre açılır penceresinin görünmemesini sağlar. – yogi

, böyle ızgara thead elemanı üzerinde kendoTooltip tanımlayabilirsiniz:

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

Bu getirdiğinizde vurgulu metni gösterir başlık, yalnızca başlıktaki metinde değil, herhangi bir yerde. Araç ipucu, sütunun en az genişliği olduğunda ve başlığın metni tam boyda gösterilmiyorsa/gösterilmiyorsa veya hiç gösterilmiyorsa da gösterilir. Bakınız example.

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:

Burada gelecekte yeniden gereken durumda jsbin.com örneğin komple kod var

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

kaynak

2014-11-26 22:46:17 mparulski

Linkler ek bilgi olarak yardımcı olabilir, ancak [sadece bağlantıya verilen cevaplar kesinlikle önerilmez] (http://meta.stackoverflow.com/a/8259/228805). Lütfen soruyla ilgili bağlantılı bilgilerin bir özetini ekleyin ve sorunun nasıl çözüleceğini açıklayın. –

Cevabımı – mparulski

Better güncelledim, ancak her zaman jsbin ve jsfiddle gibi sitelerden örnekler çürümesi için gereken eksiksiz kodu sağlamanız gerekir. Kesinlikle sizin yaptığınız gibi, önemli parçayı kendi ayrı bloğunda yayınlayın; daha sonra altta referans için kodun kalanını ekleyin. Bunu senin için ekledim. Ve bunun çalıştığını gösterdiğinden beri +1. –

KendoUI Grid Sütun Başlıkları Üzerinde Hovertext Ekleme

cevap

İlgili konular