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>