Как обновить видимость пользовательских кнопок сетки кендо-пользовательского интерфейса? - PullRequest
Новая
       15

Как обновить видимость пользовательских кнопок сетки кендо-пользовательского интерфейса?

0 голосов
/ 27 марта 2019

У меня есть несколько пользовательских команд в сетке пользовательского интерфейса kendo, и каждая команда должна отображаться последовательно. Когда первая кнопка нажата, элемент обновляется, тогда должны быть показаны следующие кнопки. Когда я нажимаю кнопку, источник данных обновляется, но состояния видимости кнопок не меняются. Единственный способ получить кнопки для изменения - это обновить всю страницу.

Вот что у меня сейчас есть: 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;
}

Внешний 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();
    }
});

Я попытался добавить shippingGrid.refresh (); , но это тоже не сработало. Есть ли способ изменить состояние видимости кнопок после обновления сетки, не обновляя всю страницу?

1 Ответ

0 голосов
/ 29 марта 2019

Я смог понять это.ViewBag не обновляется после загрузки страницы и понял, что я ничего не возвращал после POST.

Вот что я изменил: 

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

После добавления этого в timeEntriesListвидимость кнопок изменилась бы.

...