JSFiddle - React, Tailwind, and code Playground

by Vincent Dagpin

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.1008/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.1008/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.1008/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.1008/styles/kendo.dataviz.default.min.css">
<script src="http://cdn.kendostatic.com/2014.2.1008/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.1008/js/angular.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.1008/js/kendo.all.min.js"></script>
<base href="http://demos.telerik.com/kendo-ui/grid/angular">


<div id="example" ng-app="Test">
    <div ng-controller="MyCtrl" ng-init="Init()">
        <select kendo-combo-box
            placeholder="'Please select'"
            k-options="optGender"
            ng-model="Gender"
            style="width: 50%">
        </select>
        
        <button kendo-button ng-click="OnClick($event)">?</button>
        
        <br /><br />
        <div id="log"></div>
    </div>
</div>

JavaScript

var app = angular.module("Test", [ "kendo.directives" ]);
app.controller('MyCtrl', 
      ['$scope', 
      function($scope)
      {
          var genders = 
          [
              { text: 'Male', value: 1 },
              { text: 'Female', value: 2 }
          ];
          
          // set my defaul value here
          $scope.$on("kendoRendered", function (event, widget) {
              $('#log').append('Rendered' + '<br />');
              $scope.Gender = 2;
          });
          
          $scope.Init = function(){
              $('#log').append('Initialized' + '<br />');
              $scope.Gender = 1;
          }
          
          $scope.optGender = {
              dataSource: {
                  serverFiltering: true,
                  transport: {
                      read: function(opt) {
                          $('#log').append('Requesting' + '<br />');
                          // just delay to mimic the network behavior
                          setTimeout(function(){        
                              $('#log').append('Requested' + '<br />');
                              opt.success(genders); 
                          },3500);
                      }
                  }
              },
              dataTextField: 'text',
              dataValueField: 'value',
              dataBound: function () 
              {
                  $('#log').append('DataBound' + '<br />');
                  console.log($scope.Gender);
                  this.value(2);
              }
          }
          
          $scope.OnClick = function(event) {
               event.preventDefault();   
              alert($scope.Gender);
          }
      }]);