[Solved] Multiple DDLs bound to a single data source - can exclusion be achieved?

[Pavel]

Hi,

I have a ViewModel, which has a collection field ("Buildings") which should be sent back to the server and a field to fill select lists from ("BuildingsData"):

var model = kendo.observable({
    Buildings: [],
    BuildingsData: [{ Id: 1, Title: "Building1" }, { Id: 2, Title: "Building2" }, { Id: 3, Title: "Building3" }]
});

I have a <div> element bound to the Buildings field:

<div data-bind="source: Buildings" data-template="Building"></div>

 And a template to render a single building:

<script type="x-kendo-template" id="Building">
    <select data-bind="source: parent().parent().BuildingsData, value: BuildingId" data-text-field="Title", data-value-field="Id" data-value-primitive="true"></select>
</script>

What I'd like to achieve is that a building could be selected only once.

For example, I have 3 elements in the Buildings array; so after I select a value in the first dropdown, it should disappear from the two remaining.

When I reset the selection, the previously selected value should appear in all dropdowns again.

But I am confused what is the best way to implement such a behavior. I'd like to use shared data source (BuildingsData will never be changed) and cause as little refresh operations as possible.

Thanks.

[Georgi Krustev]

Hello Pavel,

The best way to accomplish your goal is to use 3 separate datasources, one for each select element. Thus you can filter each source and remove the already selected item. Note that you cannot use a single source list, because the widget requires the selected value to be part of its data source. If it is removed most probably the widget will lose the selected value.

Regards,
Georgi Krustev
Telerik