title: Search box. Kendo UI. Grid
body: <p>I have some problems. I want to find the object by its id. The method which find the person by id works, i've tested it! The action method in controller is too works, but in kendo ui grid do not render data.
  <strong>My Kendo grid looks like that:</strong></p>
  
  <pre><code>@(Html.Kendo().Grid&lt;PersonViewModel&gt;()
               .Name("SearchPersonGrid")
               .ToolBar(toolBar =&gt;
               {
               toolBar.Template(@&lt;text&gt;
                  &lt;div class="toolbar"&gt;
                      &lt;div class="row"&gt;
                          &lt;div class="col-md-4"&gt;
                              &lt;div class="input-group"&gt;
                                  &lt;span class="input-group-addon"&gt;&lt;span class="glyphicon glyphicon-search" aria-hidden="true"&gt;&lt;/span&gt;&lt;/span&gt;
                                  &lt;input type="text" class="form-control" id='searchBox'&gt;
                                  &lt;span class="input-group-btn"&gt;
                                      &lt;button class="btn btn-default" type="button" id="test"&gt;&lt;span class="glyphicon glyphicon-refresh" aria-hidden="true"&gt;&lt;/span&gt;&lt;/button&gt;
                                  &lt;/span&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/text&gt;);
               })
                       .Columns(columns =&gt;
                       {
                           columns.Bound(column =&gt; column.Id);
                           columns.Bound(column =&gt; column.Name);
                           columns.Bound(column =&gt; column.Surname);
                           columns.Bound(column =&gt; column.Age);                                       
                       })
                       .DataSource(dataSource =&gt; dataSource
                       .Ajax()                                    
                       .Read(read =&gt; read.Action("FindPersonById", "PersonSettings"))                                     
                       .Selectable(selectTable =&gt; selectTable
                       .Mode(GridSelectionMode.Single)
                       .Type(GridSelectionType.Row))
                       .Editable(editTable =&gt; editTable.Mode(GridEditMode.InLine))
                       .Pageable()
                       .Sortable()
                       )
  </code></pre>
  
  <p><strong>My script looks like that:</strong></p>
  
  <pre><code>    $(document).ready(function () {  
      $("#searchBox").keypress(function () {
          searchClick();
      });            
  });
  
  function searchClick() {
      var searchBox = $("#searchBox").val();
      var data = {
          "personId": searchBox
      };
      var urlPath = '@Url.Action("FindPersonById", "PersonSettings")';
      $.ajax({
          type: "POST",
          url: urlPath,
          data: JSON.stringify(data),
          contentType: "application/json; charset=utf-8",
          dataType: "html",
          success: function (jsonData) {
              var grid = $('#SearchEventGrid').data('kendoGrid').dataSource.data([]);
              $("SearchEventGrid").data('kendoGrid').DataSource.data(jsonData.Data);
          },
      });
  }
  </code></pre>
  
  <p>The debugger says me that error on: $("SearchEventGrid").data('kendoGrid').DataSource.data(jsonData.Data);
  <strong>Uncaught TypeError: Cannot read property 'dataSource' of undefined</strong>
  I want just find the object and fill him the grid!</p>