Kendo UI

jQuery + Kendo UI + MockJax + Knockout

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.blueopal.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.1.319/js/kendo.all.min.js"></script>
 <script id="template" type="text/x-kendo-tmpl">
            <div class="licenseListItem">
                # if (data.expired) { #
                <div style="width:400px;"> 
                    <p style="width:150px;float:left;" class="licenseName">#=data.name# (Expired)</p>
                    <button style="width:150px;float:right;" class="licenseHoverButton">Remove</button>
                </div>
                    
                #} else { #
                    <p class="licenseName">#=data.name#</p>
                #} #
                <p class="licenseUsage">#=data.remaining#/#=data.total#GB</p>

            </div>
        </script>
     <script id="btnTemplate" type="text/x-kendo-template">
                 <button class="licenseHoverButton">Rename</button>
    </script>
<div class="demo-section">
     <h2>Licenses</h2>

    <input id="licenses" style="width: 400px;" />
</div>

CSS

.demo-section {
       width: 400px;
       padding: 30px;
   }
   .demo-section h2 {
       text-transform: uppercase;
       font-size: 1.2em;
       margin-bottom: 10px;
   }
   #licenses-list .k-item {
       overflow: hidden;
   }
   #licenses-list .k-item .licenseHoverButton {
       display: none;
   }
   #licenses-list .k-item.k-state-hover .licenseHoverButton {
       display: block;
   }
   #licenses-list .k-item.k-state-hover .licenseUsage {
       display: none;
   }
   #licenses-list p {
       margin: 0;
   }

JavaScript

var mydata = [{
      "name": "License Name",
          "remaining": "24",
          "total": "60",
          "expired": false
  }, {
      "name": "1234-1234-1234-1234",
          "remaining": "60",
          "total": "60",
          "expired": false
  }, {
      "name": "Old License Name",
          "remaining": "2",
          "total": "60",
          "expired": true
  }];
  $("#licenses").kendoComboBox({
      dataTextField: "name",
      dataValueField: "name",
      filter: "startswith",
 
      dataSource: mydata
  });

  var tooltip = $('.licenseName').kendoTooltip({
      position: "right",
       content: kendo.template($("#btnTemplate").html())
  }).data("kendoTooltip");

  var combobox = $("#licenses").data("kendoComboBox");