CODEWITHSUNDEEP
javascriptkendo-uidatasourcekendo-dropdown
Mihail Ivanchev
Mihail Ivanchev

Reputation: 425

Multiple Dropdown Lists with one DataSource Kendo

I have a page that provides the user 5 dropdown lists with Security Questions. They are set via a local DataSource object, that is basically 10 questions in an object. I want to bind all 5 dropdown lists to the same DataSource, and one Question is selected, remove it from the DataSource, so you can't select it for any of the next questions. Here is my code so far:

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
        });

And my HTML to render the fields:

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

Times 5 for every question.

Upvotes: 0

Views: 2071

Answers (1)

dimodi
dimodi

Reputation: 4139

To achieve the desired behavior, you can use the same data, but separate DataSource instances, otherwise you will not be able to filter them differently for each DropDownList.

Here is an example that you can use as a starting point and customize it further to match your scenario.

http://dojo.telerik.com/aJeHa

Used APIs include:

<!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>

Upvotes: 2

Related Questions