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

Grid not refreshing and dropdowns not registering change

6 Answers 512 Views
This is a migrated thread and some comments may be shown as answers.
Top achievements
Rank 1
Chris asked on 30 May 2013, 04:06 PM
I am using 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);
08.                unit.Property.StatusID = unitListItemViewModel.PropertyStatusID;
09.                unit.Property.SubStatusID = unitListItemViewModel.PropertySubStatusID;
11.                unit.StatusID = unitListItemViewModel.UnitStatusID;
12.                unit.SubStatusID = unitListItemViewModel.UnitSubStatusID;
15.                    PropertyRepository.Update(unit.Property, LoggedInUser.UserID);
16.                    UnitRepository.Update(unit, LoggedInUser.UserID);
18.            }
19.            return Json(new[] { unitListItemViewModel }.ToDataSourceResult(request, ModelState));
21.        }
Here's the grid cshtml:
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()
Here's custom editor along with javascript:

02.        .Name("PropertySubStatusID")
03.        .HtmlAttributes(new { style = "width:150px" })
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")
22.<script type="text/javascript">
24.    function filterPropertySubStatuses() {
25.        return {
26.            StatusID: $("#PropertyStatusID").val()
27.        };
28.    }

6 Answers, 1 is accepted

Sort by
Top achievements
Rank 1
answered on 30 May 2013, 10:31 PM
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 there's no real choice.

Petur Subev
Telerik team
answered on 03 Jun 2013, 03:26 PM
Hello Curt,

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

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.

Petur Subev
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Top achievements
Rank 1
answered on 03 Jun 2013, 08:16 PM
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
Telerik team
answered on 05 Jun 2013, 12:03 PM
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)
                  //.OptionLabel("Select Product...")
                  .DataSource(dataSource =>
                      dataSource.Read(read => read.Action("GetProducts", "Home").Data("filterProducts"))
            @Html.ValidationMessageFor(m => m)

I hope this helps.

Kind Regards,
Petur Subev
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Top achievements
Rank 2
answered on 30 Apr 2014, 09:59 PM
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
Telerik team
answered on 02 May 2014, 08:08 AM
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:

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

Kind Regards,
Petur Subev

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
Top achievements
Rank 1
Answers by
Top achievements
Rank 1
Petur Subev
Telerik team
Top achievements
Rank 2
Share this question