<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>