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
>