title: Fill grid with two values on data-bind
body: <p>Okay so i got a grid that has two fields that i want to add the selected values from two dropdowns on but i am unable to get both of them to get added on the same value either i only get one value or it adds a line but shows no value</p>
  
  <p>this is how the code looks while working with one attribute</p>
  
  <pre><code>&lt;div id="gameSelectionForm"&gt;
  &lt;div class="col-sm-12 no-pad-sides"&gt;
      &lt;div class="col-sm-12"&gt;
          &lt;label&gt;@Resources.GetString("common.games"):&lt;/label&gt;
      &lt;/div&gt;
      &lt;div class="row no-pad-sides"&gt;
          &lt;div class="col-sm-4"&gt;
              &lt;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"&gt;&lt;/select&gt;
          &lt;/div&gt;
          &lt;div class="col-sm-3"&gt;
              &lt;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"&gt;&lt;/select&gt;
          &lt;/div&gt;
          &lt;div class="col-sm-2 no-pad-left"&gt;
              &lt;button type="button" id="AddGameBtn" data-bind="click: addGame" class="blue-button k-primary k-button button-level-height max-width"&gt;
                  &lt;span class="fa fa-plus-circle"&gt;&lt;/span&gt;&amp;nbsp;@Resources.GetString("common.add")
              &lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-sm-12"&gt;
          &lt;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"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>and the logic</p>
  
  <pre><code>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 &amp;&amp; selectedGames.indexOf(selectedGame) &lt; 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);
  </code></pre>
  
  <p>and the line were it adds is </p>
  
  <pre><code>if (selectedGame &amp;&amp; selectedGames.indexOf(selectedGame) &lt; 0) {
              selectedGames.push(selectedGame)
  </code></pre>
  
  <p>I have been trying all sort of solution with two pushes but that gives values on different rows. i am new to using kendo and haven't quite wrapped my head around how to use it. How can i ge both the selectedRtpLevel and selectedGame to appear in the grid when i call the addGame function?</p>