Popup edit from Row Click won't save data.

6 posts, 1 answers
  1. Mbott
    Mbott avatar
    30 posts
    Member since:
    Dec 2008

    Posted 10 Sep 2019 Link to this post

    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>
  2. Mbott
    Mbott avatar
    30 posts
    Member since:
    Dec 2008

    Posted 10 Sep 2019 Link to this post

    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"

  3. Mbott
    Mbott avatar
    30 posts
    Member since:
    Dec 2008

    Posted 10 Sep 2019 Link to this post

    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();
            }
  4. Mbott
    Mbott avatar
    30 posts
    Member since:
    Dec 2008

    Posted 10 Sep 2019 in reply to Mbott Link to this post

    Oops, also, have to account for a new record by wrapping that in a conditional: if (!e.model.isNew())
  5. Answer
    Viktor Tachev
    Admin
    Viktor Tachev avatar
    2497 posts

    Posted 12 Sep 2019 Link to this post

    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.
  6. Mbott
    Mbott avatar
    30 posts
    Member since:
    Dec 2008

    Posted 13 Sep 2019 in reply to Viktor Tachev Link to this post

    Thank you very much Viktor. That is very helpful!
Back to Top