2014-11-03 71 views
0

我有一个kendo网格有数据通过AJAX填充。Kendo UI网格弹出AJAX数据后现在工作

如果我拿出AJAX一切都很好,但是当我通过AJAX填充数据时,编辑按钮不会弹出。

网格本身看起来是这样的:

<div id="DefinedLevelsGridContainer"> 
@(Html.Kendo().Grid(Model.Where(x => x.OrgLevel == 0).First().DefinedFieldsList) 
    .Name("DefinedlevelsGrid") 
    .Columns(columns => 
    { 
     columns.Bound(x => x.FieldName).Title("Name"); 
     columns.Bound(x => x.FieldTypeText).Title("Type"); 
     columns.Bound(x => x.isMandatory).Title("Mandatory"); 
     columns.Bound(x => x.DefaultValue).Title("Default Value"); 
     columns.Bound(x => x.UpdatedOn).Title("Updated"); 
     columns.Command(command => { command.Edit(); command.Destroy(); }); 
    }) 
    .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("_OrgDefinedFieldEdit")) 
    .Pageable() 
    .Sortable() 
    .DataSource(dataSource => dataSource 
    .Server() 
    .Model(model => model.Id(x => x.FieldId)) 
    .Update(update => update.Action("Update", "Home")) 
    .Destroy(destroy => destroy.Action("Destroy", "Home")) 
    ) 
) 

正如你可以看到我填充它,默认情况下,与第一项数据的列表。

然后我有这样的:

$(window).load(function() { 
    $(".LevelSelector:first").click(); 
}); 

它调用下面的函数:

$(".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); 
      } 
     }); 
    }); 

第一部分填充的页面的另一部分,然后它一个AJAX调用去弄数据。成功后,它会填充网格。

这一切都有效。

但是当我点击编辑它不加载网格。它确实移动到页面的顶部,所以我知道它正在发射。

如果我通过AJAX停止前人群,它会加载模板,所以我知道该模板没有错。

有没有人有任何想法?

非常感谢提前。

回答

1

在vcase的任何人看到这个,我通过将.Server更改为.Ajax来修复它。

因此,这将是这样的:

@(Html.Kendo().Grid(Model.Where(x => x.OrgLevel == 0).First().DefinedFieldsList) 
.Name("DefinedlevelsGrid") 
.Columns(columns => 
{ 
    columns.Bound(x => x.FieldName).Title("Name"); 
    columns.Bound(x => x.FieldTypeText).Title("Type"); 
    columns.Bound(x => x.isMandatory).Title("Mandatory"); 
    columns.Bound(x => x.DefaultValue).Title("Default Value"); 
    columns.Bound(x => x.UpdatedOn).Title("Updated"); 
    columns.Command(command => { command.Edit(); command.Destroy(); }); 
}) 
.Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("_OrgDefinedFieldEdit")) 
.Pageable() 
.Sortable() 
.DataSource(dataSource => dataSource 
.Ajax() //<------- Changed to .Ajax() 
.Model(model => model.Id(x => x.FieldId)) 
.Update(update => update.Action("Update", "Home")) 
.Destroy(destroy => destroy.Action("Destroy", "Home")) 
)