Updating Templated Values on Demand

[Frustrated Dev]

Hello,

I have a database with my records. The records in my database stores all date/time values in UTC format. I am displaying these records in a Kendo Grid. I have a checkbox that allows the user to view the records in local time instead of UTC time. My question is, how do I update the time values in my Grid without doing another trip back to my service? I've attached my current code below. Thank you.

<div id="myList"></div>

<input id="toggleTime" value="Toggle Time Format" onclick='toggleTimeFormat();" />

 

<script type="text/javascript">

    var myDataSource = new kendo.data.DataSource({

        type: "json",

        pageSize: 50,

        transport: { read: "/myData/" }

    });

 

    var theGrid = $("#myList").kendoGrid({

      scrollable: { virtual: true },

      dataSource: myDataSource,

      sortable: true,

      height: 250,

      columns: [

        { title: "Person", field: "CustomerName", sortable: true },

        { title: "Order Date", field: "OrderDate", sortable: true, template: '#= kendo.toString(convertToDate(OrderDate), "MM/dd/yyyy hh:mm tt") #' },

        { title: "Ship Date", field: "ShipDate", sortable: true, template: '#= kendo.toString(convertToDate(ShipDate), "MM/dd/yyyy hh:mm tt") #' }

            ]

        });

 

  function convertToDate(s) {

    var dateRegExp = /^\/Date\((.*?)\)\/$/;

    var date = dateRegExp.exec(s);

    return new Date(parseInt(date[1]));

  }

 

  function toggleTimeFormat() {

    // Update date values in the grid here

  }

</script>