In Cell Grid Edit/Cancel Error

12 posts, 0 answers
  1. Denise
    Denise avatar
    7 posts
    Member since:
    May 2017

    Posted 20 Feb 2018 Link to this post

    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.

  2. Stefan
    Admin
    Stefan avatar
    2960 posts

    Posted 21 Feb 2018 Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Denise
    Denise avatar
    7 posts
    Member since:
    May 2017

    Posted 22 Feb 2018 Link to this post

    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; }
  4. Tsvetina
    Admin
    Tsvetina avatar
    2481 posts

    Posted 26 Feb 2018 Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. Denise
    Denise avatar
    7 posts
    Member since:
    May 2017

    Posted 27 Feb 2018 Link to this post

    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.
  6. Tsvetina
    Admin
    Tsvetina avatar
    2481 posts

    Posted 28 Feb 2018 Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  7. Denise
    Denise avatar
    7 posts
    Member since:
    May 2017

    Posted 06 Mar 2018 in reply to Tsvetina Link to this post

    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>}
  8. Denise
    Denise avatar
    7 posts
    Member since:
    May 2017

    Posted 06 Mar 2018 in reply to Tsvetina Link to this post

    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.
  9. Tsvetina
    Admin
    Tsvetina avatar
    2481 posts

    Posted 07 Mar 2018 Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  10. Denise
    Denise avatar
    7 posts
    Member since:
    May 2017

    Posted 12 Mar 2018 in reply to Tsvetina Link to this post

    Hi Tsvetina,

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

  11. Tsvetina
    Admin
    Tsvetina avatar
    2481 posts

    Posted 12 Mar 2018 Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  12. Denise
    Denise avatar
    7 posts
    Member since:
    May 2017

    Posted 13 Mar 2018 Link to this post

    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.

Back to Top