Hi,
I have a Kendo Grid as per the code below
@(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"))
)
)
I have a partial that has a sortable element in it also as below.
@(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"))
)
The sortable element works great, the majority of the time.
When performing a re-order, opening a kendo window and performing a save action the grid is refreshed with the updated data in a TypeScript class as per code below.
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;
}
This saves, and reorders teh grid accordingly by the DisplayOrder which is great and what I need. However, when I try and reorder anything else after this the reordered item gives me the new index, but isnt actually changed on the grid.
However, if I refresh the grid through other means, the re-oredering works perfectly.
So, my question, as I need to keep the display order as is prior the the save, how do I acheive this.
Things I have tried
- Updating the display order on the refreshed gird - suspected cause of the problem.
- Created a new controller that returns the partial and inisialises the control again - No effect
- Resetting the uid (not a preferred option, but thought I would try and see if it was uid) specific. - No effect
2 Answers, 1 is accepted
I have investigated the provided code snippets and I have noticed that there is a read request initiated after the save is done. It is important to point out that this would cause the grid to rebind, which, in turn, would re-render the whole content of the grid. And the "tr" elements would appear as the same but they would not be. Their data-uid attributes would have changed as well.
Generally, the order of the Sortable items could be persisted as shown in the article below:
https://docs.telerik.com/kendo-ui/controls/interactivity/sortable/overview#order-persistence
In case the issue is still present, is it possible for you to modify the example from the live demo below and send it back to me?
https://demos.telerik.com/aspnet-mvc/sortable/integration-grid
Thank you for your cooperation in advance.
Best regards,
Tsvetomir
Progress Telerik
Rank 1
Hi,
Yes I am aware of the rebind and the changing uId which is why I am having to force the re-order. The reason for the read on the save is because the save is triggered through a kendo window and the grid needs to be updated with the latest updated values, but I need the order to be persisted.
I will take a look at the link you have provided and come back to you shortly to let you know if this has resolved the issue.
Kind regards
Simon