jube-fork/Jube.App/wwwroot/kendo/examples/mobile-listview/editing.html

<div data-role="view" id="edit-listview" data-title="Products List" data-init="listViewInit">
    <header data-role="header">
        <div data-role="navbar">
            <a id="back-button" class="nav-button" data-align="left" href="#/" data-role="backbutton">Back</a>
            <span data-role="view-title"></span>
            <a data-align="right" data-icon="source-code" data-click="goToSourceCode" data-role="button" title="Show this demo source code"></a>
        </div>
    </header>

    <ul id="list-edit-listview"></ul>

    <script id="itemTemplate" type="text/x-kendo-template">
        <a class="km-listview-link"> #=ProductName# </a>
        <a href="\\#" data-role="button" data-icon="trash" class="delete km-primary"></a>
    </script>
</div>

<div data-role="view" id="edit-detailview" data-show="detailShow" data-init="detailInit" data-title="Details">
    <header data-role="header">
        <div data-role="navbar">
            <a class="nav-button" data-align="left" data-role="backbutton" id="cancel">Cancel</a>
            <span data-role="view-title"></span>
            <a class="nav-button" data-align="right" data-role="button" id="done">Done</a>
        </div>
    </header>

    <form>
        <ul data-role="listview" data-style="inset" onclick="">
            <li>
                <label class="km-label-above">Product Name
                    <input type="text" data-bind="value: ProductName"/>
                </label>
            </li>
            <li>
                <label class="km-label-above">Unit Price
                    <input type="number" value="20" data-bind="value: UnitPrice"/>
                </label>
            </li>
            <li>
                Discontinued
                <input type="checkbox" data-role="switch" data-bind="checked: Discontinued"/>
            </li>
        </ul>
    </form>
</div>

<style>
    #edit-listview .delete {
        display: none;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        border-radius: 0;
        border-width: 0;
        margin: 0;
        line-height: 2.5em;
        box-shadow: inset .1em .1em .2em 0 rgba(0,0,0,.2);
    }
</style>

<script>
    var crudServiceBaseUrl = "https://demos.telerik.com/kendo-ui/service",
        dataSource = new kendo.data.DataSource({
            transport: {
                read:  {
                    url: crudServiceBaseUrl + "/Products",
                    dataType: "jsonp"
                },
                update: {
                    url: crudServiceBaseUrl + "/Products/Update",
                    dataType: "jsonp"
                },
                destroy: {
                    url: crudServiceBaseUrl + "/Products/Destroy",
                    dataType: "jsonp"
                },
                parameterMap: function(options, operation) {
                    if (operation !== "read" && options.models) {
                        return {models: kendo.stringify(options.models)};
                    }
                }
            },
            batch: true,
            schema: {
                model: {
                    id: "ProductID",
                    fields: {
                        ProductID: { editable: false, nullable: true },
                        ProductName: "ProductName",
                        UnitPrice: { type: "number" },
                        Discontinued: { type: "boolean" }
                    }
                }
            }
        });

    function listViewInit(e) {
        e.view.element.find("#list-edit-listview").kendoMobileListView({
            dataSource: dataSource,
            template: $("#itemTemplate").html()
        })
        .kendoTouch({
            filter: ">li",
            enableSwipe: true,
            touchstart: touchstart,
            tap: navigate,
            swipe: swipe
        });
    }

    function navigate(e) {
        console.log($(e.touch.target).data("uid"))
        var itemUID = $(e.touch.target).data("uid");
        kendo.mobile.application.navigate("#edit-detailview?uid=" + itemUID);
    }

    function swipe(e) {
        var button = kendo.fx($(e.touch.currentTarget).find("[data-role=button]"));
        button.expand().duration(30).play();
    }

    function touchstart(e) {
        var target = $(e.touch.initialTouch),
            listview = $("#list-edit-listview").data("kendoMobileListView"),
            model,
            button = $(e.touch.target).find("[data-role=button]:visible");

        if (target.closest("[data-role=button]")[0]) {
            model = dataSource.getByUid($(e.touch.target).attr("data-uid"));
            dataSource.remove(model);

            //prevent `swipe`
            this.events.cancel();
            e.event.stopPropagation();
        } else if (button[0]) {
            button.hide();

            //prevent `swipe`
            this.events.cancel();
        } else {
            listview.items().find("[data-role=button]:visible").hide();
        }
    }

    function detailShow(e) {
        var model = dataSource.getByUid(e.view.params.uid);

        kendo.bind(e.view.element, model, kendo.mobile.ui);
    }

    function detailInit(e) {
        var view = e.view;
        view.element.find("#done").data("kendoMobileButton").bind("click", function() {
            dataSource.one("change", function() {
                view.loader.hide();
                kendo.mobile.application.navigate("#:back");
            });

            view.loader.show();
            dataSource.sync();
        });

        view.element.find("#cancel").data("kendoMobileBackButton").bind("click", function(e) {
            e.preventDefault();
            dataSource.one("change", function() {
                view.loader.hide();
                kendo.mobile.application.navigate("#:back");
            });

            view.loader.show();
            dataSource.cancelChanges();
        });
    }
</script>