JSFiddle - React, Tailwind, and code Playground

by billmcknight

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.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.default.min.css">
<script type="text/x-kendo-tmpl" id="myTemplate">
    <table data-role="grid" >
        <thead>
            <tr>
                <th>
                    Opening/Closing Times
                </th>
            </tr>
        </thead>
        <tr>
            <td>
                <input class="time k-input" data-role="timepicker" data-bind="value: OpeningTime" />                
                <input class="time k-input" data-role="timepicker" data-bind="value: ClosingTime" />
            </td>
        </tr> 
    </table>        
</script>

<div id="myDiv">     
    <div data-template="myTemplate" data-role="listview" data-bind="source: TimeDataSource" ></div>
</div>

JavaScript

var myData = [{"OpeningTime":"07:00 AM","ClosingTime":"06:00 PM"},{"OpeningTime":"08:00 AM","ClosingTime": "07:00 PM"}];

var viewModel = kendo.observable({
    TimeDataSource: new kendo.data.DataSource({
        data: myData,
        schema: {
            model: {
                fields: {
                    OpeningTime: { type: "string" },
                    ClosingTime: { type: "string" }
                }
            }
        }
    })                
});

// Bind the View to the View-Model
kendo.bind($('#myDiv'), viewModel);