In Cell Grid Edit/Cancel Error

[Denise]

I've been trying to implement cell-based editing into my grid. It does work in a fashion, in that I can edit the current values present in the grid and they do save when clicking the Save Changes button. However, it does not appear to be firing the Update function correctly, which points to a function in the Controller. I know the grid is able to fire events for Read since I've applied a filter which uses a function in the Controller, and it's able to call that function without problems. It just doesn't seem to fire the Update function.

Below is the code for the table;

@{Layout = null;}


@(Html.Kendo().Grid<FiveSReporting.Models.ViewModels.SchedulingViewModel>()
      .Name("Schedule")
      .Columns(columns =>
      {
          columns.Bound(c => c.LineName);
          columns.Bound(c => c.WeekOfFirst);
          columns.Bound(c => c.WeeksBetweenEach);
      })
      .ToolBar(t => { t.Save(); })
      .Pageable()
      .Editable(e => e.Mode(GridEditMode.InCell))
      .Sortable(sortable =>
      {
          sortable.SortMode(GridSortMode.SingleColumn);
      })
      .Scrollable(scrollable => scrollable.Enabled(false))
      .DataSource(dataSource => dataSource
          .Ajax()
          .Batch(true)
          .ServerOperation(false)
          .Events(e => e.Error("error_handler"))
              .Model(m => { m.Id(s => s.ID); m.Field(s => s.LineName).Editable(false); })
          .Update(update => update.Action("Schedule_Write", "ScheduleAdminTwo"))
          .Read(read => read.Action("Schedule_Read", "ScheduleAdminTwo")
          .Data("getSchedule"))
      )
      .AutoBind(false)
)

 

I've also found that when clicking on the Cancel Changes button that it will throw an error to the console, and subsequent attempts to navigate on the grid also throw errors.This occurs when you click the Cancel Changes button just after clicking the Save Changes button. See attached screenshot for details.

Thank you ahead of time for your assistance.

[Stefan]

Hello, Denise,

Thank you for the details.

I made the same Grid and it was working as expected on my end. I can assume that we are missing a detail which is overlooked at the moment.

Could you please check the network tab is a request is made from the Grid.

Also, when the item is changed from the user, is the dirty indicator is shown to indicate that the value is changed?

As the issue seems a specific one, please provide an example where it can be observed locally and I will gladly test it and made the needed modification to it.

Thank you in advance for the collaboration.

Regards,
Stefan
Progress Telerik

[Denise]

I've done a check with the Network tab open. There is a request going through, see attached screenshot for details.

The indicator is shown when changing values. As explained before, the changes are saved to the Grid, they just aren't persisting to the database and the controller function isn't being called.

Due to the nature of our work I can't provide a full program for you to look at. However I'll include some extra code I feel might be relevant to the issue.

Below is the function that is being successfully called by the Grid;

public ActionResult Schedule_Read([DataSourceRequest]DataSourceRequest request, [Bind(Include = "YearID,SiteID,PlantID")]ScheduleSelect selection)
{
    var lines = db.Lines.Where(l => l.PlantID == selection.PlantID);
    foreach (Line l in lines)
    {
        var audit = db.AuditSchedules.Where(a => a.YearID == selection.YearID).Where(a => a.LineID == l.ID).SingleOrDefault();
        if (audit == null)
        {
            db.AuditSchedules.Add(new AuditSchedule(){ YearID = selection.YearID, LineID = l.ID});
        }
    }
    db.SaveChanges();
    var audits = db.AuditSchedules.Where(a => a.YearID == selection.YearID);
    var results = from l in lines
                  join a in audits on l equals a.Line
                  select new SchedulingViewModel() { LineName = l.LineName, LineID = l.ID, YearID = selection.YearID, WeekOfFirst = a.WeekOfFirst, WeeksBetweenEach = a.WeeksBetweenEach };

    DataSourceResult result = results.ToList().ToDataSourceResult(request);

    return Json(result, JsonRequestBehavior.AllowGet);
}

Below is the function trying to be called in the Controller (right now set to return null since I was mainly debugging to see if the function could be called).

[AcceptVerbs(HttpVerbs.Post)]
 public ActionResult Schedule_Write([DataSourceRequest]DataSourceRequest request, [Bind(Prefix="models")]IEnumerable<SchedulingViewModel> schedules){            return null; }

[Tsvetina]

Hello Denise,

The request that you showed in your screenshot looks like the initial load request of the View. The one made by the DataSource should be using the address specified in the Read configuration: ScheduleAdminTwo/Schedule_Read. Is there such a request in the Network tab when you load the Grid?

I noticed that you have specified AutoBind(false), which means that the Grid will not bind automatically on page load. It will bind when you call gridInstance.dataSource.read(), where Grid instance is the JavaScript Grid instance. Can you show us where you do this binding?

