Binding practice

3 posts, 1 answers
  1. Answer
    Daniel
    Daniel avatar
    3 posts
    Member since:
    Mar 2013

    Posted 28 Apr 2013 Link to this post

    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.    });
  2. Petyo
    Admin
    Petyo avatar
    2444 posts

    Posted 01 May 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Daniel
    Daniel avatar
    3 posts
    Member since:
    Mar 2013

    Posted 05 May 2013 Link to this post

    Hello Petyo

    That was exactly what I was looking for!

    Thanks
    Daniel
Back to Top