Rebinding/Refreshing Detail Grid

[Matt Miller]

Been working on this for too long now. I have a detail grid where one of the columns is not editable by the user. It's value is calculated based on values in other fields/columns. If the user changes one of these, a stored proc is ran on the server that updates the calculated field. I have verified that the database is updated correctly. The problem is the grid is not refreshing/rebinding unless i force a datasource read (reload page, change pages in grid , etc.) . I know this is something silly on my part; maybe someone can point out my problem.

Here is my grid definition: 

@(Html.Kendo().Grid<CNX.Domain.Entities.CnxRailcar> ()
         .Name("ReceivedTrains_#=Id#")
         .Editable(editable => editable.Mode(GridEditMode.InCell))
         .Columns(columns =>
           {
               columns.Bound(o => o.Id).Visible(false);
               columns.Bound(o => o.CNX_TRAIN_GUID).Visible(false);
               columns.Bound(o => o.PERMIT_NUMBER).EditorTemplateName("_textEditor").Width(50);
               columns.Bound(o => o.OWNER_CODE).EditorTemplateName("_textEditor").Width(25);
               columns.Bound(o => o.OWNER_EQUIPMENT_NUMBER).Width(80).EditorTemplateName("_textEditor");
               columns.Bound(o => o.EQUIPMENT_NUMBER).Width(80).EditorTemplateName("_textEditor");
               columns.Bound(o => o.SEQUENCE_NUMBER).Width(75).EditorTemplateName("_numericTextEditor");
               columns.Bound(o => o.PILE).Width(75).EditorTemplateName("_PilesDropDown").Width(100);
               columns.Bound(o => o.CLASS).Width(75).EditorTemplateName("_classDropDown");
               columns.Bound(o => o.LOT).Width(75).EditorTemplateName("_textEditor");
               columns.Bound(o => o.COMMENTS).EditorTemplateName("_commentsDropDown").Width(100);
               columns.Bound(o => o.STATUS).EditorTemplateName("_railcarStatusDropDown").Width(100).Filterable(filterable => filterable
                                                                               .UI("statusFilter")
                                                                               .Extra(false)
                                                                               .Operators(operators => operators
                                                                                                       .ForString(str => str.Clear()
                                                                                                       .IsEqualTo("Is Equal To")
                                                                                                       .IsNotEqualTo("Is Not Equal To"))));
           })
           .Events(ev => ev.Save("receivedRailcars_Save").DataBinding("loadToolBar(\'#=Id#\')").DataBound("colorDatabound").Cancel("colorCancel").Edit("colorEdit"))
           .DataSource(dataSource => dataSource.Ajax()
                                               .PageSize(10)
                                               .Read(read => read.Action("CnxRailcars" , "MenuTrain" , new { trainGuid = "#=Id#" } ).Type(HttpVerbs.Post))
                                               .Update(update => update.Action("CnxRailcarUpdate", "MenuTrain", Model).Type(HttpVerbs.Post)).Model(model => model.Id(o => o.Id)))
           .ToolBar(tb =>
               {
                   tb.Template("<table id='batchApply'><tr><td colspan='3' style='text-align : left ;'><input type='button' value='Add Railcar' id='addCar_#Id#' class='k-button' onclick='addCar(\"" + "#=Id#" + "\")'</td>" +
                       "<td><input type='button' value='Locomotive Details' id='viewLoco_#Id#' class='k-button' onclick='viewLoco(\"" + "#=Id#" + "\")'</td></tr>" +
   "<tr><td><label>Car Range</label></td><td><label>Select Class</label></td><td><label>Select Pile</label></td><td></td></tr>" +
   "<tr><td><table><tr><td><label style='text-align : right ;'>start</label></td><td style='text-align : left ; '><input id='carStart_#=Id#' /></td></tr>" +
   "<tr><td><label style='text-align : right ;'>end</label></td><td style='text-align : left ;'><input id='carEnd_#=Id#' /></td></tr></table><td><div id='detailClass_#=Id#' /></td>" +
   "<td><div id='detailPile_#=Id#' /></td><td><input type='button' value='Apply To Cars' id='applyLot_#=Id#' class='k-button' onclick='apply(\"" + "#=Id#" + "\")'/></td></tr></table>"
                       );
               })
           .Pageable()
           .Sortable()
           .Filterable(filterable => filterable.Extra(false))
           .ToClientTemplate()
   )

Here is my saved event handler for the grid : 

function receivedRailcars_Save(e) {

       if (e.values.CnxComments != null) {
           e.model.set("COMMENTS" , e.values.CnxComments.CNX_COMMENT_DESCRIPTION) ;
       }
       else if (e.values.RailCarStatus != null) {
           e.model.set("STATUS", e.values.RailCarStatus.CNX_RAILCAR_STATUS_DESCRIPTION);
       }
       else if (e.values.CnxPiles != null) {
           e.model.set("PILE", e.values.CnxPiles.CNX_PILE_NUMBER);
       }
       else if (e.values.CnxClasses != null) {
           e.model.set("CLASS", e.values.CnxClasses.CNX_CLASS_NAME);
       }
       else {
           var myReflector = new reflector(e.values);
           var reflectorProperties = myReflector.getProperties();
           e.model.set(reflectorProperties[0], e.values[reflectorProperties[0]]);
       }

       e.sender.dataSource.sync();
   }

The line e.sender.dataSource.sync() forces the update action method to be called on the server. Here's that action method:

[HttpPost]
        public JsonResult CnxRailcarUpdate(CnxRailcar railCar, [DataSourceRequest] DataSourceRequest request)
        {
            try
            {
                cnxRailcarRepository.Save(railCar);
                cnxRailcarRepository.ApplyLots(railCar.CNX_TRAIN_GUID);
            }
            catch (Exception e)
            {
                Response.StatusCode = 550;
                Response.Write(e.Message);
            }
            return Json(cnxRailcarRepository.Railcars(railCar.CNX_TRAIN_GUID).Where(x => x.Id == railCar.Id).ToDataSourceResult(request));
        }

The repository's ApplyLots method just calls a stored proc on the database, and update the db context of the repository.

Any suggestions?

[Nikolay Rusev]

Hello Matt,

If I understand the scenario correctly you will have to return (inside `CnxRailcarUpdate` action method) the updated entity `CnxRailcar`.

Here is skeleton of how it could be implemented.
 - edit some field in the grid
 - inside `save` event handler trigger dataSource.sync()
 - update some other (not edited by the user) `UnitPrice` in our case:

[AcceptVerbs(HttpVerbs.Post)]
        public ActionResult Editing_Update([DataSourceRequest] DataSourceRequest request, [Bind(Prefix = "models")]IEnumerable<ProductViewModel> products)
        {
            if (products != null && ModelState.IsValid)
            {
                foreach (var product in products)
                {
                    product.UnitPrice *= 10;//simulate calculations
                    productService.Update(product);
                }
            }

            return Json(products.ToDataSourceResult(request, ModelState));
        }

 

Regards,
Nikolay Rusev
Telerik