Implement Cascading Cell Editors in the Spreadsheet
Environment
| Product | Progress® Kendo UI® Spreadsheet for jQuery |
Description
How can I implement cascading cell editors in the Kendo UI for jQuery Spreadsheet?
Solution
To achieve the desired scenario, refer to the following implementation:
<div id="example">
<div id="spreadsheet" style="width: 100%;"></div>
<script>
$(function() {
var listOptions = {
Entree: ['Pizza', 'Calzone'],
Side: ['Salad', 'Breadsticks'],
};
$("#spreadsheet").kendoSpreadsheet({
change:function(e){
var sheet = e.sender.activeSheet();
var rangeValue = e.range.value();
if(rangeValue === "Side "){
var rangeToChange = sheet.range("B2");
rangeToChange.validation({
dataType: "list",
showButton: true,
comparerType: "list",
from: JSON.stringify(listOptions.Side).replace('[', '{').replace(']', '}'),
allowNulls: true,
type: "reject"
})
rangeToChange.value(listOptions.Side[0]);
} else if(rangeValue === " Entree"){
var rangeToChange = sheet.range("B2");
rangeToChange.validation({
dataType: "list",
showButton: true,
comparerType: "list",
from: JSON.stringify(listOptions.Entree).replace('[', '{').replace(']', '}'),
allowNulls: true,
type: "reject"
})
rangeToChange.value(listOptions.Entree[0]);
}
},
sheets: [
{
name: "Food Order",
rows: [
{
height: 25,
cells: [
{
value: "Product Type", background: "rgb(167,214,255)", textAlign: "center", color: "rgb(0,62,117)"
},
{
value: "Product", background: "rgb(167,214,255)", textAlign: "center", color: "rgb(0,62,117)"
},
]
},
{
cells: [
{
value: "Entree", background: "rgb(255,255,255)", color: "rgb(0,62,117)",
validation: {
dataType: "list",
showButton: true,
comparerType: "list",
from: '{ "Entree", "Side" }',
allowNulls: true,
type: "reject"
}
},
{
value: "Calzone", background: "rgb(255,255,255)", color: "rgb(0,62,117)",
validation: {
dataType: "list",
showButton: true,
comparerType: "list",
from: JSON.stringify(listOptions.Entree).replace('[', '{').replace(']', '}'),
allowNulls: true,
type: "reject"
}
},
]
},
],
columns: [
{
width: 215
},
{
width: 215
},
]
}
]
});
});
</script>
</div>