Unable to read property data 'w90> kendo ui js grid with customdropdown

Question

Here is my js code:

$(document).ready(function () {
    $("#grid").kendoGrid({
        dataSource: {
            transport: {
                read: {
                    url: '/Discount/Get',
                    dataType: "json",
                },
                update: {
                    url: '/Discount/Update',
                    dataType: "json",
                    type: "POST"
                },
                destroy: {
                    url: '/Discount/Delete',
                    dataType: "json",
                    type: "POST"
                },
                create: {
                    url: '/Discount/Add',
                    dataType: "json",
                    type: "POST"
                },
                parameterMap: function (options, operation) {
                    if (operation == "update") {
                        return JSON.stringify(options);
                    }
                    if (operation == "create") {
                        return options;
                    }
                    if (operation == "destroy") {
                        return JSON.stringify(options);
                    }
                }
            },
            schema: {
                model: {
                    id: "Id",
                    fields: {
                        Id: { type: "number" },
                        TopItemName: { type: "string" },
                        DiscountValue: { type: "number" },
                    }
                }
            }
        },
        toolbar: ["create", "save", "cancel"],
        height: 400,
        pageable: true,
        columns: [
        {
            field: "TopItemName",
            editor: topItemDropDown,
            template: "#=TopItemName#"
        },
        {
            field: "DiscountValue",
            format: "{0:p0}",
            editor: function (container, options) {
                $("<input name='DiscountValue'>")
                .appendTo(container)
                .kendoNumericTextBox(
                  {
                      min: 0,
                      max: 1.00,
                      step: 0.01
                  });
            }
        }],
        editable: true
    });

    function topItemDropDown(container, options) {
        $('<input required data-text-field="TopItemName" data-value-field="TopItemName" data-bind="value:' + options.field + '"/>')
            .appendTo(container)
            .kendoDropDownList({
                autoBind: false,
                dataSource: {
                    transport: {
                        url: '/Discount/GetTopItemName',
                        dataType: "jsonp",
                        type: "POST",
                        contentType: "application/json"
                    }
                }
            });
    }
});

The drop-down list is executed correctly. So there is a drop-down list, but when I click it, it should publish my controller method and get the values, but I get this error:

Cannot read property data 'undefined

Here is my action method:

       public ActionResult GetTopItemName([DataSourceRequest] DataSourceRequest request)
    {
        var customer = custAdapter.GetCustomersByCustomerId(SessionStore.CustomerId);
        return Json(customer, JsonRequestBehavior.AllowGet);
    }

What is data? and why is it undefined?

Answer 1

I forgot the read function of the data source so that it looks like this:

     transport:{
                        read: {
                            url: '/Discount/GetTopItemName',
                            dataType: "json",
                            type: "POST",
                            contentType: "application/json"
                        },
                 }

Answer 2

I had the same error today, and I think the error in your code in this line is:

Id: { type: "number" }, //THIS IS WRONG!!!

... should be:

Id: { editable: false, nullable: true },