I have popup edit mode enabled for my grid. Instead of using the native edit command button, I implemented row click to fire the edit command.
This works and the popup with my custom template shows. However, when I make changes to the data and click the Update button, the window closes, but the data doesn't get updated. My action in the controller is never hit. I then tried attaching to the Save event then calling a javasript method, but not sure how to persist data from there.
@section Scripts{ <script type="text/javascript"> function onChange(e) { var grid = e.sender; var currentDataItem = grid.dataItem(this.select()); grid.editRow(currentDataItem); } function onSave(e) { var grid = e.sender; var currentDataItem = grid.dataItem(this.select()); alert(currentDataItem["Details"]); // what to do here to persist changes?? } </script>}
@Html.Kendo().Grid(Model.Notes).Name("PermitNotes").DataSource(dataSource => dataSource.Ajax().Model(model => model.Id("LCARSKey")) .Update(update => update.Action("PermitNotes_Update", "Permits")) .Read(read => read.Action("Sorting_PermitNotes_Read", "Permits")) .Destroy(update => update.Action("PermitNotes_Delete", "Permits")) .Create(create => create.Action("PermitNotes_Create", "Permits"))).Columns(columns => { columns.Command(cmd => { cmd.Destroy(); }).Width("50px"); columns.Bound(p=>p.Details); columns.Bound(p => p.Name).Title("User"); columns.Bound(p => p.DateCreated).Title("Date"); }).Sortable(sortable => sortable.AllowUnsort(false)).Selectable(selectable => selectable.Mode(GridSelectionMode.Single).Enabled(true) .Type(GridSelectionType.Row)).ToolBar(toolbar => {toolbar.Custom().Text(@Html.IconEmoji("arrowLeft1").ToString()).Url("javascript:window.history.back();").HtmlAttributes(new {title="Go Back."}); toolbar.Create().Text("Add New Note").IconClass("").HtmlAttributes(new {hexkey=@Model.LcarsPermit.ObjectKey.ToHexKey()}); }).Editable(e=> { e.Mode(GridEditMode.PopUp);e.TemplateName("PermitNote");e.Enabled(true);}).Events(ev=> { ev.Change("onChange");ev.Save("test"); })
Here is my custom template, only only one input
<html><head> <meta name="viewport" content="width=device-width" /> <title>PermitNote</title> <style type="text/css"> A.k-primary { color: #FFF !important; } </style></head><body> <div class="m-3"> <div class="float-left mr-2">Details: </div> <div class="float-left">@Html.TextArea("Details", new { style = "width:250px;", rows = "3", cols = "100" })</div> </div></body></html>5 Answers, 1 is accepted
Rank 1
Also, I see there is a javasctipt error being thrown in Kendo.all.min.js. when clicking the update or cancel buttons in the popup.
"Uncaught RangeError: Maximum call stack size exceeded"
Rank 1
Okay, I was able to get it to work. I had to set the dataitem column value to that of the update form. Then marked the dataitem dirty and called the datasource sync method.
Here is my save function in case anyone else has a similar issue.
function onSave(e) { var grid = e.sender; var currentDataItem = grid.dataItem(this.select()); currentDataItem["Details"] = $("#Details").val(); currentDataItem.dirty = true; grid.dataSource.sync(); }
Rank 1
Hi,
Thank you for the description of the scenario and the provided code.
The error that you are seeing is observed because when the item is updated the change event is raised again, and in turn the code will attempt to open the row for editing again.
In order to avoid the behavior I suggest using the click event of the table row element in the Grid for opening the popup window. The code would look similar to this:
$(function () {
$("#PermitNotes tbody").on("click", "tr", function (e) {
var grid = $("#PermitNotes").getKendoGrid();
var clickedRow = $(e.currentTarget);
grid.editRow(clickedRow);
});
});
Then you would be able to save the changes by clicking Update button without additional code. I am also attaching a sample project where the approach is implemented.
With that said, I noticed that the Model is passed directly to the Grid and also the DataSource is configured for Ajax binding. Note that such configuration could cause unexpected behavior from the Grid in some scenarios. I would recommend configuring the Grid like in the attached example.
Regards,
Viktor Tachev
Progress Telerik
Rank 1