This is a migrated thread and some comments may be shown as answers.

Rebinding/Refreshing Detail Grid

1 Answer 117 Views
This is a migrated thread and some comments may be shown as answers.
Matt Miller
Top achievements
Rank 1
Matt Miller asked on 23 Jul 2014, 07:34 PM
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> ()
         .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
                                                                               .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()
                                               .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>"
           .Filterable(filterable => filterable.Extra(false))      

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]]);

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

        public JsonResult CnxRailcarUpdate(CnxRailcar railCar, [DataSourceRequest] DataSourceRequest request)
            catch (Exception e)
                Response.StatusCode = 550;
            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?

1 Answer, 1 is accepted

Sort by
Nikolay Rusev
Telerik team
answered on 25 Jul 2014, 02:57 PM
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:
        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
            return Json(products.ToDataSourceResult(request, ModelState));

Nikolay Rusev

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

Asked by
Matt Miller
Top achievements
Rank 1
Answers by
Nikolay Rusev
Telerik team
Share this question