Kendo UI Q1 2015

Scroll to bottom of Kendo grid demo

by Chris Ward

HTML

<script src="https://da7xgjtj801h2.cloudfront.net/2015.1.318/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="https://da7xgjtj801h2.cloudfront.net/2015.1.318/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://da7xgjtj801h2.cloudfront.net/2015.1.318/styles/kendo.fiori.min.css">
<div id="grid"></div>

CSS

body {
    font-family: arial, sans-serif;
}

JavaScript

$(document).ready(function () {

    $(document).ready(function () {

        $("#grid").kendoGrid({
            dataSource: {
                data: [{
                    ProductName: "Product A",
                    Category1: "1",
                    Category2: "X",
                    Amount: 123
                }, {
                    ProductName: "Product B",
                    Category1: "2",
                    Category2: "X",
                    Amount: 456
                }, {
                    ProductName: "Product C",
                    Category1: "2",
                    Category2: "Y",
                    Amount: 789
                }],
                schema: {
                    model: {
                        fields: {
                            ProductName: {
                                type: "string"
                            },
                            Category1: {
                                type: "string"
                            },
                            Category2: {
                                type: "string"
                            },
                            amount: {
                                type: "number"
                            }
                        }
                    }
                },
                aggregate: [{
                    field: "Amount",
                    aggregate: "sum"
                }],
                group: {
                    field: "Category1",
                    aggregates: [{
                        field: "Amount",
                        aggregate: "sum"
                    }]
                },
            },

            groupable: true,

            columns: [{
                field: "ProductName"
            }, {
                field: "Category1"
            }, {
                field: "Category2"
            }, {
                field: "Amount",
                aggregate: ["sum"],
                footerTemplate: "Sum: #=sum#",
           ...