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

Bind combobox selected-id when inside a template

3 Answers 217 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
Andrei
Top achievements
Rank 1
Andrei asked on 11 Jul 2014, 11:11 AM
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.

3 Answers, 1 is accepted

Sort by
0
Andrei
Top achievements
Rank 1
answered on 11 Jul 2014, 11:17 AM
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.)
0
Andrei
Top achievements
Rank 1
answered on 11 Jul 2014, 12:11 PM
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?
0
Georgi Krustev
Telerik team
answered on 15 Jul 2014, 10:53 AM
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.

 
Tags
ComboBox
Asked by
Andrei
Top achievements
Rank 1
Answers by
Andrei
Top achievements
Rank 1
Georgi Krustev
Telerik team
Share this question
or