How To Display Selected Ranges from Spreadsheet in Tooltips
Environment
Product | Progress® Kendo UI® Spreadsheet for jQuery | Progress® Kendo UI® Tooltip for jQuery |
Description
How can I get the data of the selected range in the Spreadsheet and display it in Kendo UI for jQuery Tooltip?
Solution
- Use the Tooltip
filter
configuration option to display the Tooltip only over the selected range. - In the
content
function of the Tooltip get the values of the selected cells using theRange values()
method. - Use the returned array with values to format the content of the Tooltip and return it as a content result.
<style>
.k-tooltip-content{
width: 300px;
}
</style>
<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
},
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 }
]
}]
});
$("#spreadsheet").kendoTooltip({
filter: 'div.k-spreadsheet-selection',
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();
}
});
function onRead(options) {
$.ajax({
url: crudServiceBaseUrl + "/Products",
dataType: "jsonp",
success: function (result) {
options.success(result);
},
error: function (result) {
options.error(result);
}
});
}
});
</script>