What does the Toolbar > Cancel Changes do under the hood?

0 Answers 86 Views
Grid Toolbar
Richard
Top achievements
Rank 1
Richard asked on 02 Sep 2021, 10:19 AM | edited on 02 Sep 2021, 12:09 PM

I have the below example:

As you can see, I check and pre Save Changes, everything works ok. I check, hit Cancel Changes and we get back to its original state.

After I save/commit to the db and then hit cancel changes, the grid updates some check boxes (incorrectly) and also updates the items.

What's going on here?!

Here's my grid code


@(Html.Kendo().Grid<BinWithType>
    ()
    .Name("gridBins")
    .DataSource(dataSource => dataSource
    .Ajax()
    .Model(model => {
    model.Id(p => p.Bin_ID);
    model.Field(p => p.SiteHasBin).Editable(true);
    model.Field(p => p.Bin_Type_Name).Editable(false);
    model.Field(p => p.Bin_Type_Group).Editable(false);
    })
    .Batch(true)
    .ServerOperation(false)
    .Read("Bins_Read", "MySites", new { site_Id = Model.Site_Id })
    .Update("Bins_Update", "MySites", new { site_Id = Model.Site_Id })
    )
    .Columns(columns =>
    {
    columns.Bound(site => site.SiteHasBin).Filterable(false);
    columns.Bound(site => site.Bin_Type_Name).Filterable(false);
    columns.Bound(site => site.Bin_Type_Group).Filterable(filterable => filterable.UI("groupFilter"));
    })
    .Editable(editable => editable.Mode(GridEditMode.InCell))
    .Filterable(filterable => filterable
    .Extra(false)
    .Operators(operators => operators
    .ForString(str => str.Clear()))
    )
    .Sortable()
    .ToolBar(toolbar =>
    {
    toolbar.Save();
    })
    )

Further strange behaviour: 

When I do a 'standard' batch update this works as expected see first half of gif above. However, when I do one by one, I appear to just replicate the first.

 

Here is my my Read & Update code:

 


   public ActionResult Bins_Read(int site_Id, [DataSourceRequest]DataSourceRequest request)
        {
            return Json(Read(site_Id).ToDataSourceResult(request));
        }


        public IEnumerable<BinWithType> Read(int siteId)
        {
            return GetAllAsync(siteId).Result.ToList();
        }

        public async Task<IList<BinWithType>> GetAllAsync(int siteId)
        {
            if (Session.GetObjectFromJson<IList<BinWithType>>("BinWithType") != null)
            {
                Session.Remove("BinWithType");
                _session.Clear();
            }

            var result = Session.GetObjectFromJson<IList<BinWithType>>("BinWithType");

            var client = new BinsClient(new HttpClient());
            var bins = await client.GetBinsWithTypeBySiteIdAsync(siteId);

            result = bins.ToList();
            Session.SetObjectAsJson("BinWithType", result);
            return result;
        }

        public ActionResult Bins_Update([DataSourceRequest] DataSourceRequest request, [Bind(Prefix = "models")] IEnumerable<BinWithType> bins)
        {
            var client = new BinsClient(new HttpClient());
            foreach (var bin in bins)
            {
                if (bin.Bin_ID > 300)
                {
                    DeleteBin(bin, client);
                }


                if (bin.Bin_ID < 300)
                {
                    PostNewBin(bin, client);
                }
            }
            return Json(Read(bins.FirstOrDefault().Site_ID).ToDataSourceResult(request));
        }

        private static Task<Bin> DeleteBin(BinWithType bin, BinsClient client)
        {
            return client.DeleteBinByIdAsync(bin.Bin_ID);
        }

        [HttpPost]
        private static Task<Bin> PostNewBin(BinWithType bin, BinsClient client)
        {
            var thisBin = new Bin
            {
                Site_ID = bin.Site_ID,
                Bin_Type_ID = bin.Bin_Type_ID,
                Comments = $"Added { DateTime.Now.ToShortDateString() }"
            };
            return client.PostBinAsync(thisBin);
        }


 

Richard
Top achievements
Rank 1
commented on 02 Sep 2021, 02:18 PM

Ok, so I managed to manage to solve all the above woes with adding the following event to the datasource of the grid and then rereading it after the update.
Events(events => events.Sync("sync_handler"))

function sync_handler(e) {
   this.read();
}
It feels a little hacky but it's doing the job....I think
Tsvetomir
Telerik team
commented on 07 Sep 2021, 07:13 AM

Hi Richard, in general, the CancelChanges() method checks for all dirty items and restores their pristine counterpart. The pristine model contains the initial values before any changes.

As per the update ActionMethod, I have noticed that you are returning only the first item. It is recommended to return all the updated items. In your case - bins. Check out the following example where the back-end code is exposed:

https://demos.telerik.com/aspnet-core/grid/editing

 

 
Richard
Top achievements
Rank 1
commented on 07 Sep 2021, 08:45 AM

Thanks for pointing me n the right direction Tsvetomir

No answers yet. Maybe you can help?

Tags
Grid Toolbar
Asked by
Richard
Top achievements
Rank 1
Share this question
or