We want to add a new item locally to a virtual DropDownList.
@(Html.Kendo().DropDownListFor(model => model.SiSpaceDetailId)
.DataTextField(
"SiSpaceId"
)
.DataValueField(
"Id"
).Filter(
"contains"
)
.Events(e => e.Change(
"onSiSpaceSelect"
).DataBound(
"onDatabound"
))
.DataSource(dataSource => dataSource.Custom()
.ServerFiltering(
true
)
.ServerPaging(
true
)
.PageSize(80)
.Type(
"aspnetmvc-ajax"
)
.Transport(tr => tr.Read(read => read.Action(
"GetSiSpaceIds"
,
"Controller"
)
)))
.Virtual(v => v.ItemHeight(26).ValueMapper(
"valueMapper"
))
.HtmlAttributes(
new
{ Id =
"siSpaceId"
, IsSingleSelection =
true
})
.Template(
"<span>#: data.SiSpaceId #</span> <a style=\"float: right\" href='javascript:deleteSiSpaceDialog(\"#: data.Id #\")'> Delete </a>"
)
)
The add is all standard:
<
script
id
=
"noDataTemplate"
type
=
"text/x-kendo-tmpl"
>
<
div
id
=
"addNew"
style
=
"padding: 10px;"
>
<
div
>
Add - '#: data.filterInput.val() #' ?
</
div
>
<
br
/>
<
button
class
=
"k-primary"
onclick
=
"addNew('#: data.element[0].id #', '#: data.filterInput.val() #')"
>Add</
button
>
</
div
>
</
script
>
And the JS looks like this:
onDatabound:
function
() {
var
data = $(
"#siSpaceId"
).data(
"kendoDropDownList"
);
data.listView.content.find(
"#addNew"
).remove();
if
(data.dataSource.view().length === 0) {
var
template = kendo.template($(
"#noDataTemplate"
).html());
data.listView.content.append(template(data));
$(
"#addNew"
).parent().css(
"height"
,
"auto"
);
//height is set to 0 for some reason, this is a workaround
}
},
addNew:
function
(widgetId, value) {
var
widget = $(
"#"
+ widgetId).getKendoDropDownList();
var
dataSource = widget.dataSource;
if
(confirm(alert.areYouSure)) {
dataSource.add({
Id: emptyGuid,
SiSpaceId: value
});
dataSource.one(
"sync"
,
function
() {
widget.select(dataSource.view().length - 1);
});
dataSource.sync();
}
}
If the Id is an empty Guid, we are adding it on submit. Since adding the virtualization for better performance the add stopped working.
Can you post any working example?