JSFiddle - React, Tailwind, and code Playground

by siliconsoul

HTML

<script src="http://cdn.kendostatic.com/2014.1.528/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.default.min.css">
<div id="grdRejectAgreement"></div>

JavaScript

var approvers = [ 
    { ApproverId: "1", ApproverLanId: "A3456", ApproverName: "Summers, Scott", Description: ""},
    { ApproverId: "2", ApproverLanId: "A2234", ApproverName: "Fury, Nick", Description: ""},
    { ApproverId: "3", ApproverLanId: "A8976", ApproverName: "Richard, Reed", Description: ""} ];

var approversDataSource = new kendo.data.DataSource({
    data: approvers,
    change: function(e) {
        var data = this.data();
        //alert(data.length); // displays "77"
    },
    sync: function(e) {
        alert("sync complete");
    },

});

$(document).ready(function () {
    
        $("#grdRejectAgreement").kendoGrid({
            dataSource: approversDataSource,
            navigatable: false,
            pageable: false,
            height: 350,
            columns: [
                {
                    command: ["edit", "destroy"],
                    title: "&nbsp;",
                    width: 200
                },
                {
                    field: "ApproverLanId",
                    title: "Approver",
                    editor: userLookupEditor,
                    template: "#=ApproverName#"
                },
                {
                    field: "Description",
                    title: "Desc"
                }
            ],
            editable: "inline"
        });
    
    });

function userLookup(textboxSelectorId, valueSelectorId){
    $('#' + textboxSelectorId).val("Raven, Anna");
    $('#' + valueSelectorId).val("Z7883");
}

function userClear(textboxSelectorId, valueSelectorId){
    $('#' + textboxSelectorId).val("");
    $('#' + valueSelectorId).val("");
}


function userLookupEditor(container, options) {
    var hiddenId = "approverUserId" + options.model.ApproverId;
    var textboxId = "txtApprover" + +options.model.ApproverId;
    $('<input type="hidden" data-bind="value:' + options.field + '" id="' + hiddenId + '" name="' + options.field + '" value="' + options.model.ApproverLanId + '" />'
        +...