Display Selected Ranges in Tooltips
Your AngularJS project might require you to show a selected range from a Kendo UI Spreadsheet in a Kendo UI Tooltip.
To achieve this behavior:
- Wrap the Spreadsheet in a Kendo UI Tooltip.
- Use the k-spreadsheet-selection class as a
filterin 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 when working in AngularJS applications.
<div id="example" ng-app="KendoDemos">
<div ng-controller="MyCtrl">
<kendo-tooltip k-options="ttOptions">
<kendo-spreadsheet k-scope-field="spreadsheet" options="ssOptions"></kendo-spreadsheet>
</kendo-tooltip>
</div>
</div>
<style>
.tooltip-result, .tooltip-result td {
border-collapse: collapse;
border: 1px solid white;
white-space: nowrap;
}
</style>
<script>
var crudServiceBaseUrl = "//demos.telerik.com/kendo-ui/service";
angular.module("KendoDemos", [ "kendo.directives" ])
.controller("MyCtrl", function($scope){
$scope.ttOptions = {
filter: 'div.k-spreadsheet-selection',
content: function(e){
var selectedValues = $scope.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();
}
};
$scope.ssOptions = {
columns: 20,
rows: 100,
toolbar: false,
sheetsbar: false,
sheets: [{
name: "Products",
dataSource: {
transport: {
read: {
url: crudServiceBaseUrl + "/Products",
dataType: "jsonp"
},
update: {
url: crudServiceBaseUrl + "/Products/Update",
dataType: "jsonp"
},
destroy: {
url: crudServiceBaseUrl + "/Products/Destroy",
dataType: "jsonp"
},
create: {
url: crudServiceBaseUrl + "/Products/Create",
dataType: "jsonp"
}
},
batch: true,
schema: {
model: {
id: "ProductID",
fields: {
ProductID: { type: "number" },
ProductName: { type: "string" },
UnitPrice: { type: "number" },
Discontinued: { type: "boolean" },
UnitsInStock: { type: "number" }
}
}
}
},
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 }
]
}]
};
})
</script>