JSFiddle - React, Tailwind, and code Playground

by siliconsoul

HTML

<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 src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>
<form id="myForm" action="/">
    <input name="StatusLPD" role="dropdownlist"/>
    <input type="text" name="StatusType"/>
</form>

<button type="button" onclick="setRecord()">Set</button>

JavaScript

function setRecord(){
    debugger;
    var item = modelDataSource.data()[2];
    var form = $("#myForm").find("input").each(function(){
        var input = $(this);
        var value = item.get(input.attr("name"));  
        if(value){
           var role = input.attr("role");
           if(role){
               if(role =="dropdownlist"){
                   var dropDown = input.data("kendoDropDownList");
                   dropDown.value(value);
               }
               // cases for other controls in the form
           }
           else{
               input.val(value);
           }
        }            
    });        
}


var modelDataSource = new kendo.data.DataSource(
{
    transport:
    {
        read: 
        {
            url: '/echo/json/',
            type: "POST",
            data: {
                json: JSON.stringify(
                    [{StatusLPD: 1, StatusType: "Type1"},{StatusLPD: 2,StatusType:"Type2"},{StatusLPD: 3,StatusType: "Type3"}]
                ) 
            }
        }
    },
    schema:
    {
        model:{
            StatusLPD: {type: "number"},
            StatusType: {type: "Type1"}
        }
    }
});

modelDataSource .read(); 
var statusModel = kendo.data.Model.define(
{
    id: "Id",
    fields: 
    {
        Id:
        { 
            type: "number"
        },     
        StatusName:
        { 
            type: "string"
        }
    }
});

var statusDataSource = new kendo.data.DataSource(
{
    transport:
    {
        read: 
        {
            url: '/echo/json/',
            type: "POST",
            data: {
                json: JSON.stringify(
                    [{Id: 1,StatusName: "Status1"},{Id: 2,StatusName: "Status2"},{Id: 3,StatusName: "Status3"}]
                  )
                 }              
        }
    },
    schema:
    {
        model: statusModel
    }
});
                
$("input[name=StatusLPD]").kendoDropDownList({
    dataSource: statusDataSource,
    dataTextField:...