@{
    ViewBag.Title = "Hello Razor";
}

<div id="grid"></div>

<script>
    $(document).ready(function () {
        var baseUrl = "@Url.Content("~/api/heartbeat/")";

        $("#grid").kendoGrid({
            dataSource: {
                transport: {
                    read: { url: baseUrl, type: "GET" }
                },
                serverPaging: false,
                serverSorting: false,
                batch: false,
                schema: {
                    model: {
                        id: "username",
                        fields: {
                            username: { type: "string" },
                            time: { type: "date" },
                            value: {type: "number" }
                        }
                    }
                }
            },
            scrollable: true,
            sortable: true,
            filterable: true,
            editable: false,
            columns: [
                { field: "username", title: "Username" },
                { field: "time", title: "Date/Time", format: "{0:dd/MM/yyyy HH:mm}" },
                { field: "value", title: "Heartbeats" }
            ]
        });
    })

</script>