Mvvm dropdwonlist in kendui

Question

I have a drop down list on my page, this is the code:

<div id="test"> Role: <span data-bind="text: role"></span> </br> Roles:<select id="roles" data-bind="source: roles, value: role" data-text-field="roleName" data-value-field="roleId" ></select> <ul id="view" data-template="Access-template" data-role="listview" data-bind="source:Accesses"></ul> <script id="Access-template" type="text/x-kendo-template"> <li> <input type="checkbox" data-bind="checked: selected" /> <label data-bind="text: AccessName" /> </li> </script> </div>​ 

and I want to change the collection of roles when the dropdownlist value changes. This is my code:

 var Accesses = [{ AccessName: 'Create', selected: false }, { AccessName: 'Delete', selected: false }, { AccessName: 'Update', selected: true }]; var Roles = [{ roleName: "Admin", roleId: 1, accessItem: Accesses }, { roleName: "User", roleId: 2, accessItem: Accesses }]; var viewModel = kendo.observable({ roles: Roles, accssesItem: Roles.accessItem }); kendo.bind($("#test"), viewModel); 

Answer 1

Figuring out which DropDown item is selected is a bit ... unintuitive, but here is what you need:

 <script id="Access-template" type="text/x-kendo-template"> <li> <input type="checkbox" data-bind="checked: selected" /> <label data-bind="text: AccessName" /> </li> </script> <select data-role="dropdownlist" data-bind="source: roles, events: { select: roleSelected }" data-text-field="roleName" data-value-field="roleId"></select> <ul data-template="Access-template" data-role="listview" data-bind="source: accessItem"></ul> 

... and ...

 $(document).ready(function () { var roles = [{ roleName: "Admin", roleId: 1, accessItem: [{ AccessName: 'Create', selected: true }, { AccessName: 'Delete', selected: true }, { AccessName: 'Update', selected: true }] }, { roleName: "User", roleId: 2, accessItem: [{ AccessName: 'Create', selected: false }, { AccessName: 'Delete', selected: false }, { AccessName: 'Update', selected: true }] }]; var viewModel = kendo.observable({ roles: roles, accessItem: roles[0].accessItem, roleSelected: function (e) { this.set("accessItem", this.roles[e.item.index()].accessItem); } }); kendo.bind("body", viewModel); }); 

JsFiddle's work here: http://jsfiddle.net/rally25rs/JHNm6/