This is a migrated thread and some comments may be shown as answers.
Popup edit from Row Click won't save data.
5 Answers 64 Views
This is a migrated thread and some comments may be shown as answers.
Mbott
Top achievements
Rank 1
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

Sort by
0
Mbott
Top achievements
Rank 1
answered on 10 Sep 2019, 01:24 PM

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"

0
Mbott
Top achievements
Rank 1
answered on 10 Sep 2019, 03:38 PM

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();
        }
0
Mbott
Top achievements
Rank 1
answered on 10 Sep 2019, 03:49 PM
Oops, also, have to account for a new record by wrapping that in a conditional: if (!e.model.isNew())
0
Accepted
Viktor Tachev
Telerik team
answered on 12 Sep 2019, 11:06 AM

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.
0
Mbott
Top achievements
Rank 1
answered on 13 Sep 2019, 03:04 PM
Thank you very much Viktor. That is very helpful!
Tags
Grid
Asked by
Mbott
Top achievements
Rank 1
Answers by
Mbott
Top achievements
Rank 1
Viktor Tachev
Telerik team
Share this question
or