Kendogrid不爽

时间:2016-10-25 16:07:42

标签: javascript jquery ajax kendo-ui

我有一个kendogrid,它从服务器中提取数据并填充它。好吧,我在clienttemplate中有一个自定义按钮,显示在每行的末尾。当我修改此行时,更改将在数据库中进行,但不会反映在网格中。

最奇怪的是,当我第二次点击按钮时,它确实有效。

以下是代码:

$('#custom-generic-modal.modal-content').off('click', '#btnSave').on('click', '#btnSave', function () {

var permissions = $('#divNav .k-state-selected').attr('data-permissionid');
var currentPage = grid.dataSource.page();

$.ajax({
    //global: false,
    type: 'GET',
    url: 'Allergy/AllergiesTab?permissions=' + permissions,
    async: 'false',
    success: function (page) {
        $("#PageDiv").html(page);
        console.log('success')
    },
    complete: function () {
        $.get("Page/PageTab?permissions=" + permissions, function(page) {
            $("#PageDiv").html(page);
            helpers.notify("Retraction successful.", "success");
        }).done(function() {
            var grid = $("#Grid").data("kendoGrid");
            grid.dataSource.page(currentPage);
            grid.refresh();
            console.log('complete')
        });
    }
});

});

这是我的网格:

@(Html.Kendo().Grid(Model.grid)
           .Name("Grid")
           .ClientDetailTemplateId("template")
           .HtmlAttributes(new { style = "height: 450px;" })
           .Columns(c =>
               {
                   c.Bound(x => x.IsAllergy).Title("").Width("13%").ClientTemplate(@"<span class='#if(IsRetracted){#strike-through#}#'>#if (IsAllergy){#<span><b> Allergy </b></span>#}# #if (!IsAllergy){#<span><b> Sensitivity </b></span>#}# </span>");
                   c.Bound(x => x.AllergyDescription).Title("Allergen/Sensitivity").Width("24%").ClientTemplate(@"<span class='#if(IsRetracted){#strike-through#}#'>#if (AllergyDescription != null){#<span><b> #= AllergyDescription # </b></span>#}# #if (AllergyDescription == null){#<span><b> N/A </b></span>#}# </span>");
                   //AllergyType(Food,drug,ev)
                   c.Bound(x => x.AllergySeverityDescription).Title("Severity").Width("13%").ClientTemplate(@"<span class='#if(IsRetracted){#strike-through#}#'>#if (AllergySeverityDescription != null){#<span> #= AllergySeverityDescription # </span>#}# #if (AllergySeverityDescription == ''){#<span> N/A </span>#}# </span>");
                   c.Bound(x => x.AllergyReactionDescription).Title("Reaction").Width("13%").ClientTemplate(@"<span class='#if(IsRetracted){#strike-through#}#'>#if (AllergyReactionDescription != null){#<span> #= AllergyReactionDescription # </span>#}# #if (AllergyReactionDescription == ''){#<span> N/A </span>#}# </span>");
                   c.Bound(x => x.TreatmentComments).Title("Treatment Comments").Width("24%").ClientTemplate(@"<span class='#if(IsRetracted){#strike-through#}#'>#if (TreatmentComments != null){#<span> #= TreatmentComments # </span>#}# #if (TreatmentComments == null){#<span> N/A </span>#}# </span>");
                   c.Template(@<text></text>)
                       //.ClientTemplate(@" #if(!IsActive) {#<a class='notes-btn'><span class='glyphicon glyphicon-pencil'></span></a> #if(!IsRetracted) {#<a class='notes-btn' onclick='retractAllergyInit(#= PersonAllergyId #)'><span class='glyphicon glyphicon-minus-sign'></span></a>#}}#")
                    .ClientTemplate(@" #if(!IsActive) {#<a class='notes-btn'><span class='glyphicon glyphicon-pencil'></span></a> #if(!IsRetracted) {#<a class='notes-btn modal-link' href='Retract/Retract?typeId=#= PersonAllergyId #&retractType=5' data-ajax='true' data-ajax-method='GET' data-ajax-mode='replace'><span class='glyphicon glyphicon-minus-sign'></span></a>#}}#")
                   .Title("Actions").Width("12%");
               }
           )
           .Pageable(pager => pager.Messages(m => m.Empty("No Results Found")))
           .DataSource(dataSource => dataSource
                                         .Ajax()
                                         .PageSize(10)
                                         .ServerOperation(false))
           )

2 个答案:

答案 0 :(得分:1)

grid.refresh()“使用当前数据项呈现所有表行。” http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#methods-refresh

我没有看到任何导致dataSource从服务器重新读取的代码。

尝试

 grid.dataSource.read();

相反,它将始终重新命中dataSource.transport.read中配置的服务器操作。

您应该提供网格配置代码以提供更多详细信息。

答案 1 :(得分:1)

使用read将从服务器请求数据并更新网格后面的数据源。使用read方法的UI不会发生任何变化。刷新将从当前数据源重新呈现网格中的项目。两者都需要看到网格中的变化。