KendoUI Grid Column Formatting

HTML

<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.blueopal.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.common.min.css">
<div id="testGrid"></div>
<br />
<input id="bindToDataSource" type="button" value="Bind to Data Source" />
<br /><br />
<input id="bindToGridData" type="button" value="Bind to Grid Data" />

JavaScript

var data_1 = [{
    "id": 1,
    "FirstName": "James",
    "LastName": "Bond",
    "DOB": "1999-05-03T00:00:00"}];

var data_2 = [{
    "id": 2,
    "FirstName": "Han",
    "LastName": "Solo",
    "DOB": "2003-12-01T00:18:00"}];

var data_3 = [{
    "id": 3,
    "FirstName": "Indiana",
    "LastName": "Jones",
    "DOB": "1989-01-12T00:18:00"}];

var columnDefinitions = [
    {
    field: "id",
    title: "Id"},
{
    field: "FirstName",
    title: "First Name"},
{
    field: "LastName",
    title: "Last Name"},
{
    field: "DOB",
    title: "DOB",
    template: "#= kendo.toString(DOB,'MM/dd/yyyy HH:mm') #"}
];

var modelFields = {
    id: {
        type: "number"
    },
    FirstName: {
        type: "string"
    },
    LastName: {
        type: "string"
    },
    DOB: {
        type: "date"
    }
};

var testGridDataSource = new kendo.data.DataSource({
    data: data_1,
    schema: {
        model: {
            fields: modelFields
        }
    }
});

$("#testGrid").kendoGrid({
    dataSource: testGridDataSource,
    columns: columnDefinitions
});


$(document).ready(function() {
    $("#bindToDataSource").on("click", function() {
        testGridDataSource.data(testGridDataSource.reader.data(data_2));
    });
    
    $("#bindToGridData").on("click", function() {
        $("#testGrid").data("kendoGrid").dataSource.data(testGridDataSource.reader.data(data_3));
    });
});