generateDataRows
Prepares the DataRows for the ChartWizard component based on the provided data and columns.
Example
<div id="grid"></div>
<button id="get">generateDataRows</button>
<div id="chartwizard"></div>
<script>
$("#grid").kendoGrid({
dataSource: {
data: [
{
ID: '1',
Product: 'Calzone',
Quantity: 1,
Price: 12.39,
}, {
ID: '2',
Product: 'Margarita',
Quantity: 2,
Price: 8.79,
}, {
ID: '3',
Product: 'Formaggio',
Quantity: 1,
Price: 13.99,
Tax: 2.8,
Total: 16.79
}, {
ID: '4',
Product: 'Greek Salad',
Quantity: 1,
Price: 9.49,
}, {
ID: '5',
Product: 'Blue Cheese',
Quantity: 3,
Price: 11.49,
}
],
schema: {
model: {
id: "ID"
}
}
},
selectable: {
mode: "multiple, cell",
},
scrollable: true,
columns: [
{
field: "Product",
title: "Product",
width: 300
},
{
field: "Quantity",
width: 300,
title: "Quantity"
},
{
field: "Price",
title: "Price",
}
]
});
$("#chartwizard").kendoChartWizard({
window: {
visible: false
}
});
$("#get").kendoButton({
click: () => {
const grid = $("#grid").data("kendoGrid");
const data = grid.getSelectedData();
const columns = grid.columns;
const wizardData = kendo.ui.ChartWizard.generateDataRows(data, columns);
const chartWizard = $("#chartwizard").data("kendoChartWizard");
chartWizard.setDataSource(wizardData);
chartWizard.open();
}
});
</script>
Parameters
columns Array
The columns containing the data fields.
data Array
The dataItems.