<apex:page controller=”KendoUIDemoCtrl” sidebar=”false”>
<apex:includeScript value=”{!URLFOR($Resource.queryfiles, ‘js/jquery.min.js’)}”/>
<apex:includeScript value=”{!URLFOR($Resource.KendoLib, ‘js/kendo.web.min.js’)}”/>
<apex:stylesheet value=”{!URLFOR($Resource.KendoLib, ‘styles/kendo.common.min.css’)}”/>
<apex:stylesheet value=”{!URLFOR($Resource.KendoLib, ‘styles/kendo.default.min.css’)}”/>
<div id=”example”>
<div id=”grid” style=”height: 380px”></div>
<script>
$(document).ready(function () {
var ds = new kendo.data.DataSource({
transport: {
read: function (options) {
// make AJAX request to the remote service
Visualforce.remoting.Manager.invokeAction(
“{!$RemoteAction.KendoUIDemoCtrl.getAccountJson}”, function (result, event) {
if (event.type == ‘exception’) {
alert(event.message);
} else {
options.success(result);
} // End else
});
}
},
schema: {
model: {
fields: {
Name: { type: “string” },
BillingCity: { type: “string” },
CreatedDate: { type: “long” }
}
}
},
group: { field: “Name”, aggregates: [ { field: “Name”, aggregate: “count” }] }
});
$(“#grid”).kendoGrid({
columns: [
{field: “Name”, groupHeaderTemplate: “Name: #= value # total: #= count #”},
“BillingCity”, {field:”CreatedDate”,title:”CTDATE”,format: “{0:MM/dd/yyyy}”}],
//columnMenu: true,
dataSource: ds,
groupable: true,
resizable: true,
sortable: true,
scrollable: true,
filterable: true,
});
});
</script>
</div>
</apex:page>