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

How to update related ListView template item after edit in MVC

2 Answers 286 Views
ListView
This is a migrated thread and some comments may be shown as answers.
Steve
Top achievements
Rank 1
Steve asked on 18 Sep 2013, 04:03 AM

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

2 Answers, 1 is accepted

Sort by
0
Accepted
Atanas Korchev
Telerik team
answered on 20 Sep 2013, 06:31 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Steve
Top achievements
Rank 1
answered on 24 Sep 2013, 06:08 PM
Awesome. The sync event solution is simple and works perfectly.
Tags
ListView
Asked by
Steve
Top achievements
Rank 1
Answers by
Atanas Korchev
Telerik team
Steve
Top achievements
Rank 1
Share this question
or