Initialize Multiple Instances of Kendo UI Widgets
Environment
| Product | Progress® Kendo UI® Grid for jQuery |
| Product Version | 2018.2.516 |
Description
My application uses a Kendo UI Chart that is named zScoreChart.
How can I:
- Create a copy of the first Chart instance without having to create another
$('#zScoreChart2').kendoChart({...})? - Avoid copying and pasting the Chart settings, and adding repetitive lines of code?
Solution
Use the Contains jQuery selector together with IDs that share a sub-string.
<div>
<div id="chart1"></div>
<div id="chart2"></div>
<div id="chart3"></div>
</div>
<script>
$("div[id*=chart]").kendoChart({
...
});
</script>
The following example demonstrates the full implementation of the suggested approach.
<div class="demo-section k-content wide">
<div id="chart1"></div>
<div id="chart2"></div>
<div id="chart3"></div>
</div>
<script>
function createChart() {
// Use the Contains jQuery selector to get the three different div elements.
$("div[id*=chart]").kendoChart({
title: {
text: "Site Visitors Stats \n /thousands/"
},
legend: {
visible: false
},
seriesDefaults: {
type: "bar"
},
series: [{
name: "Total Visits",
data: [56000, 63000, 74000, 91000, 117000, 138000]
}, {
name: "Unique visitors",
data: [52000, 34000, 23000, 48000, 67000, 83000]
}],
valueAxis: {
max: 140000,
line: {
visible: false
},
minorGridLines: {
visible: true
},
labels: {
rotation: "auto"
}
},
categoryAxis: {
categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
majorGridLines: {
visible: false
}
},
tooltip: {
visible: true,
template: "#= series.name #: #= value #"
}
});
}
$(document).ready(createChart);
$(document).bind("kendo:skinChange", createChart);
</script>