JSFiddle - React, Tailwind, and code Playground

by valchev

HTML

<script src="http://cdn.kendostatic.com/2012.1.515/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.default.min.css">
<form id="editForm">
  
  <fieldset>
    <legend>Neue Person</legend>
    
    <div>
      <label for="txtVorname">Vorname</label>
      <input id="txtVorname" data-bind="value: person.vorname"  maxlength="50"/>
      binding test: <span data-bind="text: person.vorname"></span>
    </div>
    
    <div>
      <label for="txtNachname">Nachname</label>
      <input id="txtNachname" data-bind="value: person.nachname"  maxlength="50"/>
    </div>
    
    <div>
      <label for="txtBirthCity">Geburtsort:</label>
      <input id="txtBirthCity" data-bind="value: person.birthCity"  maxlength="50"/>      
    </div>

    <div>
      <label for="txtDateOfBirth">Geburtstag:</label>
      <input id="txtDateOfBirth" data-role="datepicker" data-bind="value: person.dateOfBirth"  maxlength="50"/>
      binding test: <span data-bind="text: person.dateOfBirth"></span>
    </div>
    
    <div id="addressGrid" 
      data-role="grid" 
      data-bind="source: personAddresses, events: {remove: onRemove}" 
      data-columns='[{"command": ["edit", "destroy"]}, "street", "city"]'
      data-editable="inline">
        
    </div>
    
  </fieldset>
  
  
  <input id="btnSave" type="button" value="Speichern" data-bind="click: saveData"/>
  
  <input id="btnSave" type="button" value="Inspect state"/>

</form>

JavaScript

var personObj = {
    "id": 121,
    "vorname": "Sörnt",
    "nachname": "Poppe",
    "dateOfBirth": "1.05.1980",
    "birthCity": "Oldenburg",
    "adressen": [{
        "id": 122,
        "street": "Flogsand",
        "city": "Bremen"},
    {
        "id": 123,
        "street": "Bismarkstrasse",
        "city": "Oldenburg"}]
};

var viewModel = kendo.observable({
    person: personObj,
    //define a dataSource for the grid
    personAddresses: new kendo.data.DataSource({
        schema: {
            model: {
                id: "id",
                fields: {
                    id: { type: "number" },
                    street: { type: "string", validation: { required:true } },
                    city: { type: "string" }
                }
            }
        },
        data: personObj.adressen
    }),    
    saveData: function() {
        var person = this.get("person");
        //set the addresses (from the grid) to the person object
        person.set("adressen", this.personAddresses.data());
        
        var data = JSON.stringify(person);
        console.log(data);
    },
    onRemove: function(e) {
        //remove event of the grid
        //suitable to track the removed items
        console.log(e);
    }
});

//bind the the form to the viewModel
kendo.bind($("#editForm"), viewModel);