Updating Templated Values on Demand

1 posts, 0 answers
  1. Frustrated Dev
    Frustrated Dev avatar
    35 posts
    Member since:
    Oct 2006

    Posted 08 Mar 2012 Link to this post

    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>
Back to Top