Grid won't render with JSON looking ok

[David]

Hi, new to Kendo . . .

From the View:

function InitGrid() {

    $("#grid").kendoGrid({
        dataSource: oRemoteDataSource,
        edit: EditMe,
        save: SaveMe,
        error: function (e) {
            alert(e.responseText);
        },
        pageable: {
            numeric: true,
            refresh: true,
            pageSizes: [3, 6, 10],
            previousNext: true,
            input: false,
            info: false
        },
        sortable: true,
        selectable: "row",
        id: "Code",
        schema: {
            model: {
                id: "Code",
                fields: {
                    "Name": { editable: false },
                    "Code": { nullable: true },
                    "IsPrecontract": { editable: false },
                    "IsActive": { editable: false }
                }
            }
        },
        columns: [
                { field: "Name", title: "Name", width: "450px" },
                { field: "Code", title: "Code", width: "40px", editable: false },
                { field: "IsPrecontract", title: "IsPrecontract", width: "80px" },
                { field: "IsActive", title: "IsActive", width: "80px" },
                { command: ["destroy"], title: " ", width: "80px" }
        ],
        toolbar: [
         "create",
         { name: "save", text: "Save This Record" }
        ],
        editable: {
            update: true,
            destroy: false,
            confirmation: "Are you sure you want to remove this category?"
        },
    });
}

Now the data source:

function InitDataSource() {

    oRemoteDataSource = new kendo.data.DataSource({
        type: "odata",
        pageSize: 10,
        transport: {
            read: function (options) {
                $.ajax({
                    url: "/KendoGrid/MasterCategories_Read",
                    data: options.data, // the "data" field contains paging, sorting, filtering and grouping data
                    success: function (result) {
                        //         alert(JSON.stringify(result));
                        $("#json").html(JSON.stringify(result));
                        options.success(result);
                    }
                });
            },
            update: {
                url: "/KendoGrid/MasterCategories_Update",
                type: "POST"
            }
        }
    });
}

Now my JSON from the Controller, shows up ok . . . but not in the grid, only on my page in a div right underneath the empty grid that has only the column names showing: (I formatted the top few here for easy reading)

{"Data":[
{"Name":"Hardwood Stairs","Code":"39","IsPrecontract":"N","IsActive":"Y"},
{"Name":"Siding","Code":"10","IsPrecontract":"N","IsActive":"Y"},
{"Name":"Fireplace","Code":"26","IsPrecontract":"N","IsActive":"Y"},
{"Name":"Stair Railing","Code":"40","IsPrecontract":"N","IsActive":"Y"},
{"Name":"Tile Accessories","Code":"25","IsPrecontract":"N","IsActive":"Y"},
{"Name":"Interior Doors","Code":"36","IsPrecontract":"N","IsActive":"Y"},
{"Name":"Hardware & Mirrors","Code":"31","IsPrecontract":"N","IsActive":"Y"},
{"Name":"Permit, Fees and Insurance","Code":"01","IsPrecontract":"Y","IsActive":"Y"},{"Name":"Job Clean-up","Code":"34","IsPrecontract":"Y","IsActive":"Y"},{"Name":"Deck","Code":"12","IsPrecontract":"N","IsActive":"Y"},{"Name":"Countertops","Code":"29","IsPrecontract":"N","IsActive":"Y"},{"Name":"Rain Gutters","Code":"32","IsPrecontract":"N","IsActive":"Y"},{"Name":"Light Fixtures","Code":"20","IsPrecontract":"N","IsActive":"Y"},{"Name":"Entry Doors","Code":"13","IsPrecontract":"N","IsActive":"Y"},{"Name":"Damp Proofing","Code":"07","IsPrecontract":"Y","IsActive":"Y"},{"Name":"Electrical","Code":"19","IsPrecontract":"N","IsActive":"Y"},{"Name":"Temporary Utilities","Code":"04","IsPrecontract":"Y","IsActive":"Y"},{"Name":"Architecture & Engineering","Code":"03","IsPrecontract":"Y","IsActive":"Y"},{"Name":"Paint","Code":"24","IsPrecontract":"N","IsActive":"Y"},{"Name":"Speciality Items","Code":"80","IsPrecontract":"N","IsActive":"Y"},{"Name":"Windows","Code":"15","IsPrecontract":"N","IsActive":"Y"},{"Name":"Drywall","Code":"22","IsPrecontract":"Y","IsActive":"Y"},{"Name":"Electrical Features - Upgrade","Code":"42","IsPrecontract":"N","IsActive":"Y"},{"Name":"Garage Doors","Code":"14","IsPrecontract":"N","IsActive":"Y"},{"Name":"Foundation","Code":"06","IsPrecontract":"Y","IsActive":"Y"},{"Name":"Insulation","Code":"21","IsPrecontract":"Y","IsActive":"Y"},{"Name":"Cabinets","Code":"28","IsPrecontract":"N","IsActive":"Y"},{"Name":"Stone","Code":"23","IsPrecontract":"N","IsActive":"Y"},{"Name":"Trim Materials","Code":"37","IsPrecontract":"N","IsActive":"Y"},{"Name":"Design Ideas","Code":"00","IsPrecontract":"Y","IsActive":"Y"},{"Name":"Appliances","Code":"30","IsPrecontract":"N","IsActive":"Y"},{"Name":"Central Vacuum","Code":"33","IsPrecontract":"N","IsActive":"Y"},{"Name":"Roofing","Code":"11","IsPrecontract":"N","IsActive":"Y"},{"Name":"Framing","Code":"08","IsPrecontract":"Y","IsActive":"Y"},{"Name":"Lot Improvements","Code":"02","IsPrecontract":"Y","IsActive":"Y"},{"Name":"Air Conditioning","Code":"18","IsPrecontract":"Y","IsActive":"Y"},{"Name":"Heating and Ventilation","Code":"17","IsPrecontract":"Y","IsActive":"Y"},{"Name":"Plumbing","Code":"16","IsPrecontract":"N","IsActive":"Y"},{"Name":"Closet Shelving","Code":"38","IsPrecontract":"N","IsActive":"Y"},{"Name":"Flooring","Code":"27","IsPrecontract":"N","IsActive":"Y"}],"Total":40,"AggregateResults":null,"Errors":null}

