Bind combobox selected-id when inside a template

4 posts, 0 answers
  1. Andrei
    Andrei avatar
    5 posts
    Member since:
    Jan 2014

    Posted 11 Jul 2014 Link to this post

    Hello, I searched for this for several hours in the documentations and couldn't find anything, so here it is. I have a template and inside it there are 2 comboboxes (Patients and HomeServers). This template is used when a listview is in edit or create mode. The problem is that when I make an edit and select a different value from the combobox it is not posted to the server. The problem is probably that it is not bound to the id-columns (IdPatient and IdHomeServer). Please tell me how can I bind the selected ID of the combobox to the model.

    Here is the template that is used by the listview. It has 2 combobox controls inside:

    01.<script type="text/x-kendo-tmpl" id="edit-watch-template">
    02.    <div class="watch-view k-widget">
    03.        <div class="edit-buttons">
    04.            <a class="k-button k-button-icontext k-update-button" href="\\#"><span class="k-icon k-update"></span></a>
    05.            <a class="k-button k-button-icontext k-cancel-button" href="\\#"><span class="k-icon k-cancel"></span></a>
    06.        </div>
    07.        <dl>
    08.            <dt>Serial number</dt>
    09.            <dd>
    10.                <input type="text" class="k-textbox" data-bind="value:SerialNo" name="SerialNo" required="required" validationMessage="required" />
    11.                <span data-for="SerialNo" class="k-invalid-msg"></span>
    12.            </dd>
    13.            <dt>Patient</dt>
    14.            <dd>
    15.                @*<input type="text" class="k-textbox" data-bind="value:IdPatient" name="IdPatient" required="required" min="1" validationMessage="required" />*@
    16.                @(Html.Kendo().ComboBox()
    17.                    .DataSource(source => {
    18.                        source.Read(read => {
    19.                            read.Action("GetPatients", "Watches");
    20.                        })
    21.                        .ServerFiltering(true);
    22.                    })
    23.                    .Name("IdPatient")
    24.                    .TemplateId("patient-template")
    25.                    .DataTextField("DisplayName").DataValueField("Id")
    26.                    .Filter(FilterType.Contains)
    27.                    .HtmlAttributes(new Dictionary<string,object>{
    28.                        {"data-bind","value:IdPatient"}
    29.                    })
    30.                    .ToClientTemplate()
    31.                     
    32.                )
    33.                <span data-for="IdPatient" class="k-invalid-msg"></span>
    34.            </dd>
    35.            <dt>Home server</dt>
    36.            <dd>
    37.                @(Html.Kendo().ComboBox()
    38.                    .DataSource(source => {
    39.                        source.Read(read => {
    40.                            read.Action("GetHomeServers", "Watches");
    41.                        })
    42.                        .ServerFiltering(true);
    43.                    })
    44.                     
    45.                    .Name("IdHomeServer")
    46.                    .TemplateId("home-server-template")
    47.                    .DataTextField("DisplayName").DataValueField("Id")
    48.                    .Filter(FilterType.Contains)
    49.                    .HtmlAttributes(new Dictionary<string,object>{
    50.                        {"data-bind","value:IdHomeServer"}
    51.                    })
    52.                    .ToClientTemplate()
    53.                )
    54.                <span data-for="IdHomeServer" class="k-invalid-msg"></span>
    55.            </dd>
    56.        </dl>
    57.    </div>
    58.</script>
    In lines 27 and 49 I tried to do the bindind but it didn't work.


    I also did this modification to the edit template, otherwise it doesn't show up correctly when pressing edit.
    1.var listView = $("#watchesListView").data("kendoListView");
    2.listView.editTemplate = kendo.template($("#edit-watch-template").html());


    This is the code on the server that handles create for example. The same thing happens on update.
    01.public JsonResult CreateWatch(HomeWatchListItem hw) {
    02.    try {
    03.        uow.HomeWatchesRepository.Add(new HomeWatch {
    04.            HomeServerId = hw.IdHomeServer,
    05.            PatientId = hw.IdPatient,
    06.            SerialNo = hw.SerialNo
    07.        });
    08.        uow.Commit();
    09.        return Json(hw);
    10.    }
    11.    catch (Exception) {
    12.        //TODO: what to return here
    13.        return Json(false);
    14.    }
    15.}
    In the code above hw.IdHomeServer and hw.IdPatient are supposed to be the id values from the 2 comboboxes but they are both 0. hw.SerialNo is OK.

    Please help if you can.
  2. Andrei
    Andrei avatar
    5 posts
    Member since:
    Jan 2014

    Posted 11 Jul 2014 in reply to Andrei Link to this post

    This is how I create the ListView. (Sorry I couldn't find an edit post option).
    01.@(Html.Kendo().ListView<HomeWatchListItem>().Name("watchesListView")
    02.    .DataSource(ds => {
    03.        ds.Read(r => {
    04.            r.Action("GetWatches", "Watches").Type(HttpVerbs.Post);
    05.        }).Create(c => {
    06.            c.Action("CreateWatch", "Watches").Type(HttpVerbs.Post);
    07.        }).Update(u => {
    08.            u.Action("EditWatch", "Watches").Type(HttpVerbs.Post);
    09.        })
    10.        .ServerOperation(true)
    11.        .PageSize(4)
    12.        .Model(m => {
    13.            m.Id("Id");
    14.        });
    15.    })
    16.    .ClientTemplateId("watch-template")
    17.    .Editable(e => {
    18.        e.TemplateName("edit-watch-template");
    19.    })
    20.    .TagName("div")
    21.    .HtmlAttributes(new { @class = "k-widget k-listview" })
    22.    .Pageable()
    23.    .Deferred()
    24.)
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Andrei
    Andrei avatar
    5 posts
    Member since:
    Jan 2014

    Posted 11 Jul 2014 Link to this post

    I managed to convice the combobox to also post the two ids by adding the following to the Listview creation:

    1..Model(m => {
    2.    m.Id("Id");
    3.    m.Field<int>("IdPatient");
    4.    m.Field<int>("IdHomeServer");
    5.    m.Field<string>("PatientName");
    6.    m.Field<string>("HomeServerName");
    7. 
    8.});
    Now it correctly posts the Id but ListView item is not refreshed after the edit is made. Any ideas? How am I supposed to do this in a correct and standard way?
  5. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3706 posts

    Posted 15 Jul 2014 Link to this post

    Hello Andrei,

    In general, the Create/Update service should return the newly created/updated instance. Thus the data source is able to determine whether the item is actually synced or not. I would suggest you check this online demo, which shows how to implement editing in ListView widget.
    As a side note you can find more information how the datasource create should work and what are the important points in correct implementation here.

    Regards,
    Georgi Krustev
    Telerik
     

    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.

     
Back to Top
UI for ASP.NET MVC is VS 2017 Ready