Regards,
Tsvetina
Progress Telerik

[Denise]

I can confirm that the Schedule_Read function is being called as expected. In our case, the function is called whenever the Plant selector is changed on the form. Right now this hasn't been the issue, the reading of data from the Database works exactly as expected using the Schedule_Read Action. The issue is the inability for the Grid to call the Schedule_Write Action in the Controller.

[Tsvetina]

Hello Denise,

I cannot see anything that could be causing the described problems. I am sending you a project that I created re-using the snippets you sent us where the Update method is called successfully. You will need to re-add the Kendo.Mvc.dll to it to run it.

Could you modify the project until it starts reproducing the problem(s) that you observe in your Grid? We need to be able to reproduce the issue in order to find its cause and a fix for it.

Regards,
Tsvetina
Progress Telerik

[Denise]

I've tried changing the project you sent to recreate the problem but am unable to do so. I've also made some changes to my own project based on the working snippet that you sent, which includes the following;

- Refactoring all code into a single cshtml file

- Change the model used to the more simplified one (previously I've been using data annotations combined with a parent class for my models)

- Setting the filter to always return the same set of records, bypassing the filter controls entirely

- Removing the error handler code so that the function is blank

- Renaming the table to Schedule

I've also made sure that the settings on the grid are the same as well. So far none of these have solved the issue. It's worth noting that the cancel button still produces an error. See below for the relevant Javascript that is trying to be called when this error is thrown;

 

(function(data/*``*/<br>) {<br>    var $kendoOutput, $kendoHtmlEncode = kendo.htmlEncode;<br>    with (data) {<br>        $kendoOutput = '<tr data-uid="' + (data.uid) + '" role=\'row\'><td class="' + (data && data.dirty && data.dirtyFields && data.dirtyFields['LineName'] ? ' k-dirty-cell' : '') + '" role=\'gridcell\'>' + (data && data.dirty && data.dirtyFields && data.dirtyFields['LineName'] ? '<span class="k-dirty"></span>' : '') + '' + $kendoHtmlEncode(data.LineName == null ? '' : data.LineName) + '</td><td class="' + (data && data.dirty && data.dirtyFields && data.dirtyFields['WeekOfFirst'] ? ' k-dirty-cell' : '') + '" role=\'gridcell\'>' + (data && data.dirty && data.dirtyFields && data.dirtyFields['WeekOfFirst'] ? '<span class="k-dirty"></span>' : '') + '' + $kendoHtmlEncode(data.WeekOfFirst == null ? '' : data.WeekOfFirst) + '</td><td class="' + (data && data.dirty && data.dirtyFields && data.dirtyFields['WeeksBetweenEach'] ? ' k-dirty-cell' : '') + '" role=\'gridcell\'>' + (data && data.dirty && data.dirtyFields && data.dirtyFields['WeeksBetweenEach'] ? '<span class="k-dirty"></span>' : '') + '' + $kendoHtmlEncode(data.WeeksBetweenEach == null ? '' : data.WeeksBetweenEach) + '</td></tr>';<br>    }<br>    return $kendoOutput;<br>}

[Denise]

Addenum; I've also tried changing the layout page being used from the one used in my project to the one used in your project.

[Tsvetina]

Hello Denise,

Looking at the lines of code in the Kendo UI source code that throw the error, it seems like there is a null data item in the DataSource at the time the cancel action is triggered. But I do not know what might be causing this based on the code that you sent and I am unable to debug this at this point.

Would it be possible that you strip down your project and send it to use in a private support ticket? In this way, I will be able to debug the Grid source code at the place it fails and see what is wrong with the underlying data objects. You can create a List of dummy data in the Schedule_Read and leave Schedule_Write with no particular implementation in order to decouple the Grid implementation form your actual database and send me only the code implementation without the sensitive data. It should even be possible to copy my implementation of these methods.

Regards,
Tsvetina
Progress Telerik

[Denise]

Hi Tsvetina,

I've sent a support ticket with the minimal amount of code present for you to look at.

[Tsvetina]

Hello Denise,

I just replied in the support ticket which you opened but wanted to also post here in case someone else finds this thread and has a similar question. 

The issue was coming from 0 values of the ID field. When the value of an item ID field (int type) equals 0, the Grid considers this item a new one and tries to fire a Create instead of an Update request. When editing a Grid, the field specified as a model Id field needs to have unique non-default values.
I hope that with this change, your Grid editing will start working as expected.

Regards,
Tsvetina
Progress Telerik

[Denise]

The issue was resolved in an outside ticket, but just to update this post, the issue was that I was not properly copying over the unique ID of each record. Having this attached to the records enabled me to save my edits back to the database.

Thanks for everyone's help.