Populate Grid with Dropdown list not working

[Nse]

Hello,

I'm trying to populate a Kendo UI Grid column with a dropdown list. Both the dropdown list and the grid control get their data from an api that queries my database which delivers the data as json. I used the example for the Grid custom editor located at http://demos.telerik.com/kendo-ui/grid/editing-custom

Here is my HTML and Javascript:

<div id="workorderdetails">
    <div id="grid"></div>

    <script>
        $(document).ready(function() {
            // create DatePicker from input HTML element
            $("#datepicker").kendoDatePicker({
                format: "dddd, MMMM d, yyyy"
            });

            $("#grid").kendoGrid({
                dataSource: {
                    type: "json",
                    transport: {
                        read: "http://localhost:53786/api/workorder/1/workorderdetails"
                    },
                    schema: {
                        model: {
                            fields: {
                                WorkOrderID: { type: "number" },
                                Description: { type: "string" },
                                Quantity: { type: "number" },
                                ShortCode: { defaultValue: { PriceCodeID: 1436, ShortCode: "REF3" }
                            }
                        }
                    },
                    pageable: true,
                    height: 550,
                    toolbar: ["create"],
                    columns: [
                        { field: "ShortCode", title: "Price Code", editor: shortcodeDropDownEditor },
                        { field: "Description", title: "Description" },
                        { field: "Quantity", title: "Quantity" },
                        { command: "destroy", title: " ", width: "150px" }],
                    editable: true
                }
            });

        });

        function shortcodeDropDownEditor(container, options) {
            $('<input required data-text-field="ShortCode" data-value-field="PriceCodeID" data-bind="value:' + options.field + '"/>')
                .appendTo(container)
                .kendoDropDownList({
                    autoBind: false,
                    dataSource: {
                        type: "json",
                        transport: {
                            read: "http://localhost:53786/api/pricecodes/unique"
                        }
                    }
                });
        }

    </script>

When I run the code the grid appears as a horizontal line (it literally looks like an <hr> that's about 2 pixels thick, or nothing appears at all. The JSON for the workorders is an empty set (there's no data in the database), but the JSON for the Price Codes returns about 1000 records. Even though the workorders are an empty set, the grid should still appear so that I can add new records to the database through the grid controls, but nothing appears. Where am I going wrong?

[Stefan]

Hello Nse,

The provided code snippet suffers from some errors.

- dataSource.type cannot be "json"
http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-type

- dataSource.schema.model.fields is missing a closing bracket, which leads to a JavaScript error

Please check the samples that I have created and compare them with your implementation.

- the ShortCode field in the Grid dataSource holds objects
http://dojo.telerik.com/UbUNe

- the ShortCode field in the Grid dataSource holds primitive values
http://dojo.telerik.com/ufeYe/2

You can find more information for the Kendo UI DataSource configuration options and structure at

http://docs.telerik.com/kendo-ui/api/javascript/data/datasource

The valuePrimitive setting of the DropDownList is explained below. This setting should be set in accordance with the ShortCode data field type in the Grid dataSource (i.e. if the data field type is object, then valuePrimitive should be false)

http://docs.telerik.com/kendo-ui/api/javascript/ui/dropdownlist#configuration-valuePrimitive

Let me know if you need additional assistance.

Regards,
Stefan
Telerik