or
I currently have a 2 pane splitter ... the second pane has a relative reference to an html snippet for the contents of the 2nd pane.
var Data = [
{ "Name": "Marks S.", "FavoriteColor": “Red”},
{ "Name": "Hanna M.", "FavoriteColor ": “Blue” },
{ "Name": "Brad A.", "FavoriteColor ": “Blue” }
];
categoryField : FavoriteColor
field: count (aggregate)
<div id="example" class="k-content"><br>
<div class="chart-wrapper">
<div id="chart">
</div>
</div> <script>
var Data = [{ "Name": "Marks S.", "FavoriteColor": "Red"},
{ "Name": "Hanna M.", "FavoriteColor": "Blue"}, { "Name": "Brad A.", "FavoriteColor": "Blue"}];
function createChart() {
$("#chart").kendoChart({
theme: $(document).data("kendoSkin") || "default",
title: {text: "Aggregate Example"},
legend: {position: "bottom"},
dataSource: {data: Data,
aggregate: [{ field: "FavoriteColor", aggregate: "count"}],
group: { field: "FavoriteColor" }
},
series: [{ type: "pie",
field: "#= count#",
categoryField: "FavoriteColor"}],
tooltip: {visible: true,
template: "${ category } - #= value#"}});
}
$(document).ready(function () {
setTimeout(function () {
createChart();
$("#example").bind("kendo:skinChange", function (e) {
createChart();
}); }, 100);
});
</script>
</div>
var projectsDataSource = new kendo.data.DataSource({ transport: { read: { url: "/ProjectsDataUrl"; dataType: "json" } }})function projectsEditor(container, options) { if (options.model.ClientId !== null) { projectsDataSource.transport.options.read.data = { clientId: options.model.ClientId }; projectsDataSource.read(); return ($("<input name='ProjectId' data-bind='value:" + options.field + "' />")).appendTo(container).kendoDropDownList({ dataSource: projectsDataSource, autoBind: false, dataTextField: "Name", dataValueField: "Id", optionLabel: "Select Project" }).data("kendoDropDownList"); }};