26 June, 2014 Roel van Lisdonk 0 Comments 1 category

This page shows how you can get the selected items when using Kendo UI MVVM:

 

<!DOCTYPE html>
<html>
<head>
<title>Kendo element binding research page.</title>
<style>
* {
    margin: 0;
    padding: 0;
}

body {
    padding: 20px;
}
</style>
<link href="//cdn.kendostatic.com/2014.1.528/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="//cdn.kendostatic.com/2014.1.528/styles/kendo.silver.min.css" rel="stylesheet" type="text/css" />    
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="//cdn.kendostatic.com/2014.1.528/js/kendo.all.min.js"></script>

</head>
<body>
<div id="page">
<button onclick="app.onExecuteClick(event);">Execute</button>
<script type="text/x-kendo-tmpl" id="template">
    <div class="k-widget">
        <dl>
            <dt>Product Name</dt>
            <dd>#:ProductName#</dd>
            <dt>Unit Price</dt>
            <dd>#:kendo.toString(UnitPrice, "c")#</dd>
        </dl>
    </div>
</script>
<div data-role="listview"
        data-template="template"
        data-selectable="multiple"
        data-bind="source: products, events: { change: onProductChange }"
        style="width: 420px; height: 200px; overflow: auto"></div>
</div>
<script type="text/javascript">
var app = (function ()
{
    var self = {};

    self.onExecuteClick = function (e)
    {
        debugger;
    };

    self.start = function (e)
    {
        var products = [
            { Id: 1, ProductName: 'Product1', UnitPrice: 200 },
            { Id: 2, ProductName: 'Product2', UnitPrice: 300 },
            { Id: 3, ProductName: 'Product3', UnitPrice: 400 }
        ];

        var viewModel = kendo.observable({
            selectedProducts: null,
            products: new kendo.data.DataSource({
                schema: {
                    model: {
                        id: "Id"
                    }
                },
                data: products
            }),
            onProductChange: function (e)
            {
                // Get kendo listview.
                var $listView = e.sender;
                var data = $listView.dataSource.view();

                // Get the selected DOM elements as jQuery objects.
                var $selectedElements = $listView.select();

                // Convert the selected  jQuery DOM elements to a Array containing only "Product" objects.
                var selected = $.map($selectedElements, function (item)
                {
                    var index = $(item).index();
                    return data[index];
                });

                // Log the selected products to the console.
                console.log(selected);
            }
        });

        kendo.bind($("#page"), viewModel);
    };

    return self;
})();

app.start();
</script>
</body>
</html>
Tags:
Category: Uncategorized

One Reply to “MVVM – Kendo UI ListView – Get selected items on selection.”

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Related Posts