And this won't show up in the grid why exactly?

Thanks

[Nikolay Rusev]

Hello David,

Using type: "odata" as configuration the data source will apply custom settings for handling binding to OData services.

The following code library illustrates CRUD operations with OData service: https://github.com/telerik/kendo-examples-asp-net/tree/master/grid-odata-crud

However the response you've posted is not "OData style". So my question is "Are you using OData to handle server operations?". If so you should stick to the above mentioned code library.  

If not you must at least configure schema.data to point to Data field from the response in order to parse the response.

Another think to notice is do you really need the manual handling of read action?

Regards,
Nikolay Rusev
the Telerik team

[David]

I'm sorry,. I'm just confused.  I've been trying only to follow the most basic example to get the data displayed.  I'm not trying to do anything custom.  This is my controller action.

    public ActionResult MasterCategories_Read([DataSourceRequest] DataSourceRequest request)
        {
            List<BusinessClassLibrary.MasterCategory> oCats = new List<BusinessClassLibrary.MasterCategory>();
            var service = new MasterCategoryService("");
            var oCategories = service.GetAll();
            foreach (BusinessClassLibrary.MasterCategory oCategory in oCategories)
            {
                oCats.Add(oCategory);
            }

            var vResult = oCats.ToDataSourceResult(request);
            var x = Json(vResult, JsonRequestBehavior.AllowGet);
            return (x);

        }

I just want it to match up and work.  What am I doing wrong?

Thanks

[Nikolay Rusev]

Hello David,

Here is a fully functional example of binding Kendo UI Grid to ASP.NET MVC Controller method:
https://github.com/telerik/kendo-examples-asp-net-mvc/tree/master/grid-crud 

It uses some helper classes in order to automate server parsing and serving of sort/filter etc. expressions. Those helper are placed inside Model folder in case you are curios of the implementation.


All the best,
Nikolay Rusev
the Telerik team

[David]

So after three days going around with this, all you will do is point me to your examples?  I gave you all code and data.  And now you can't even tell me the problem?  Awesome.

Not the support I was hoping for with a new product.

[Atanas Korchev]

Hi David,

 The action method configuration will work only if you are using Kendo Complete for ASP.NET MVC. You however seem to be using the Kendo Grid JavaScript widget and this is why it doesn't work. If you want to continue using this kind of action method configuration you should use the Kendo Grid ASP.NET HtmlHelper extension method. More info can be found in the overview and ajax binding documentation articles.

If you want to continue using the Kendo Grid JavaScript widget you can follow the example linked before.

Regards,
Atanas Korchev
the Telerik team