Populate Grid with Dropdown list not working

2 posts, 0 answers
  1. Nse
    Nse avatar
    12 posts
    Member since:
    Feb 2016

    Posted 13 May 2016 Link to this post

    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?

  2. Stefan
    Admin
    Stefan avatar
    2950 posts

    Posted 16 May 2016 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top