This is a migrated thread and some comments may be shown as answers.

Popup edit from Row Click won't save data.

5 Answers 841 Views

Grid

This is a migrated thread and some comments may be shown as answers.

Mbott asked on 10 Sep 2019, 01:06 PM

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

Accepted

answered on 12 Sep 2019, 11:06 AM

CustomPopupEditor.zip

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

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.