k-grid change display mode

by valchev

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.metro.min.css">
<script src="http://cdn.kendostatic.com/2012.1.322/js/kendo.all.min.js"></script>
<input id="dropDownList" />
<br />
<div id="grid"></div>

JavaScript

function formatDate(date) {
    if(flag) {
        return kendo.toString(date, "d");
    } else {
        return "<img src='http://cdn1.iconfinder.com/data/icons/silk2/tick.png' alt='tick' />"
    }
}

var sampleData = [
    { name: "John", date: new Date("October 13, 2012 11:13:00") },
    { name: "Lisa", date: new Date("March 18, 2012 07:13:00") },
    { name: "Jack", date: new Date("September 28, 2011 12:28:43") }
];

var flag = 1;
    
$("#dropDownList").kendoDropDownList({
    dataTextField: "text",
    dataValueField: "value",
    optionLabel: "Select View",
    dataSource: [
        { text: "Status", value: "0" },
        { text: "Dates", value: "1" }
    ],
    index: 0,
    change: function(e) {
        flag = parseInt(this.value());
        //grid refresh method have to be called in order to apply the template again
        $("#grid").data("kendoGrid").refresh();
    }
});

$("#grid").kendoGrid({
    dataSource: {
        data: sampleData,
        schema: {
            model: {
                fields: {
                    name: { type: "string" },
                    date: { type: "date" }
                }
            }
        }
    },
    columns: [
        { field: "name", title: "Name" },
        { field: "date", title: "Date" , template: "#= formatDate(date) #"} //calls the formatDate functions
    ]
});