How to update related ListView template item after edit in MVC

3 posts, 1 answers
  1. Steve
    Steve avatar
    13 posts
    Member since:
    Aug 2008

    Posted 17 Sep 2013 Link to this post

    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. Answer
    Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 20 Sep 2013 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. Steve
    Steve avatar
    13 posts
    Member since:
    Aug 2008

    Posted 24 Sep 2013 Link to this post

    Awesome. The sync event solution is simple and works perfectly.
Back to Top