如何刷新kendo-ui网格自定义按钮可见性？

Question

I have multiple custom commands on a kendo ui grid and each command is supposed to be shown in sequence. When the first button is clicked the item is updated then the next button(s) should be shown. When I click a button the datasource is updated but the buttons visibility states don't change. The only way I can get the buttons to change is if I refresh the entire page.

Here is what I currently have: cshtml

@(Html.Kendo().Grid<Visitors>().Name("shippingGrid")
      .Sortable()
      .Groupable()
      .Editable(e => e.Mode(GridEditMode.InCell))
      .Scrollable(sc => sc.Endless(true))
      .Pageable(p => p.AlwaysVisible(true))
      .Resizable(r => r.Columns(true))
      .Filterable()
      .ClientDetailTemplateId("entryDetails")
      .Columns(columns =>
      {
          columns.Bound(column => column.VisitorId).Width(50);
          columns.Bound(column => column.VisitorType.Description).Editable("editMode").Width(150);
          columns.Bound(column => column.FirstName).Width(200).Editable("editMode");
          columns.Bound(column => column.LastName).Width(200).Editable("editMode");
          columns.Bound(column => column.Notes).Width(200);


          columns.Command(column =>
          {
              column.Custom("Check In").Click("btnAction_Click").Visible("btnCheckIn_Visible").HtmlAttributes(new { actionId = 3});
              column.Custom("Check Out").Click("btnAction_Click").Visible("btnCheckOut_Visible").HtmlAttributes(new { actionId = 4 });

              column.Custom("Start Loading").Click("btnAction_Click").Visible("btnStartLoadingOrUnloading_Visible").HtmlAttributes(new { actionId = 5});
              column.Custom("Finish Loading").Click("btnAction_Click").Visible("btnFinishLoading_Visible").HtmlAttributes(new { actionId = 6 });

              column.Custom("Start Unloading").Click("btnAction_Click").Visible("btnStartLoadingOrUnloading_Visible").HtmlAttributes(new { actionId = 7 });
              column.Custom("Finish Unloading").Click("btnAction_Click").Visible("btnFinishUnloading_Visible").HtmlAttributes(new { actionId = 8 });
          }).Width(100).MinResizableWidth(100);
      })
      .DataSource(ds => ds.Ajax()
          .Read(r => r.Url("ShippingOffice?handler=Read").Data("forgeryToken"))
          .Model(m => m.Id(id => id.VisitorId)
          )
      )
      .Pageable())

<script type="text/javascript">
var timeEntriesList = @Html.Raw(JsonConvert.SerializeObject(ViewBag.visitorTimeEntries));

function btnCheckIn_Visible(dataItem) {
    if (timeEntriesList.length > 0) {
        var lastTimeEntryIndex = timeEntriesList.length - 1 - timeEntriesList.slice().reverse().findIndex(t => t.VisitorId === dataItem.VisitorId);
        if (timeEntriesList[lastTimeEntryIndex].EntryTypeId === 1) {
            return true;
        }
        return false;
    }
    return false;
}

function btnCheckOut_Visible(dataItem) {
    if (timeEntriesList.length > 0) {
        var lastTimeEntryIndex = timeEntriesList.length - 1 - timeEntriesList.slice().reverse().findIndex(t => t.VisitorId === dataItem.VisitorId);
        if (timeEntriesList[lastTimeEntryIndex].EntryTypeId === 6 || timeEntriesList[lastTimeEntryIndex].EntryTypeId === 8) {
            return true;
        }
        return false;
    }
    return false;
}

function btnStartLoadingOrUnloading_Visible(dataItem) {
    if (timeEntriesList.length > 0) {
        var lastTimeEntryIndex = timeEntriesList.length - 1 - timeEntriesList.slice().reverse().findIndex(t => t.VisitorId === dataItem.VisitorId);
        if (timeEntriesList[lastTimeEntryIndex].EntryTypeId === 3) {
            return true;
        }
        return false;
    }
    return false;
}

function btnFinishLoading_Visible(dataItem) {
    if (timeEntriesList.length > 0) {
        var lastTimeEntryIndex = timeEntriesList.length - 1 - timeEntriesList.slice().reverse().findIndex(t => t.VisitorId === dataItem.VisitorId);
        if (timeEntriesList[lastTimeEntryIndex].EntryTypeId === 5) {
            return true;
        }
        return false;
    }
    return false;
}

function btnFinishUnloading_Visible(dataItem) {
    if (timeEntriesList.length > 0) {
        var lastTimeEntryIndex = timeEntriesList.length - 1 - timeEntriesList.slice().reverse().findIndex(t => t.VisitorId === dataItem.VisitorId);
        if (timeEntriesList[lastTimeEntryIndex].EntryTypeId === 7) {
            return true;
        }
        return false;
    }
    return false;
}

External js

function btnAction_Click(e) {
var checkInVisitor = this.dataItem($(e.currentTarget).closest("tr"));
var shippingGrid = $("#shippingGrid").data("kendoGrid");
var shippingGridDataSource = shippingGrid.dataSource;

$.ajax({
    type: "POST",
    url: "/FrontDesk/VisitorAction_Update",
    data: {
        VisitorId: checkInVisitor.VisitorId,
        EntryTypeId: e.currentTarget.attributes.actionId.value,
        TimeStamp: new Date(),
        Notes: checkInVisitor.Notes
    },
    failure: function(response) {
        alert(response);
    },
    success: function () {
        shippingGridDataSource.sync();
        shippingGridDataSource.read();
    }
});

I have tried adding shippingGrid.refresh(); but that didn't work either. Is there a way to have the buttons visibility states change after the grid refreshes, without having to refresh the entire page?

Answer 1

I was able to figure it out. The ViewBag doesn't update after the page is loaded and realized I wasn't returning anything after the POST.

Here's what I changed:

        success: function (result) {
        timeEntriesList.push(result);
        shippingGridDataSource.sync();
        shippingGridDataSource.read();
    }

After adding that to the timeEntriesList the buttons visibility would change.