Cancel button issue in the kendo grid

See more:

Javascript

HTML5

Kendo-UI

When I try to click on the cancel button on a particular row , the row displays the details of the first row in grid(means it duplicates the first row in the grid), instead of just displaying the previously displayed details on that row.

My view code is

<div class="content container">
    <div id="error-messages"></div>
    @{ Html.EnableClientValidation(true); }
    @(
    Html.Kendo()
        .Grid<SearchBandModel>()
        .Name("SearchBandList")
        .DataSource(binding => binding
                    .Ajax()
                    .Model(m =>
                    {
                        m.Id("Myfield");
                        m.Id(a => a.SearchBandId);
                        m.Field(a => a.Name).Editable(true);
                        m.Field(a => a.RegionName).Editable(true);
                        m.Field(a => a.AvailableRegions).Editable(true);
                        m.Id(a => a.RegionId);
                        m.Field(a => a.LowerBound).Editable(true);
                        m.Field(a => a.UpperBound).Editable(true);
                        m.Field(a => a.IsSmsSourcing).Editable(true);

                    })

Later if I refresh the page it comes back with the original record.

Can anyone please help me on this issue.

What I have tried:

I tried googling many forums and found that we need to add an id to the model. unfortunately it is throwing me an error when I try that.