Why does this not work?

[Scott]

I am simply trying to use a kendoDropDownList within a grid.  Once a selection is made, I want the selected TEXT to show, NOT the value.

As you can see, I am using a different dataSource for the dropdown (which an array of JSON objects).  Should be simple...but the grid does not show the names/values at all.

I know I am missing something.,..just can't figure out what...thanks for any help.  Need to save what little hair I have left.

01.<script src="../content/shared/js/products.js"></script>
02.<div id="example">
03.    <div id="grid"></div>
04.
05.    <script>
06.
07.        $(document).ready(function () {
08.            var dataSource = new kendo.data.DataSource({
09.               pageSize: 20,
10.               data: products,
11.               schema: {
12.                   model: {
13.                     id: "ProductID",
14.                     fields: {
15.                        Category: { defaultValue: { CategoryID: 1, CategoryName: "Beverages"} }
16.                     }
17.                   }
18.               }
19.            });
20.
21.
22.            $("#grid").kendoGrid({
23.                dataSource: dataSource,
24.                pageable: true,
25.                height: 550,
26.                columns: [
27.                    { field: "Category", title: "Category", width: "180px", editor: categoryDropDownEditor }],
28.                editable: true
29.            });
30.        });
31.
32.          var testArray = new Array();
33.          testArray.push({dsName:"DS1", dsID: 1});
34.          testArray.push({dsName:"DS2", dsID: 2});
35.
36.        function categoryDropDownEditor(container, options) {
37.            $('<input/>')
38.                .appendTo(container)
39.                .kendoDropDownList({
40.                    autoBind: false,
41.                        index: 1,
42.                    dataValueField: "dsID",
43.                    dataTextField: "dsName",
44.                    dataSource: testArray
45.                });
46.        }
47.
48.    </script>
49.</div>

[Boyan Dimitrov]

Hello Scott,

By default the value binding for the select widgets(AutoComplete, DropDownList, ComboBox, MultiSelect) uses the value of the selected item to update the View-Model field. So basically this is the reason why the model is updated with the integer value instead of the text of the item. 

In this case there are two options: 

 

   - either to have same property of the model for dataTextField and dataValueField for the DropDownList: 

 

function categoryDropDownEditor(container, options) {
37.            $('<input/>')
38.                .appendTo(container)
39.                .kendoDropDownList({
40.                    autoBind: false,
41.                        index: 1,
42.                    dataValueField: "dsName",
43.                    dataTextField: "dsName",
44.                    dataSource: testArray
45.                });
46.        }

 

    - or use the Grid / ForeignKey column to match values from the column to their texts as demonstrated in the demo. 

 

 

Regards,
Boyan Dimitrov
Telerik