or
<div id="example" data-template="template" data-bind="source: locales"></div><script id="template" type="text/x-kendo-template"> <div> <label data-bind="text: target"></label> <select data-text-field="Filename" data-value-field="Path" data-bind="value: Path, source:parent().parent().uploadedFiles" data-role="dropdownlist"></select> </div></script>var viewModel = kendo.observable({ uploadedFiles : [{Filename:"...", Path:""}, {Filename:"1", Path:""}, {Filename:"2", Path:""}], locales: [{ target: 'German'}, { target: 'French'}, { target: 'Italian'}, { target: 'Japanese'}, { target: 'Chinese (Simplified)'}]});kendo.bind($("#example"), viewModel);<div id="example" data-template="template" data-bind="source: locales"></div><script id="template" type="text/x-kendo-template"> <div> <label data-bind="text: value"></label> <select data-text-field="Filename" data-value-field="Path" data-bind="value: Path, source:uploadedFiles" data-role="dropdownlist"></select> </div></script>var viewModel2 = kendo.observable({ selectedLocales: ['German', 'French', 'Italian', 'Japanese', 'Chinese (Simplified)']});var viewModel = kendo.observable({ uploadedFiles : [{Filename:"...", Path:""}, {Filename:"1", Path:""}, {Filename:"2", Path:""}], locales: viewModel2.selectedLocales});kendo.bind($("#example"), viewModel);var viewModel2 = kendo.observable({ selectedLocales: ['German', 'French', 'Italian', 'Japanese', 'Chinese (Simplified)']});var viewModel = kendo.observable({ uploadedFiles : [{Filename:"...", Path:""}, {Filename:"1", Path:""}, {Filename:"2", Path:""}], locales: function() { return viewModel2.get("selectedLocales"); }});kendo.bind($("#example"), viewModel);The issue has become a bit more complicated: In production the list of source languages is going to be coming from a multi-select in the other viewmodel. My idea is to create a calculated field that builds a observableobject that contains the selectedLanguages, an instance of the uploadedFiles array and a selectedFile variable to hold the selection:
aspx:
<div id="example2"> <h5>Target</h5> <select multiple="multiple" data-value-field="id" data-text-field="name" data-bind="source: availableLocales, value: selectedLocales"></select></div><div id="example"> <div data-template="template" data-bind="source: locales"></div></div><script id="template" type="text/x-kendo-template"> <div> <label data-bind="text: target"></label> <select data-text-field="Filename" data-value-field="Path" data-bind="value: selectedFile, source:files" data-role="dropdownlist"></select> </div></script>javascript:
var viewModel2 = kendo.observable({ selectedLocales: [], availableLocales: [{id:1, name:'German'}, {id:2, name:'French'}, {id:3, name:'Italian'}, {id:4, name:'Japanese'}, {id:5, name:'Chinese (Simplified)'}]});var viewModel = kendo.observable({ uploadedFiles : [{Filename:"...", Path:""}, {Filename:"1", Path:""}, {Filename:"2", Path:""}], locales: function() { var selected = viewModel2.get("selectedLocales"); var availableFiles = this.get("uploadedFiles"); var processedLocales = []; for (var i = 0; i < selected.length ; i++) { processedLocales.push({ target: selected[i].get("name"), files: availableFiles, selectedFile: null }); } return processedLocales; }});kendo.bind($("#example2"), viewModel2);kendo.bind($("#example"), viewModel);fiddle: http://jsfiddle.net/fHrVK/
Of course this doesn't work either...
new mysqli($server, $username, $password, $myDB);<!DOCTYPE html><html><head> <meta name="viewport" content="width=device-width" /> <title>@ViewBag.Title</title> <link href="@Url.Content("~/Styles/Site.css")" rel="stylesheet" type="text/css" /> <link href="@Url.Content("~/Styles/kendo.silver.min.css")" rel="stylesheet" type="text/css" /> <script src="@Url.Content("~/Scripts/jquery-1.9.1.min.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/kendo.web.min.js")" type="text/javascript"></script></head><body> <div> @RenderBody() </div> <script src="@Url.Content("~/Scripts/Custom.js")" type="text/javascript"></script></body></html>$(document).ready(function () { $(function () { $("countriesAutoComplete").kendoAutoComplete(); });});@{ Layout = "~/Views/Shared/_Layout.cshtml";}<!DOCTYPE html><html><head> <meta name="viewport" content="width=device-width" /> <title>Index</title></head><body> <div> <p> Country: <input id="countriesAutoComplete" class="k-input" /> </p> </div> <script type="text/javascript" src="~/Scripts/Custom.js"></script></body></html>