Несколько выпадающих списков с одним источником данных Кендо

У меня есть страница, которая предоставляет пользователю 5 выпадающих списков с контрольными вопросами. Они устанавливаются через локальный объект DataSource, то есть в основном 10 вопросов в объекте. Я хочу привязать все 5 выпадающих списков к одному и тому же источнику данных, и выбран один вопрос, удалить его из источника данных, чтобы вы не могли выбрать его ни для одного из следующих вопросов. Вот мой код:

var questions =
        [{
            value: "Your first pet\'s name?"
        },
            {
                value: "Your favorite teacher?"
            },
            {
                value: "The city you were born in?"
            },
            {
                value: "Your mother\'s maiden name?"
            },
            {
                value: "The high school you attended?"
            },
            {
                value: "First name of the first person you kissed?"
            },
            {
                value: "What did you want to be when you grow up?"
            },
            {
                value: "The brand of your first car?"
            },
            {
                value: "Your favorite city?"
            }];
    var localDataSource = new kendo.data.DataSource({
        data: questions
    });
    var dropdown = $('.dropdownlist');
        dropdown.kendoDropDownList({
            dataTextField: "value",
            dataValueField: "value",
            dataSource: localDataSource
        });

И мой HTML для отображения полей:

<input class="dropdownlist w250px" name="questions[1][question]" />

Раз 5 на каждый вопрос.


javascript datasource kendo-ui kendo-dropdown
person Mihail Ivanchev    schedule 29.11.2016    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Для достижения желаемого поведения вы можете использовать те же данные, но отдельные экземпляры DataSource, иначе вы не сможете фильтровать их по-разному для каждого DropDownList.

Вот пример, который вы можете использовать в качестве отправной точки и настроить его в соответствии со своим сценарием.

http://dojo.telerik.com/aJeHa

Используемые API включают в себя:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Related Kendo UI DropDownLists</title>

    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1118/styles/kendo.common.min.css">
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1118/styles/kendo.default.min.css">

    <script src="http://code.jquery.com/jquery-1.12.3.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2016.3.1118/js/kendo.all.min.js"></script>
  </head>
  <body>

    <p><input id="ddl1" name="ddl1" class="related-dropdown" /></p>
    <p><input id="ddl2" name="ddl2" class="related-dropdown" /></p>
    <p><input id="ddl3" name="ddl3" class="related-dropdown" /></p>

    <script>

      var data = [
        { id: 1, text: "question 1" },
        { id: 2, text: "question 2" },
        { id: 3, text: "question 3" }
      ];

      for (var j = 1; j <= data.length; j++) {
        $("#ddl" + j).kendoDropDownList({
          dataSource: {
            data: data,
            filter: {}
          },
          dataTextField: "text",
          dataValueField: "id",
          optionLabel: "Select a question",
          change: onChange
        });
      }

      function onChange(e) {
        if (e.sender.value()) {
          var otherDropDowns = $("input.related-dropdown").not(e.sender.element);
          for (var j = 0; j < otherDropDowns.length; j++) {
            var ddl = $(otherDropDowns[j]).data("kendoDropDownList");
            var newCondition = { field: "id", operator: "neq", value: e.sender.value() };
            var currentFilter = ddl.dataSource.filter();
            if (currentFilter && currentFilter.filters) {
              currentFilter.filters.push(newCondition);
              ddl.dataSource.filter(currentFilter);
            } else {
              ddl.dataSource.filter(newCondition);
            }
          }
        } else {
          // clear the freed question from the DropDownLists' filter criteria
        }
      }

    </script>

  </body>
</html>

person dimodi    schedule 29.11.2016