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

Why does this not work?

1 Answer 41 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Scott
Top achievements
Rank 1
Scott asked on 05 Dec 2015, 10:35 PM

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>

1 Answer, 1 is accepted

Sort by
0
Boyan Dimitrov
Telerik team
answered on 08 Dec 2015, 02:07 PM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Grid
Asked by
Scott
Top achievements
Rank 1
Answers by
Boyan Dimitrov
Telerik team
Share this question
or