Kendo grid update - update click of any row shows 1st row details

Question

I am facing an issue with Kendo grid inline editing, The issue is even though I update any row, 1st row data is displayed in grid, Any help on this?

Before update

enter image description here

After update.

enter image description here

Interestingly the object I return from the controller does have the correct data

Controller code

    [AcceptVerbs(HttpVerbs.Post)]
    [ValidateAntiForgeryToken]
    [ActionSessionState(System.Web.SessionState.SessionStateBehavior.Required)]
    [OutputCache(Duration = 0, VaryByParam = "none")]
    public ActionResult _SaveBatchEditingintegrate([DataSourceRequest] DataSourceRequest request)
    {
        var UPObj = SessionFacade.UserProfile as UserProfile;

        try
        {
            IntegrationRate objInteg = new IntegrationRate();
            TryUpdateModel(objInteg);
            if (objInteg.PeriodID != 0)
            {
                var Integrationrate = (from p in _draftManagecompany.IntegrationRates where p.PeriodID == objInteg.PeriodID select p).First();
                TryUpdateModel(Integrationrate);
                if (Integrationrate.Rate > 100) //set 100 as default
                {
                    Integrationrate.Rate = 100;
                }
            }
            LoadResourceJSArray();
        }
        catch (Exception ex)
        {
            // Adding related additional information along with exception object
            //ExceptionLogger.Log(ex, "Period ID", id);
            ExceptionLogger.Log(ex, "User Profile Info", UPObj);

            // Handle exception with BubbleExceptionPolicy
            if (exManager.HandleException(ex, "BubbleExceptionPolicy"))
                throw;  // Not to include the ex, as the previous stack trace to be maintained
        }
//_draftManagecompany.IntegrationRates contains updated value in the correct order
        return Json(_draftManagecompany.IntegrationRates.ToDataSourceResult(request));


    }

cshtml code:

 @{ var integrateGrid = Html.Kendo()
            .Grid(Model.Company.IntegrationRates)
            .Name("Gridintegrate")
            .EnableCustomBinding(true) // Enable custom binding
            .BindTo(Model.Company.IntegrationRates)
            .Events(events =>
            {
                events.Change("DataBound_Integ");

            })
            .ToolBar(
                commands =>
                {
                    //commands.Insert().ButtonType(GridButtonType.BareImage).ImageHtmlAttributes(new { style = "visibility:hidden" });
                }
            )
            .Columns(columns =>
            {

                columns.Bound(p => p.PeriodID).Visible(false);
                columns.Bound(p => p.Month).Width(150);
                columns.Bound(p => p.Rate).Format("{0:0.00}%").Width(100);

                columns.Command(commands =>
                {
                    commands.Edit().HtmlAttributes(new { @id = "btn_IntRateEdit" });

                }).Width(150).Title(gridTitle);
            })
            .HtmlAttributes(new { style = "height: 380px;" })
            .Scrollable()
            .Editable(editable => editable.Mode(GridEditMode.InLine))
            .DataSource(dataSource => dataSource.Ajax()
                //.Batch(true) 
                .Read(read => read.Action("_AjaxBindingintegrate", "Company"))
                .Update(update => update.Action("_SaveBatchEditingintegrate", "Company"))

                .Model(model =>
                    {
                        model.Id(c => c.PeriodID);
                        model.Field(c => c.Month).Editable(false);
                    }

                )
                 .Events(events =>
                 {
                     events.Error("CheckSessionExistsOnTelerik");


                 })

            );
        //.Pageable(paging => paging.Style(GridPagerStyles.NextPreviousAndNumeric | GridPagerStyles.PageSizeDropDown).PageSize(20, new int[3] { 20, 50, 100 })).ToComponent();

        var culture = System.Globalization.CultureInfo.InvariantCulture;
        //integrateGrid.Localization = new GridControlLocalization(culture);
        integrateGrid.Render();


                    }

This uses to happen when the server returns a null id for the edited record. Are you posting back the record on update and correctly returning the id? — OnaBai
I dont see any null value, infact if i save these changes and reload the grid , the updated value is reflected, But immiediately after click of update everyrow update is overwritten by 1st row data — KeenUser
is there a way to explicitly refresh the grid after click of update? If so in which event I need to write the refresh code?, If I can do that, it can be a work around for this problem. — KeenUser
You don't have to. Your update method should return the record once updated. KendoUI will do the rest. If you do not send it back then the record gets deleted. — OnaBai

David Shorthose David Shorthose · Accepted Answer · 2014-05-30T21:34:20

I think I see the problem here. From what I can tell when you complete the update you are returning the entire data set back on the update ie June, january, February etc.

On the update all you have to do is return the item you have updated back to the grid

So in your example change the return json to the following:

Return json(new { IntegrationRate}.toDataSourceResult(request,modelState),jsonbehaviour.allowget);

This then should sort out your issue.

Because you are returning the entire data set back it is rendering the first row as the expected result.

As you say you see the data saving correctly behind the scenes. So you know an error is not being thrown.

Kendo grid update - update click of any row shows 1st row details

1 Answers