Kendo UI - Tying a DataSource to two kendo widgets with declarative binding

Question

I am using Kendo UI and their MVVM system for my site, and I have a situation where I have a ListView widget that accompanies a Pager widget. Both of them share a kendo.data.dataSource . The code that wires them up looks kind of like this;

HTML

<div class="form-group">
    <input type="text" class="form-control input-lg" name="search" data-ns="auras" placeholder="Search" />
</div>
<div class="form-area">
    <div id="listView" data-ns="auras"></div>
    <div id="pager" data-ns="auras" class="k-pager-wrap"></div>
</div>
<div class="form-group">
    <div data-template="display-searchable-selected" data-bind="source: Auras"></div>
</div>
<br style="clear: both;"/>

Kendo Templates

<script type="text/x-kendo-template" id="display-searchable-one">
    <div class="col-md-2">
        <div class="alert-message alert-message-default">
            <h2>
                ${ data.Name }
            </h2>
            <p>
                ${ data.Description }
            </p>
        </div>
    </div>
</script>
<script type="text/x-kendo-template" id="display-searchable-selected">
    <div class="col-md-2">
        <div class="alert-message alert-message-success">
            <span class="alert-close" data-bind="click: onRemove">
                <span class="glyphicon glyphicon-remove"></span>
            </span>
            <h2>
                ${ data.Name }
            </h2>
        </div>
    </div>
</script>

Javascript

// define the datasource for searching for auras
var dataSource = new kendo.data.DataSource({
    transport: {
        read: {
            url: '/data/auras',
            dataType: "json",
            type: 'GET',
            cache: false
        }
    },
    schema: {
        total: "total",
        data: "data"
    },
    page: 0,
    pageSize: 5,
    take: 5,
    serverPaging: true,
    serverFiltering: true,
    type: "aspnetmvc-ajax"
});

$("#pager[data-ns='auras']").kendoPager({
    dataSource: dataSource
});

var list = $("#listView[data-ns='auras']").kendoListView({
    dataSource: dataSource,
    template: kendo.template($("#display-searchable-one").html()),
    selectable: "single",
    change: e => {
        var data = dataSource.view(),
            selected = $.map(e.sender.select(), item => data[$(item).index()].toJSON())[0];
        this.Push(selected);
    }
}).data("kendoListView");

var update = (text) => {
    list.dataSource.filter({ field: "Name", operator: "eq", value: text });
};

$("[name='search'][data-ns='auras']").on('change', function () {
    update($(this).val());
});

Now this works okay, but there are other things like this all over my site. I am a little tired of repeating all of this javascript, so I baked the behavior into re-usable widgets. That did solve some of it, but I think I can go even further and make things easier. I want to try and do some of this declaratively with the MVVM system. So I figured I would try it out .. this is about as far as I got.

<div id="listView"
     data-ns="auras"
     data-role="listview"
     data-selectable="single"
     data-template="display-searchable-one"
     data-source="{ url: '/data/auras', ... }"></div>
<div id="pager" data-ns="auras" class="k-pager-wrap"></div>

I am having a hard time figuring out how to properly wire this up, how to get that data source to work right, and how to appropriately share it with the pager - and how to tie it into the search field. Any suggestions? I would love to try and get more of this into simple declarative bindings and less into explicit javascript.

Answer 1

You can do it in one of the following ways:

1. Use MVVM. Add the data source to your view model and then use data-bind="source: ds" for both listview and pager:

    <div id="listview" data-role="listview" data-bind="source: ds"></div> <div id="pager" data-role="pager" data-bind="source: ds"></div> 

2. Use a global data source and the use the data-source attribute.

    <script> var ds = new kendo.data.DataSource(); </script> <div id="listview" data-role="listview" data-source="ds"></div> <div id="pager" data-role="pager" data-source="ds"></div> 

The difference is subtle. The first approach relies on MVVM which operates via the data-bind attribute whereas the second approach is equivalent to setting the dataSource configuration option. If you are already using MVVM via kendo.bind you could use the first approach. If you are not using MVVM you can use the second.