Bind combobox selected-id when inside a template

[Andrei]

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");

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.

[Andrei]

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.)

[Andrei]

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?

[Georgi Krustev]

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