Question

根据下面的代码，我有一个剑道网格

 @(Html.Kendo().Grid<ReportCompetencyViewModel>()
     .Name("listGrid")
     .BindTo(Model.ReportCompetency.OrderBy(x => x.DisplayOrder))
     .Columns(columns =>
     {
         columns.Bound(c => c.Code).ClientHeaderTemplate("Code");
         columns.Bound(c => c.DisplayName).ClientHeaderTemplate("Description");
         columns.Bound(c => c.IEC).ClientHeaderTemplate("IEC");
         columns.Bound(c => c.Active)

             .ClientTemplate("#if(Active) {# <i class='fas fa-check'></i>  # } else {# <i class='fas fa-times'></i> #} #")
             .ClientHeaderTemplate("Active")
             .HtmlAttributes(new { @class = "text-center" })
             .Width(100);

     })
     .Pageable(pageable => pageable
         .Refresh(true)
         .PageSizes(true)
         .ButtonCount(5))
     .Sortable()
     .Filterable()
     .Groupable()
     .NoRecords(n => n.Template("<p>There are no records to display.</p>"))
     .HtmlAttributes(new { style = "width:100%;" })
     .Selectable(selectable => selectable
         .Mode(GridSelectionMode.Single)
         .Type(GridSelectionType.Row))
     .Events(events => events
         .Change("lu.onChange")
     )
     .Pageable(p =>
     {
         p.PageSizes(new[] { 5, 10, 30, 50, 100 });
     })
     .DataSource(dataSource => dataSource
         .Ajax()
         .Group(g => g.Add(x => x.IEC))
         .PageSize(50)
         .ServerOperation(false)
         .Read(r => r.Action("RefreshCompetenciesGridData", "ReportLookup").Data("lu.sendAntiForgery"))

     )
)

我也有一个带有可排序元素的部分，如下所示。

@(Html.Kendo().Sortable()
          .For($"#{@Model.GridId}")
          .Filter("table > tbody > tr")
          .Cursor("move")
          .PlaceholderHandler("sg.placeholder")
          .ContainerSelector($"#{Model.GridId} tbody")
          .Events(events => events.Change("sg.onChange"))
)

onchange事件为

 onChange = (e: any) => {
        var grid: kendo.ui.Grid = $("#" + this.gridId).data("kendoGrid"),
            skip = grid.dataSource.skip(),
            oldIndex = e.oldIndex + skip,
            newIndex = e.newIndex + skip,
            data = grid.dataSource.data(),
            dataItem = grid.dataSource.getByUid(e.item.data("uid"));
        grid.dataSource.remove(dataItem);
        grid.dataSource.insert(newIndex, dataItem);

        console.log(newIndex);

        if (this.showSaveNotification && $("#" + this.warningDivId).length) {
            $("#" + this.warningDivId).slideDown();
            this.showSaveNotification = false;
        }
    }

sortable元素在大多数情况下都很好用。

执行重新排序，打开剑道窗口并执行保存操作时，将按照下面的代码使用TypeScript类中的更新数据刷新网格。

save = (model: any) => {
var _self = this;

var girdOrderArray = new Array();

if ($("#grid-reorder-warning").length && $("#grid-reorder-warning").is(":visible")) {
    var grid = $("#" + this.girdName).data("kendoGrid");
    var dataItems = grid.dataItems() as any;
    $.each(dataItems,
        (idx: number, dataItem) => {
            var di = idx + 1;
            var id = dataItem.id === undefined ? dataItem.Id : dataItem.id; // Changing the display order appears to also change the dataItem from Id to id. 
            girdOrderArray.push({ Id: id, DisplayOrder: di });
        });

}

var da = new Tmsp.AjaxDataAccessLayer(Tmsp.Enums.AjaxCallType.Post,
    Tmsp.Enums.AjaxDataType.Json,
    this.saveUrl,
    JSON.stringify(model),
    "application/json; charset=utf-8",
    { "RequestVerificationToken": $('input[name="__RequestVerificationToken"]').val() },
    true, true);

da.ajaxCall(data => {

    _self.closeWindow();

    if ($("#grid-reorder-warning").is(":visible")) {
        grid.dataSource.read().then(() => {
            var dataItems = grid.dataItems();
            var arr = new Array() as any;
            $.each(dataItems,
                (idx, dataItem: any) => {
                    var id = dataItem.Id === null ? dataItem.id : dataItem.Id;
                    var gridOrderObj = jQuery.grep(girdOrderArray,
                        function (gridOrderObj: any) { return gridOrderObj.Id == id });
                    dataItem.set("DisplayOrder", gridOrderObj[0].DisplayOrder);
                });

            grid.dataSource.sort({ field: "DisplayOrder", dir: "Desc" });
        });

    } else {
        _self.refreshGrid();
    }

    return false;

}, (xhr, status, errorThrown) => {
    console.log(xhr);
    console.log(status);
    console.log(errorThrown);
});

return false;
}

