Kendo UI

jQuery + Kendo UI + MockJax

by erick

HTML

<script src="http://cdn.kendostatic.com/2012.1.229/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.229/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.229/styles/kendo.blueopal.min.css">
<div class="form">       
  <dl>
    <dt>Type</dt>
    <dd>
        <select id="type">
            <option value="food">Food</option>
            <option value="shopping">Shopping</option>
            <option value="bills">Bills</option>
        </select>
    </dd>
    <dt>Merchant</dt>
    <dd><input id="merchant" type="text" /></dd>
    <dt>Amount</dt>
    <dd><input id="amount" type="text" /></dd>
  </dl>
    <dt>&nbsp;</dt>
    <dd><button id="create" class="k-button">Add</button></dd>
</div>

<div class="span4"><b>Expenses</b><hr />
    <table id="expenses">
        
    <table>
</div>

CSS

dl
{
    margin: 10px 0;
    padding: 0;
    min-width: 0;
}
    
dt, dd
{
    float: left;
    margin-top: 10px;    
}
    
dt
{
    margin-top: 10px;    
    clear: left;
    text-align: right;
    opacity: 0.6;
    width: 80px;
    margin-right: 10px;        
}

.span4 {
    clear: both;
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
}

tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}

table {
    width: 100%;
}

td {
    width: 33%;
}

JavaScript

(function() {
    
    $("#create").on("click", function() {
        
        // add them item to the table        
        $("#expenses").append("<tr><td>" + $("#type option:selected").text() + 
                              "</td><td>" + $("#merchant").val() + 
                              "</td><td>" + $("#amount").val() +
                              "</td></tr>");

        // clear out the form
        $("#type").val("food");
        $("#merchant").val("");
        $("#amount").val("");
    });

})();