title: Kendo UI grid popup not working after AJAX data
body: <p>I have a kendo grid which has data populated via AJAX. </p>
  
  <p>If I take out the AJAX all is fine but when I populate the data via AJAX the edit button doesn't bring up the pop up. </p>
  
  <p>The grid itself looks like this: </p>
  
  <pre><code>&lt;div id="DefinedLevelsGridContainer"&gt;
  @(Html.Kendo().Grid(Model.Where(x =&gt; x.OrgLevel == 0).First().DefinedFieldsList)
      .Name("DefinedlevelsGrid")
      .Columns(columns =&gt;
      {
          columns.Bound(x =&gt; x.FieldName).Title("Name");
          columns.Bound(x =&gt; x.FieldTypeText).Title("Type");
          columns.Bound(x =&gt; x.isMandatory).Title("Mandatory");
          columns.Bound(x =&gt; x.DefaultValue).Title("Default Value");
          columns.Bound(x =&gt; x.UpdatedOn).Title("Updated");
          columns.Command(command =&gt; { command.Edit(); command.Destroy(); });
      })
      .Editable(editable =&gt; editable.Mode(GridEditMode.PopUp).TemplateName("_OrgDefinedFieldEdit"))
      .Pageable()
      .Sortable()
      .DataSource(dataSource =&gt; dataSource
      .Server()
      .Model(model =&gt; model.Id(x =&gt; x.FieldId))
      .Update(update =&gt; update.Action("Update", "Home"))
      .Destroy(destroy =&gt; destroy.Action("Destroy", "Home"))
      )
  )
  </code></pre>
  
  <p></p>
  
  <p>As you can see I am populating it, by default, with the first item in a list of data. </p>
  
  <p>I then have this: </p>
  
  <pre><code>$(window).load(function () {
      $(".LevelSelector:first").click();
  });
  </code></pre>
  
  <p>Which calls the following function: </p>
  
  <pre><code>$(".LevelSelector").click(function () {
          var rootString = $(this).html();
          var splitString = rootString.split("-");
          var levelGuid = $(this).attr("LevelGuid").toString();
  
          $("#LevelEditName").text($.trim(splitString[0]));
          $("#LevelEditInput").val($.trim(splitString[1]));
          $("#CreatedOn").text($(this).attr("CreatedDate"))
          $("#CreatedBy").text($(this).attr("CreatedBy"))
          $("#UpdatedOn").text($(this).attr("UpdatedDate"))
          $("#SelectedLevelGuid").text(levelGuid)
  
          var Url = '@Url.Action("GetLevelFields", "OrganisationAJAX")' + '?LevelGuid=' + levelGuid;
  
          $.ajax({
              url: Url,
              contentType: "application/json; charset=utf-8",
              type: 'POST',
              context: this,
              timeout: 60000,
              dataType: 'json',
              tryCount: 0,
              retryLimit: 3,
              success: function (data) {
  
                  var grid = $("#DefinedlevelsGrid").data("kendoGrid");
                  grid.dataSource.data(data);
              },
              error: function (httpRequest, textStatus, errorThrown) {
                  $(".Message").text("Error: " + textStatus + " " + errorThrown);
              }
          });
      });
  </code></pre>
  
  <p>The first part is populating another part of the page and then it does an AJAX call to go and get the data. On success it populates the grid. </p>
  
  <p>That all works. </p>
  
  <p>But when I click on edit it doesn't load the grid. It does move to the top of the page so I know it is firing. </p>
  
  <p>If I stop the pre population by AJAX it does load up the template so I know the template isn't at fault. </p>