or
branch.Add().Text(childs.SomeTitle).Id(childs.AlphaId.ToString()).HtmlAttributes(new { data_foo = childs.BravoId });
.TemplateId("treeview-template")
function
btnShowModalView_Click(e) {
var
mv = $(
"#mvComposer"
).data(
"kendoMobileModalView"
);
//look under the hood of kendoMobileModalView
//console.log(mv);
mv.shim.options.duration = 200;
mv.shim.options.effect =
"slide:up"
;
mv.open();
}
{
Name: "Top Level",
Collection: [
First: [
{
Name: "Child",
Size: 8,
onIncrease: function(e){
var current = e.data.get("Size");
e.data.set("Size", current += 1);
}
}
]
]
}
<
div
data-template
=
"tmpl-boxes-for-size"
data-bind
=
"source: Collection.First"
></
div
>
<
script
type
=
"text/html"
id
=
"tmpl-boxes-for-size"
>
<
div
class
=
"k-rails"
>
<
div
class
=
"k-item-reduce"
></
div
>
# for(var index = 0; index <
data.Size
; index++ ) { #
<div
class
=
"k-rails-item"
style="text-align: center;
font-size: 20px;
vertical-align: middle;">
#= index + 1 #
</
div
>
# } #
<
div
class
=
"k-item-increase"
data-bind
=
"click: onIncrease"
></
div
>
</
div
>
</
script
>
.k-item-reduce {
float: left;
width: 0px;
height: 0px;
border-top: 16px solid transparent;
border-bottom: 16px solid transparent;
border-right: 8px solid #ccc;
}
.k-item-increase {
float: left;
width: 0;
height: 0;
border-top: 16px solid transparent;
border-bottom: 16px solid transparent;
border-left: 8px solid #ccc;
}
.k-rails {
position: relative;
&:after {
clear: both;
}
.k-rails-item {
float: left;
display: block;
margin: 2px;
height: 24px;
width: 24px;
border: dashed 1px #ccc;
}
}
{
Name: "Top Level",
Collection: [
First: [
{
Name: "Child",
Size: 8,
onIncrease: function(e){
var current = e.data.get("Size");
e.data.set("Size", current += 1);
viewModel.trigger("change", { field: "Collection" });
}
}
]
]
}