这可以保存并通过DisplayOrder相应地对网格重新排序，这很好而且我需要。但是，当我尝试在此之后对其他任何东西进行重新排序时，重新排序的项为我提供了新索引，但实际上并没有在网格上更改。

但是，如果我通过其他方式刷新网格，则重新输入非常有效。

所以，我的问题是，由于需要保持保存之前的显示顺序，我该如何实现这一点。

我尝试过的事情

在刷新的网格上更新显示顺序-可能是问题的原因。
创建了一个新的控制器，该控制器返回部分控制器并再次初始化控件-无效
重置特定于uid（不是首选选项，但我想尝试查看它是否为uid）。 -没有效果

Answer 1

啊哈！！！

我已经找到了答案，而Telerik并不容易找到做事的方法。

使用我在这里https://docs.telerik.com/kendo-ui/controls/interactivity/sortable/how-to/persist-order-in-localstorage的链接，我能够找到保持状态所需的代码。

我相信上周我的尝试之一是，尽管并不完美，但实际上我确实很接近。

这是on change事件现在的外观

onChange = (e: any) => {
    var grid: kendo.ui.Grid = $("#" + this.gridId).data("kendoGrid"),
    skip = grid.dataSource.skip(),
    oldIndex = e.oldIndex + skip,
    newIndex = e.newIndex + skip,
    data = grid.dataSource.data(),
    dataItem = grid.dataSource.getByUid(e.item.data("uid"));
    grid.dataSource.remove(dataItem);
    grid.dataSource.insert(newIndex, dataItem);

    console.log(newIndex);
    localStorage.setItem("sortableData", kendo.stringify(data)); //set the updated in local storage

 if (this.showSaveNotification && $("#" + this.warningDivId).length) {
        $("#" + this.warningDivId).slideDown();
        this.showSaveNotification = false;
    }
}

这里的新行是

localStorage.setItem("sortableData", kendo.stringify(data)); //set the updated in local storage

新的保存和刷新围栏如下

saveNewOrder = () => {

var model = new Array();
var grid: kendo.ui.Grid = $("#" + this.gridId).data("kendoGrid");
var _self = this;
var dataItems = grid.dataItems() as any;
$.each(dataItems,
    (idx : number, dataItem) => {
        var di = idx + 1;
        var id = dataItem.Id === null ? dataItem.id : dataItem.Id;
        model.push({ Id: id , DisplayOrder: di});
    });

var da = new AjaxDataAccessLayer(Tmsp.Enums.AjaxCallType.Put,
    Tmsp.Enums.AjaxDataType.Json,
    this.saveUrl,
    JSON.stringify(model),
    "application/json; charset=utf-8",
    { "RequestVerificationToken": $('input[name="__RequestVerificationToken"]').val() },
    true,
    true);

da.ajaxCall(data =>{

    _self.refreshGridOrder();

}, (xhr, textStatus, errorThrown) => {
    ////console.log(xhr);
    ////console.log(textStatus);
    ////console.log(errorThrown);
 });

}

refreshGridOrder = () => {
    var grid = $("#" + this.gridId).data("kendoGrid");


    grid.dataSource.read().then(() => {
        var data = JSON.parse(localStorage.getItem("sortableData"));
        grid.dataSource.data(data);
        $("#" + this.warningDivId).slideUp();
        this.showSaveNotification = true;
 });
}

要记住的另一件事是，由于它在多个位置使用，因此还应在准备好文档时清除本地存储。

Kendo可排序/集成-网格-特定刷新后不排序

1 个答案: