JSFiddle - React, Tailwind, and code Playground

by korchev

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.common.min.css">
<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>
<script src="http://cdn.kendostatic.com/2012.2.710/js/cultures/kendo.culture.en-AU.min.js"></script>
<div class="span12" data-toolbar='[{"name":"AddNew", "text":"Add new member", "className":"btn btn-success"},{"name":"destroy","className":"btn btn-danger"}]'  id = "TeamMembersGird" data-role="grid" data-sortable="true" data-pageable="true" data-editable='{"mode" : "popup", "confirmation" : "Are you sure you want to delete this team member?"}'
         data-bind="source: teamMembersSource, events: { change: rowChange }" data-selectable="true" data-resizable="true" data-reorderable="true"
         data-columns='[{"field":"FirstName", "title":"First name"},
                        {"field":"LastName", "title":"Last name"}]'>

JavaScript

var TeamMembersViewModel = kendo.observable({
 
 teamMembersSource: new kendo.data.DataSource({
            transport: {
                read: {
                    url: '/echo/json/',
                    type: "POST",
                    data: {
                      json: JSON.stringify({"TeamMembers":[{"UserID":10011,"About":null,"ProfilePictureImagePath50":"http://signuperstore.s3-eu-west-1.amazonaws.com/Avatars/10011_0fddd9bf-0b_50.jpg","ProfilePictureImagePath150":"http://signuperstore.s3-eu-west-1.amazonaws.com/Avatars/10011_0fddd9bf-0b_150.jpg","ProfilePictureImagePath300":"http://signuperstore.s3-eu-west-1.amazonaws.com/Avatars/10011_0fddd9bf-0b_300.jpg","FirstName":"Dennis","LastName":"Puzak","EmailAddress":"[email protected]","Gender":0,"CompanyID":2,"IsCompanyAdmin":true,"DateOfBirth":"2012-09-25T00:00:00+02:00"},{"UserID":10013,"About":null,"ProfilePictureImagePath50":"http:///signuperstore.s3-eu-west-1.amazonaws.com/00000_82asdc617-35_50.gif","ProfilePictureImagePath150":"http:///signuperstore.s3-eu-west-1.amazonaws.com/00000_82asdc617-35_150.gif","ProfilePictureImagePath300":"http:///signuperstore.s3-eu-west-1.amazonaws.com/00000_82asdc617-35_300.gif","FirstName":"Tvrtko","LastName":"Kračun","EmailAddress":"[email protected]","Gender":0,"CompanyID":2,"IsCompanyAdmin":true,"DateOfBirth":"2012-10-12T00:00:00+02:00"}],"TotalCount":2})
                    }
                }
            },
            schema: {
                model: {
                    id: "UserID",
                    fields:
                        {
                            UserID: { type: "number" },
                            FirstName: { type: "string" },
                            LastName: { type: "string" },
                            Gender: { type: "number" },
                            About: { type: "string" },
                            ProfilePictureImagePath50: { type: "string" },
                            ProfilePictureImagePath150: { type: "string"...