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

2 posts, 0 answers
  1. Pavel
    Pavel avatar
    15 posts
    Member since:
    May 2012

    Posted 01 Feb Link to this post


    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>

    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.


  2. Georgi Krustev
    Georgi Krustev avatar
    3688 posts

    Posted 02 Feb Link to this post

    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.

    Georgi Krustev
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top