Display Spreadsheet Selected Ranges in Tooltips
Environment
| Product | Progress® Kendo UI® Tooltip for jQuery | Progress® Kendo UI® Spreadsheet for jQuery |
Description
How can I show a selected range from a Kendo UI Spreadsheet in a Kendo UI Tooltip?
Solution
- Wrap the Spreadsheet in a Kendo UI Tooltip.
- Use the
k-spreadsheet-selectionclass as afilterin the configuration options of the Tooltip. - Use the
contentoption to provide a function that will create the content for the Tooltip based on the current Spreadsheet selection. - Use the
selection()method of the Spreadsheet to get the current selection (returns a range), and the Rangevalues()method to get the respective values.
The following example demonstrates how to display a selected range from the Spreadsheet in a Kendo UI Tooltip.
<div id="example">
<div id="spreadsheet" style="width: 100%"></div>
<script>
$(function() {
var crudServiceBaseUrl = "https://demos.telerik.com/kendo-ui/service";
var dataSource = new kendo.data.DataSource({
transport: {
read: onRead
},
batch: true,
schema: {
model: {
id: "ProductID",
fields: {
ProductID: { type: "number" },
ProductName: { type: "string" },
UnitPrice: { type: "number" },
Discontinued: { type: "boolean" },
UnitsInStock: { type: "number" }
}
}
}
});
$("#spreadsheet").kendoSpreadsheet({
columns: 20,
rows: 100,
toolbar: false,
sheetsbar: false,
sheets: [{
name: "Products",
dataSource: dataSource,
rows: [{
height: 40,
cells: [
{
bold: "true",
background: "#9c27b0",
textAlign: "center",
color: "white"
},{
bold: "true",
background: "#9c27b0",
textAlign: "center",
color: "white"
},{
bold: "true",
background: "#9c27b0",
textAlign: "center",
color: "white"
},{
bold: "true",
background: "#9c27b0",
textAlign: "center",
color: "white"
},{
bold: "true",
background: "#9c27b0",
textAlign: "center",
color: "white"
}]
}],
columns: [
{ width: 100 },
{ width: 415 },
{ width: 145 },
{ width: 145 },
{ width: 145 }
]
}]
});
function onRead(options) {
$.ajax({
url: crudServiceBaseUrl + "/Products",
dataType: "jsonp",
success: function (result) {
options.success(result);
},
error: function (result) {
options.error(result);
}
});
}
var tooltip = $("#spreadsheet").kendoTooltip({
filter: 'div.k-spreadsheet-selection',
width: 380,
content: function(e){
var spreadsheet = $("#spreadsheet").data('kendoSpreadsheet')
var selectedValues = spreadsheet.activeSheet().selection().values();
var result = '<table class="tooltip-result"><thead>Selection:</thead>';
selectedValues.forEach(function(item){
result += '<tr>'
item.forEach(function(subItem){
result += ('<td>' + subItem + '</td>');
})
result += '</tr>'
});
result += '</table>';
return result;
},
show: function(e){
e.sender.refresh();
}
}).data("kendoTooltip");
});
</script>
</div>