Binding practice

[Daniel]

I'm not sure what is the best way for my scenario, so I'll explain that first.

I have two datasources. Persons and Groups, each Person-Item has an indicator, to which group it belongs to. The persons are binded to a kendo-grid and the groups to a <ul>. My problem is, that I want to display a count-number besides the group, which indicates how many persons are in that group - this information is calculated from the persons-datasource and not part of the group itself.

Sorry for that generic question - but I'm really struggling with this...

01.var contactGroupsDataSource = new kendo.data.DataSource({
02.  transport: {
03.    read: {
04.      url: "api/contactgroups"
05.    }
06.  }
07.});
08.
09.$('#contactGroupsList').kendoListView({
10.    dataSource: contactGroupsDataSource,
11.    template: "<li class='contactGroupListItem' data-number='${Number}'>${Number} ${Name} (<span data-bind="text: cgcount[1]"></span>) </li>"
12.});
13.
14.viewModel = kendo.observable({
15.        contactsDataSource: new kendo.data.DataSource({
16.            transport: {
17.                read: {
18.                    url: "api/contacts"
19.                }
20.            },
21.            schema: {
22.                model: {
23.                    id: "Id",
24.                    fields: {
25.                        id: { type: "string" },
26.                        FirstName: { type: "string" },
27.                        LastName: { type: "string" },
28.                        ContactGroupNumber: { type: "integer" }
29.                    }
30.                }
31.            },
32.            change: function (e) {
33.                var data = this.data();
34.
35.                for (var i = 0; i < data.length; i++) {
36.                    var cg = data[i]["ContactGroupNumber"];
37.                    viewModel.cgcount.splice([cg - 1], 1, viewModel.cgcount[cg - 1] + 1);
38.                }
39.
40.                for (var i = 0; i < 7; i++) {
41.                    console.log(i + 1 + ': ' + viewModel.cgcount[i]);
42.                }
43.            }
44.        }),
45.        cgcount: new kendo.data.ObservableArray([0, 0, 0, 0, 0, 0, 0])
46.    });
47.
48.    kendo.bind($("#contactsGroupContainer"), viewModel);
49.
50.    contactsListView = $('#contactsList').kendoGrid({
51.        dataSource: viewModel.contactsDataSource,
52.        sortable: true,
53.        rowTemplate: kendo.template($("#rowTemplate").html())
54.    });

[Petyo]

Hello Daniel,

 If I understood you correctly, you may take advantage of the MVVM behavior, which looks for bindings at the parent objects if such property is missing at the current item. Please take a look at this sample to get a better idea of what I mean.

Regards,
Petyo
the Telerik team

[Daniel]

Hello Petyo

That was exactly what I was looking for!

Thanks
Daniel