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 areas = [ 
        { Id: "1", Name: "General"},
        { Id: "2", Name: "Support"},
        { Id: "3", Name: "Approvers"} ];

    var areasDataSource = new kendo.data.DataSource({
        data: areas
    });

$(document).ready(function () {
    

        $("#grdRejectAgreement").kendoGrid({
            dataSource: null,
            navigatable: false,
            pageable: false,
            height: 350,
            toolbar: ["create", "save", "cancel"],
            columns: [
                {
                    field: "AgreementSectionId",
                    title: "Agreement Area",
                    width: 200,
                    editor: agreementSectionDropDownEditor
                },
                {
                    field: "Description",
                    title: "Requested Changes",
                    width: 400,
                    editor: requestedChangesTextAreaEditor
                }],
            editable: "incell"
        });
    
        

    });

function agreementSectionDropDownEditor(container, options) {
        $('<input required data-text-field="Name" data-value-field="Id" data-bind="value:' + options.field + '"/>')
            .appendTo(container)
            .kendoDropDownList({
                autoBind: false,
                dataSource: areasDataSource,
                optionLabel: "Please Select..."
            });
    }

function requestedChangesTextAreaEditor(container, options) {
    $('<textarea name="' + options.field + '" style="width: ' + container.width() + 'px;height:' + container.height() + 'px" />')
    .appendTo(container);
};