Kendogrid not refreshing

Question

I have a kendogrid that pulls data from the server and populates it. Well I have a custom button in a clienttemplate which displays at the end of each row. When I modify this row, the changes are made in the db but do not reflect in the grid.

The weirdest thing of all is when i click the button a 2nd time, it does work.

Here's the code:

$('#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')
        });
    }
});

});

Here is my grid:

@(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))
           )

Answer 1

Using read will request the data from the server and update datasource behind the grid. There will be no changes in the UI using the read method. Refresh will re-render items in grid from the current datasource. Both are required to see changes in the grid.

Answer 2

grid.refresh() "Renders all table rows using the current data items." http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#methods-refresh

I'm not seeing any code that causes the dataSource to re-read from the server.

Try doing

 grid.dataSource.read();

instead, which will always re-hit server action configured in the dataSource.transport.read.

You should provide your grid configuration code to provide more details.