Tooltip and popup
by tomwilliams
HTML
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.903/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.903/styles/kendo.default.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.903/js/kendo.all.min.js"></script>
<br/>
<br/>
<br/>
Hello World
<div id="grid"></div>
<br/>
<div id="grid2"></div>
JavaScript
var datajson = [{ "Component": "Nearside\/Sliding Door", "AmountForInvoice": 142.30, "InvoiceRole": "LEASE COMPANY", "Damage": "Lots", "RepairMethod": "Hammer", "ID": 3378592 },
{ "Component": "Nearside\/bonnet", "AmountForInvoice": 55.30, "InvoiceRole": "LEASE COMPANY", "Damage": "Lots", "RepairMethod": "Hammer", "ID": 1023 },
{ "Component": "Nearside\/bonnet", "AmountForInvoice": 55.30, "InvoiceRole": "FIXED", "Damage": "Lots", "RepairMethod": "Hammer", "ID": 2032 }]
var EstimatesdDS = new kendo.data.DataSource({
data: datajson,
schema: {
modal: {
fields: {
InvoiceRole: { type: "string" },
AmountForInvoice: { type: "number" },
Component: { type: "string" },
Damage: { type: "string" },
RepairMethod: { type: "string" },
ID: { type: "number" }
}
}
}
,
group: {
field: "InvoiceRole", aggregates: [{ field: "Component", aggregate: "count" },
{ field: "AmountForInvoice", aggregate: "sum" }
]
},
aggregate: [
{ field: "Component", aggregate: "count" },
{ field: "AmountForInvoice", aggregate: "sum" }
]
});
gridVA = $("#grid").kendoGrid({
dataSource: EstimatesdDS,
columns: [
{ field: "InvoiceRole", title: "Invoice Role", width: "170px", groupHeaderTemplate: "<button data-invrole='#= value #' class='mySelAllButton k-button'>All</button>" },
{ field: "Component", title: "Estimate...