Kendo UI - Add / Remove with kendo.data.DataSource

A simple example of using kendo.data.DataSource to render a "to do" item list, filter it, and add / remove items

by Harisankaran Parameswaran

HTML

<script src="http://cdn.kendostatic.com/2012.3.1114/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.default.min.css">
<div id="view" class="k-content">
    <input id="txtPo" tabindex="1" data-value-update="keyup" data-bind="value: poId" />
    <label>RFQ</label>
    <input id="txtRfq" tabindex="2" type="text" data-value-update="keyup" data-bind="value:rfq" />
</div>

JavaScript

$(document).ready(function () {

        $("#txtRfq").attr('maxlength', '9');
        $("#txtRfq").caretToEnd(); // This is to set caret at end on page load

        /* The below is to set caret at end on clicking the text box */
        $("#txtRfq").on("click", function () {
            $("#txtRfq").caretToEnd();
        });

        /*The below is to set caret at end when the text box gets focus through tabbing */
        $("#txtRfq").on("focus", function (e) {
            $(this).delay(13).caretToEnd();
        });
    });

    var viewModel = kendo.observable({
        poId: null,
        rfq: "RFQ"
    });

    kendo.bind($("#view"), viewModel);

    /* The below is the contents of the jquery-caret.js library. I have added the full code here because I wasn't able to include the src. You wouldn't need this */ (function ($) {
        // Behind the scenes method deals with browser
        // idiosyncrasies and such
        $.caretTo = function (el, index) {
            if (el.createTextRange) {
                var range = el.createTextRange();
                range.move("character", index);
                range.select();
            } else if (el.selectionStart != null) {
                el.focus();
                el.setSelectionRange(index, index);
            }
        };

        // Another behind the scenes that collects the
        // current caret position for an element

        // TODO: Get working with Opera
        $.caretPos = function (el) {
            if ("selection" in document) {
                var range = el.createTextRange();
                try {
                    range.setEndPoint("EndToStart", document.selection.createRange());
                } catch (e) {
                    // Catch IE failure here, return 0 like
                    // other browsers
                    return 0;
                }
                return range.text.length;
            } else if (el.selectionStart != null) {
                return el.selectionStart;
 ...