JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdn.kendostatic.com/2012.1.229/js/kendo.all.min.js"></script>
<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">
<input id="dropDownList" />
<br />
<div id="grid"></div>

JavaScript

function formatDate(date) {
    switch(flag)
    {
        case 1:
            return kendo.toString(date, "g");
        case 2:
            return kendo.toString(date, "d");
        case 3:
            return kendo.toString(date, "Y");
        default:
            return kendo.toString(date, "F");
    }
}

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",
    dataSource: [
        { text: "Weekly", value: "1" },
        { text: "Monthly", value: "2" },
        { text: "Yearly", value: "3" }
    ],
    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
    ]
});