JSFiddle - React, Tailwind, and code Playground

by valchev

HTML

<script src="http://cdn.kendostatic.com/2012.2.913/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.913/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.913/styles/kendo.silverblue.min.css">
<div id="taskView">
    <div id="SelfAssignPopup">
        <br />
        <span class="popupLabels">Would you like to Assign this task to yourself? </span>
        <br />
        <br />
        <div style="text-align: center">
            <button data-bind="click: AssignTask">
                Yes</button>
            <button data-bind="click: CancelAssignTask">
                Cancel</button>
        </div>
        <br />
    </div>        
    <div id="grdTask">
        <table id="tasks" width="100%">
            <thead>
                <tr>
                    <th>
                        Task ID
                    </th>
                    <th>
                        Assigned To
                    </th>
                    <th>
                        Status
                    </th>
                    <th>
                        Created
                    </th>
                </tr>
            </thead>
            <tbody data-role="listview" data-template="tmpTask" data-bind="source: taskSource">
            </tbody>
        </table>
    </div>
<script id="tmpTask" type="text/x-kendo-template">
    <tr class="task">
            <td>
                ${TaskID}
            </td>
            <td>
                # if (AssignedTo != null){#
                    ${AssignedTo}
                #} else {#
                    <button data-bind="click: AssignTaskDialog2" taskID='${TaskID}'>UnAssigned</button>
                #}#
            </td>
            <td>
                ${Status}
            </td>
            <td>
                ${DateCreated}
            </td>
        </tr>
        <tr class="discrepancy">
            #var discrepancy = ShortDiscrepancy;
            discrepancy...

CSS

.task td
            {
                background-color: White;
                color: Black;
            }
            .discrepancy td
            {
                border-bottom-style: solid;
                border-bottom-width: 1px;
                border-bottom-color: #000000;
                background-color: #E6E6E6;
                padding-top: 5px;
                padding-bottom: 5px;
                padding-left: 10px;
                color: Black;
            }

JavaScript

$(document).ready(function () {
    BindViewModel();
});

function BindViewModel(){
    var taskModel = kendo.observable({
        aircraft: "",
        taskSource: [{ "AC": "111", "AID": 2222222, "AssignedTo": null, "CreatedBy": "SYSTEM", "CreatedByName": null, "DateCreated": "/Date(1346646300000-0600)/", "Discrepancy": "AAA 44-4444-C: AAAAAAA BBBBB CCC DDDDDDDDDD EEE.1......<BR>(Unique ID: 6666666)", "ShortDiscrepancy": "AAA 44-4444-C: AAAAAAA BBBBB CCC DDDDDDDDDD EEE.1......<BR>(Unique ID: 6666666)", "Station": "TTT", "Status": "NEW", "TaskID": 1219331 },
                         { "AC": "111", "AID": 2222222, "AssignedTo": null, "CreatedBy": "SYSTEM", "CreatedByName": null, "DateCreated": "/Date(1346646300000-0600)/", "Discrepancy": "AAA 55-5555-C: AAAA *BBBBBB* CCCCC....................<BR>(Unique ID: 7777777)", "ShortDiscrepancy": "AAA 55-5555-C: AAAA *BBBBBB* CCCCC....................<BR>(Unique ID: 7777777)", "Station": "TTT", "Status": "NEW", "TaskID": 1219332 },
                         { "AC": "111", "AID": 2222222, "AssignedTo": null, "CreatedBy": "SYSTEM", "CreatedByName": null, "DateCreated": "/Date(1346648700000-0600)/", "Discrepancy": "Critical Flight (1468/03)", "ShortDiscrepancy": "Critical Flight (1468/03)", "Station": "TTT", "Status": "CANCELLED", "TaskID": 1219335 },
                         { "AC": "111", "AID": 2222222, "AssignedTo": null, "CreatedBy": "333333", "CreatedByName": "Mickey Mouse", "DateCreated": "/Date(1347667410000-0600)/", "Discrepancy": "Testing", "ShortDiscrepancy": "Testing", "Station": "TTT", "Status": "NEW", "TaskID": 1221764 },
                         { "AC": "111", "AID": 2222222, "AssignedTo": null, "CreatedBy": "333333", "CreatedByName": "Mickey Mouse", "DateCreated": "/Date(1347667624000-0600)/", "Discrepancy": "Testing", "ShortDiscrepancy": "Testing", "Station": "TTT", "Status": "NEW", "TaskID": 1221765 },
                         { "AC": "111", "AID": 2222222, "AssignedTo": null, "CreatedBy": "333333",...