JSFiddle - React, Tailwind, and code Playground

by Anna Steglinski

HTML

<script src="http://cdn.kendostatic.com/2013.1.514/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.514/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.514/styles/kendo.metro.min.css">
<script type="text/x-kendo-template" id="someTemplate">
    <select class="form-control categories" data-auto-bind="false" data-value-field="CategoryId" data-text-field="Description" data-bind="source: categories"></select>
</script>
<div class="manage-roles">
  <div data-role="grid"
             data-scrollable="true"
             data-editable="inline"
             data-columns='[
                                { "field" : "JobTitle", "width": 120, "title" : "Job Title Code" },
                                { "field" : "Description" },
                                { "field" : "Category", "template": "${Category}","editor" :kendo.template($("#someTemplate").html()) },
            {"command": "edit"}]'
             data-bind="source: roles"
             style="height: 500px">
        </div>
</div>

JavaScript

var roleViewModel = kendo.observable({
        categories: new kendo.data.DataSource({
            data: [
                { "CategoryId": 1, "Description": "IT" },
                { "CategoryId": 2, "Description": "Billing" },
                { "CategoryId": 3, "Description": "HR" },
                { "CategoryId": 4, "Description": "Sales" },
                { "CategoryId": 5, "Description": "Field" },
                { "CategoryId": 10, "Description": "Stuff" },
                { "CategoryId": 11, "Description": "Unassigned" }
            ]
        }),
        roles: new kendo.data.DataSource({
            data: [
                { "RoleId": 1, "JobTitle": "AADM1", "Description": "Administrative Assistant I", "Category": "Stuff", "CategoryId": 10 },
                { "RoleId": 2, "JobTitle": "AADM2", "Description": "Administrative Assistant II", "Category": null, "CategoryId": 0 },
                { "RoleId": 3, "JobTitle": "ACCIN", "Description": "Accounting Intern", "Category": null, "CategoryId": 0 },
                { "RoleId": 4, "JobTitle": "ACCSU", "Description": "Accounting Supervisor", "Category": null, "CategoryId": 0 }, { "RoleId": 5, "JobTitle": "ACCTC", "Description": "Accountant", "Category": null, "CategoryId": 0 }
            ]
        })
    });
    kendo.bind($(".manage-roles"), roleViewModel);