How to update related ListView template item after edit in MVC

[Steve]

I have a ListView template that contains an index field (VentTypeId) and a text field (VentDescription) that shows text for the index field. The text field getter does a lookup up for the text corresponding to the index field.  I have an EditorTemplate with a dropdownlist to modify the index field, and after the save the index field is changed but the text field is not. I suppose I need to indicate that the text field has to be re-bound in the template after the edit, but don't know how.

Here is the relevant part of the View:

@(Html.Kendo().ListView<VentSetting>()
    .Name("VentSettings")
    .TagName("div")
    .ClientTemplateId("ventTemplate")
    .Editable()
    .DataSource(datasource => datasource
        .Model(model => model.Id(m => m.VentSettingId))
        .Read(read => read.Action("ReadVentSettings", "Run"))
        .Update(update => update.Action("UpdateVentSetting", "Run"))
    )
)

The relevant part of the template. Here the VentTypeId displays the changed value but the VentDescription field does not:

<script type="text/x-kendo-tmpl" id="ventTemplate">
    <div>
            <span>VentTypeId:</span><span>#:VentTypeId#</span>
            <span>Vent:</span><span>#:VentDescription# </span>
        </div>
    </div>
</script>

The relevant parts of the EditorTemplate

<div>
    @Html.Kendo().DropDownListFor(x => x.VentTypeId)
          .DataValueField("VentTypeId")
          .DataTextField("Description")
          .BindTo((System.Collections.IEnumerable)ViewData["VentTypes"])

    <div class="edit-buttons">
        <a class="k-button k-button-icontext k-update-button" href="\\#"><span class="k-icon k-update"></span>Save</a>
        <a class="k-button k-button-icontext k-cancel-button" href="\\#"><span class="k-icon k-cancel"></span>Cancel</a>
    </div>

</div>

The relevant parts of the VentSetting model:

public class VentSetting
{
        public int VentTypeId { get; set; }

        public string VentDescription
        {
            get
            {
                return VentTypeId == null ? "" : GetVentTypes().Single(v => v.VentTypeId == VentTypeId).Description;
            }
        }
    }

Any help would be appreciated.

Steve

[Atanas Korchev]

Hello Steven,

This happens because the list view doesn't request server data after updating a single item. You should either update the VentDescription field using JavaScript (by handling the listview's save event) or call the read() method of the listview's data source when its sync event is raised.

Here is how to do the latter:

@(Html.Kendo().ListView<VentSetting>()
    .Name("VentSettings")
    .TagName("div")
    .ClientTemplateId("ventTemplate")
    .Editable()
    .DataSource(datasource => datasource
        .Events(events => e.Sync("handle_sync"))
        .Model(model => model.Id(m => m.VentSettingId))
        .Read(read => read.Action("ReadVentSettings", "Run"))
        .Update(update => update.Action("UpdateVentSetting", "Run"))
    )
)
<script>
function handle_sync() {
     this.read();
}
</script>

Regards,
Atanas Korchev
Telerik

[Steve]

Awesome. The sync event solution is simple and works perfectly.