Inline Edit Grid Showing Empty Rows

[SkyyCipp]

Hi Quite new to Telerik UI for Jquery.  Trying to get an inline edit grid with ajax source. But for some reason all the rows are empty even though the ajax json result is not empty. 

Have reference the demo Inline editing in https://demos.telerik.com/kendo-ui/grid/editing-inline but still unable to identify the issue. Here's my code below. Does any one know wat the issue is? or point me in the right direction? P.S can ignore the transport links... once I get read to work, then can move on to other links..

Thanks.

 

01.var crudServiceBaseUrl = "";
02.           dataSource = new kendo.data.DataSource({
03.               transport: {
04.                   read: {
05.                       url: "@Url.Action("KendoGrid_Read","Admin")",
06.                       dataType: "json"
07.                   },
08.                   update: {
09.                       url: crudServiceBaseUrl + "/Products/Update",
10.                       dataType: "jsonp"
11.                   },
12.                   destroy: {
13.                       url: crudServiceBaseUrl + "/Products/Destroy",
14.                       dataType: "jsonp"
15.                   },
16.                   create: {
17.                       url: crudServiceBaseUrl + "/Products/Create",
18.                       dataType: "jsonp"
19.                   },
20.                   parameterMap: function(options, operation) {
21.                       if (operation !== "read" && options.models) {
22.                           return {models: kendo.stringify(options.models)};
23.                       }
24.                   }
25.               },
26.               batch: true,
27.               pageSize: 20,
28.               schema: {
29.                   data: "data",
30.                   total: "total",
31.                   errors: "errors",
32.                   model: {
33.                       fields: {
34.                           id:"CompanyId",
35.                           CompanyId: { type:"number", editable: false, nullable: false },
36.                           CompanyName: { type: "string", editable: false },
37.                           CompanyGroupId: { type:"number", editable: false },
38.                           IsActive: { type: "boolean" },
39.                           Multiplier: { type: "number", validation: { min: 0, required: false } }
40.                       }
41.                   }
42.               }
43.           });
44.
45.
46.           $("#grid").kendoGrid({
47.               dataSource: dataSource,
48.               pageable: true,
49.               height: 550,
50.               toolbar: ["create"],
51.               columns: [
52.                   { field: "CompanyName", title: "Company Name" },
53.                   { field: "CompanyGroupId", title: "Unit Price" },
54.                   { field: "Multiplier", title: "Multiplier" },
55.                   { field: "IsActive", title: "Is Active", width: "120px" },
56.                   { command: ["edit", "destroy"], title: " " }
57.               ],
58.               editable: "inline"
59.           });
60.       });

 

[SkyyCipp]

Update: I've checked the dev console and there's no errors or warnings. 

[Richard]

First time I used the Kendo Grid the mistake I made was the return column names are case-sensitive. It wasn't until I looked in the network tab of the browser Dev Tools did I even notice this.  I had everything capital letters (even have that defined in my .NET endpoint) yet when they got to the browser they were all lower-case.

Just something to double check.  You should see the JSON output of the READ in the network tab.

[SkyyCipp]

wow, can't believe that was the issue. Thanks @Richard !