Grid not refreshing and dropdowns not registering change

[Chris]

I am using asp.net mvc grid with server wrappers and have 4 cascading dropdowns by utilizing custom editors.  I am using inline editing with the grid.  The grid is ajax and the dropdowns also get their data via ajax/json.

I am experiencing 2 symptoms which may or may not be related to the same problem:

1) When a change is made to the first dropdown, it's value is updated correctly in the database but the grid does not refresh.  I found this article but it didn't correct my issue. Simply hitting refresh on the page shows the new/correct value.  

2) The dropdowns are cascading correctly (ie when one is changed, the others get the correct choices).  However, only the first dropdown (not the cascaded ones) are updated correctly in the database.  The other's values are not updated.

Here's the Controller code that does the update:

01.public ActionResult UpdateUnitListItemViewModel([DataSourceRequest] DataSourceRequest request, UnitListItemViewModel unitListItemViewModel)
02.        {
03.            if (ModelState.IsValid)
04.            {
05.                // Map a unit and save it
06.                Unit unit = UnitRepository.GetUnit(unitListItemViewModel.UnitID);
07.
08.                unit.Property.StatusID = unitListItemViewModel.PropertyStatusID;
09.                unit.Property.SubStatusID = unitListItemViewModel.PropertySubStatusID;
10.
11.                unit.StatusID = unitListItemViewModel.UnitStatusID;
12.                unit.SubStatusID = unitListItemViewModel.UnitSubStatusID;
13.
14.
15.                    PropertyRepository.Update(unit.Property, LoggedInUser.UserID);
16.                    UnitRepository.Update(unit, LoggedInUser.UserID);
17.
18.            }
19.            return Json(new[] { unitListItemViewModel }.ToDataSourceResult(request, ModelState));
20.
21.        }

Here's the grid cshtml:

01.@(Html.Kendo().Grid<ARPS.OpsPortal.Models.UnitListItemViewModel>()
02.      .Name("Grid")
03.      .DataSource(datasource => datasource
04.            .Ajax()
05.            .Group( group => group.Add(c => c.MarketName))
06.            .Sort( sort => sort.Add("FormattedAddress").Ascending())
07.            .Read(read => read.Action("GetUnitListItemViewModels", "Property"))
08.            .Update(update => update.Action("UpdateUnitListItemViewModel","Property"))
09.            .Model(model => model.Field(p => p.FormattedAddress).Editable(false))
10.            .Model(model => model.Field(p => p.Name).Editable(false))
11.            .Model(model => model.Id(u => u.UnitID))
12.      )
13.      .Columns(columns =>
14.      {
15.          columns.Bound(u => u.FormattedAddress).Title("Address");
16.          columns.Bound(u => u.Name).Title("Unit");
17.          columns.Bound(u => u.PropertyStatusName).Title("Property Status");
18.          columns.Bound(u => u.PropertySubStatusName).Title("Property Sub Status");
19.          columns.Bound(u => u.UnitStatusName).Title("Unit Status");
20.          columns.Bound(u => u.UnitSubStatusName).Title("Unit Sub Status");
21.          columns.Bound(u => u.AssignedUserInitials).Title("User");
22.          columns.Command(command => command.Edit());
23.      })
24.     .Editable(editable => editable.Mode(GridEditMode.InLine))
25.     .Pageable()
26.     .Sortable()
27.)

Here's custom editor along with javascript:

01.@(Html.Kendo().DropDownList()
02.        .Name("PropertySubStatusID")
03.        .HtmlAttributes(new { style = "width:150px" })
04.
05.        .DataTextField("Name")
06.        .DataValueField("StatusID")
07.        .DataSource(source => {
08.            source.Read(read =>
09.            {
10.                read.Action("GetActiveSubStatuses", "Status")
11.                    .Data("filterPropertySubStatuses");
12.            })
13.            .ServerFiltering(true);
14.        })
15.        .Enable(true)
16.        .SelectedIndex(0)
17.        .AutoBind(false)
18.        .CascadeFrom("PropertyStatusID")
19.
20.)
21.
22.<script type="text/javascript">
23.
24.    function filterPropertySubStatuses() {
25.        return {
26.            StatusID: $("#PropertyStatusID").val()
27.        };
28.    }
29.
30.</script>

[Chris]

I have continued to research this issue.  I changed my grid to use a ForeignKey column.  If you go further and add an OptionLabel to the custom editors which are dropdown lists, everything works as expected.

I consider this a workaround as the dropdowns, when used without an OptionLabel, show one thing but a DIFFERENT value is returned to the server.  I verified this in visual studio debugger as well as watching fiddler (ie, it's not some type of model mapping issue).

This is STILL AN ISSUE for me as I think it's a bug and is very inconvenient to force users to go through and select values in each of the cascaded dropdowns...because in many cases, there will only be one value...so there's no real choice.

PLEASE LOOK INTO THIS.

[Petur Subev]

Hello Curt,

Basically how to create the cascading functionality with editor templates is covered in this code library article:

http://www.kendoui.com/code-library/mvc/grid/grid-inline-and-popup-editing-using-cascading-dropdownlists.aspx

Could you check the project and see what exactly you missed? If it differs from your case please replicate the problem and give instructions how to reproduce the problem so we can investigate further.

Regards,
Petur Subev
Telerik

[Chris]

Hi Petur,

Here's the easiest way to reproduce this problem.  I'm using the sample you provided so we can be sure I didn't miss anything.  

1. Pull up the inline sample you provided (not the popup)
2. Goto Views->Shared->EditorTemplates->ProductId.cshtml and comment out the line .OptionLabel("Select Product...")
3. Run the sample
4. Add a new row and choose Customer 5, Vendor 5 and you'll see a default Product appears in the dropdown which is expected. 
5. Click Add
6. On the resulting row, I do not see any Product.  That's the issue.

Thank you

[Petur Subev]

Hello Curt,

Thank you for providing details how to reproduce the issue.

The issue in that case is that the MVVM updates the model of the Grid when the DropDownList's change event is triggered. Since the item is the first one selected - no change event is triggered.

As a work-around I can suggest you to use the dataBound of the DropDownList to trigger the change and thus update the model of the Grid with the first value that is selected in the Grid.

Here is an example:

@model int

@(Html.Kendo().DropDownListFor(m => m)
                  .AutoBind(false)
                  //.OptionLabel("Select Product...")
                  .DataTextField("ProductName")
                  .DataValueField("ProductId")
                  .Events(ev=>ev.DataBound("function(){this.trigger('change')}"))
                  .DataSource(dataSource =>
                  {
                      dataSource.Read(read => read.Action("GetProducts", "Home").Data("filterProducts"))
                                .ServerFiltering(true);
                  })
                  .CascadeFrom("VendorId")
            )
            @Html.ValidationMessageFor(m => m)

I hope this helps.

Kind Regards,
Petur Subev
Telerik

[aspforyou]

I'm experiencing the exact same issue while using Inline Edit with multiple cascading pulldownlists. The pulldownlist which is not updating the grid after selection is not cascading. I've attempted the same trigger change which seems to work against the model (selecting [edit] a second time binds to the updated selected, however the grid still displays the original value. Any tips on how I can trace this down and determine precisely what is occurring? 

[Petur Subev]

Hello Joseph,

We are not sure what exactly fails for your case, however we have demonstrated the same case within the following code library project:

http://www.telerik.com/support/code-library/grid-inline-and-popup-editing-using-cascading-dropdownlists

Could you please replicate the case within the demo and send it back so we can investigate what goes wrong?

Kind Regards,
Petur Subev
Telerik