JSFiddle - React, Tailwind, and code Playground

by ganeshgupta

HTML

<script src="http://cdn.kendostatic.com/2012.1.322/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">
<div id="view">
        <dl>
            <dt>
                <label>
                    Country</label></dt>
            <dd>
                <select data-role="dropdownlist"   data-bind="source: countries,  value: country" data-text-field="name" data-value-field="value" >
                </select></dd>
            <dt>
                <label>
                    Zip Code</label></dt>
            <dd>
                <input  class="k-input"  style="width: 124px; height: 20px;" /></dd>
            <dt>&nbsp;</dt>
            <dd>
                <button data-bind="invisible:zipCodeButtonInVisiblity, click: displayGreeting">
                    Select
                </button>
            </dd>
            <dt>
                <label for="txtCity">
                    City</label></dt>
            <dd>
                <input  class="k-input" data-bind="value: city" style="width: 124px; height: 20px;" /></dd>
        </dl>
<script id="popup-template" type="text/x-kendo-template">
<div id="popup-view">
       
    <div id="popup" data-role="window" data-bind="source: this, events:{close: close}" data-title="#= title#">  
<input data-role="numerictextbox" data-bind="value: id"/>  
    <div data-role="tabstrip" data-animation="false">
               <ul>
                   <li class="k-state-active">First</li>
                   <li>Second</li>
               </ul>
               <div>Tab:<span data-bind="text:panel1"></span>
               </div>
               <div>
               </div>
    </div>         
     </div> 
    
</div>
</script>

JavaScript

var viewModel = new kendo.observable({
    city: "FL",
    countries: [{
        name: "US",
        value: "US"},
    {
        name: "India",
        value: "India"}],
    country: "US",
    zipCodeButtonInVisiblity: function(e) {
        //this.get means a change to this.country will notify things bound to zipCodeButtonInVisibility
        if (this.get("country") == "US") {
            return false;
        } else {
            return true;
        }
    },
    displayGreeting: function(e) {
        var popupModel = new kendo.observable({

            title: viewModel.get("city"),
            panel1: "first",
            id: 1,
            close: function(e) {

                //e.sender.close();
            }
        });
        var popupTemplate = kendo.template($("#popup-template").html());
        $("#view").append(popupTemplate(popupModel));
        kendo.bind($("#popup-view"), popupModel);
    }
});

// Bind the View to the View-Model
kendo.bind($("#view"), viewModel);