Заполнить сетку двумя значениями при привязке данных

Question

Хорошо, у меня есть сетка, в которой есть два поля, в которые я хочу добавить выбранные значения из двух выпадающих меню, но я не могу получить оба из них для добавления на одно и то же значение, либо я получаю только одно значение, либо оно добавляет строка, но не показывает значения

так выглядит код при работе с одним атрибутом

<div id="gameSelectionForm">
<div class="col-sm-12 no-pad-sides">
    <div class="col-sm-12">
        <label>@Resources.GetString("common.games"):</label>
    </div>
    <div class="row no-pad-sides">
        <div class="col-sm-4">
            <select id="games" data-role="dropdownlist" data-bind="source: allGames, value: selectedGame"
                    data-text-field="Name" data-value-field="GameId" data-option-label="Select Games"></select>
        </div>
        <div class="col-sm-3">
            <select id="rtp" data-role="dropdownlist" data-bind="source: allRtpLevels, value: selectedRtpLevel"
                    data-text-field="Level" data-value-field="RtpLevelId" data-option-label="Select RTP Level"></select>
        </div>
        <div class="col-sm-2 no-pad-left">
            <button type="button" id="AddGameBtn" data-bind="click: addGame" class="blue-button k-primary k-button button-level-height max-width">
                <span class="fa fa-plus-circle"></span>&nbsp;@Resources.GetString("common.add")
            </button>
        </div>
    </div>
    <div class="col-sm-12">
        <div id="gamesGrid" data-role="grid"
             data-sortable="true"
             data-editable="{update: false, destroy: true, confirmation: false}"
             data-columns='[{"field": "Name", "title": "@Resources.GetString("common.name")"},{"field": "Level", "title": "@Resources.GetString("common.rtplevel")"},
                            {"command": "destroy", width: 150}] '
             data-bind="source: selectedGames"
             data-scrollable="true">
        </div>
    </div>
</div>

и логика

var gameSelectionViewModel = kendo.observable({
        allGames: new kendo.data.DataSource({
            data: @Html.Raw(JsonConvert.SerializeObject(Model.GamesList)),
            schema: {
                model: {
                    id: "GameId",
                    fields: {
                        GameId: { type: "number" },
                        Name: { type: "string" }
                    }
                }
            }
        }),
        selectedRtpLevel: "",
        selectedGame: "",
        selectedGames: '@(Model.SelectedGames != null)' === 'True' ? @Html.Raw(JsonConvert.SerializeObject(Model.SelectedGames)) : new kendo.data.DataSource(),
        selectedRtpLevels: '@(Model.SelectedRtpLevel != null)' === 'True' ? @Html.Raw(JsonConvert.SerializeObject(Model.SelectedRtpLevel)) : new kendo.data.DataSource(),
        addGame: function () {
            if (gameSelectionViewModel.selectedGame === '' || gameSelectionViewModel.selectedRtpLevel === '')
                return;

            var selectedRtpLevel = gameSelectionViewModel.allRtpLevels.get(gameSelectionViewModel.selectedRtpLevel);
            var selectedRtpLevels = gameSelectionViewModel.selectedRtpLevels.data();
            var selectedGames = gameSelectionViewModel.selectedGames.data();
            var selectedGame = gameSelectionViewModel.allGames.get(gameSelectionViewModel.selectedGame);

            if (selectedGame && selectedGames.indexOf(selectedGame) < 0) {
                selectedGames.push(selectedGame)
            } else {
                warnBox('Game already exists!');
            }
        },
        allRtpLevels: new kendo.data.DataSource({
            data: @Html.Raw(JsonConvert.SerializeObject(Model.RtpConfigurations)),
            schema: {
                model: {
                    id: "RtpLevelId",
                    fields: {
                        RtpLevelId: { type: "number" },
                        Level: { type: "string" }
                    }
                }
            }
        })
    });

    // Attach view model to html
    kendo.bind($("#gameSelectionForm"), gameSelectionViewModel);

и строка, в которую он добавляет это

if (selectedGame && selectedGames.indexOf(selectedGame) < 0) {
            selectedGames.push(selectedGame)

Я пробовал все виды решений с двумя нажатиями, но это дает значения в разных строках. Я новичок в использовании кендо и не совсем понял, как его использовать. Как сделать так, чтобы selectedRtpLevel и selectedGame появлялись в сетке при вызове функции addGame?

Answer 1

Вот додзё, которое я приготовил.

http://dojo.telerik.com/oJofAgoD

Основной вывод здесь заключается в том, как вы пытаетесь сравнить и добавить игру в свой источник данных.

Я несколько упростил процесс, заменив вашу функцию addGame следующим кодом:

if (gameSelectionViewModel.selectedGame === '' || gameSelectionViewModel.selectedRtpLevel === '')
                return;


          var newgame = {Name:gameSelectionViewModel.get("selectedGame"), Level:gameSelectionViewModel.get("selectedRtpLevel")}; 

          var filteredList = gameSelectionViewModel.get("selectedGames").data().filter(function(item){
            return item.Level === newgame.Level &&  item.Name === newgame.Name;
          }); 

          console.log(filteredList); 

          if(newgame && (filteredList === undefined || filteredList.length === 0))
          {
             gameSelectionViewModel.selectedGames.add(newgame); 
          }
          else 
          {
            alert('game already added'); 
          }

Самое большое здесь то, что вы создаете объект, который находится в источнике данных, а не то, что отображается в сетке. поэтому мне обычно нравится иметь функцию, которая возвращает мне объект по умолчанию или позволяет мне создавать объект, который может вставляться в источник данных с правильными установленными свойствами.

затем, чтобы определить, находится ли вновь созданная игра в коллекции, которую я только что отфильтровал, и мы ожидаем, что отфильтрованный список будет либо неопределенным, либо иметь нулевую длину. ничего, кроме этого, и мы знаем, что у нас уже есть этот элемент в коллекции, поэтому не добавляйте его.