Kendo UI Grid reading from controller action

[Emmanouil Gimissis]

I am trying to display a simple grid using data from MVCMusicStore controller action, but don't seem to get any results.

What am I doing wrong ?

The relevant page follows. The relevant project could not be attached due to size.

<div id="grid"></div>
<script>
$(function () {
    $("#grid").kendoGrid({
        height: 400,
        columns: [
            "Title",
            { field: "Price", format: "{0:c}", width: "150px" },
            { field: "AlbumArtUrl", width: "150px" },
            { command: "destroy", title: "Delete", width: "110px" }
        ],
        editable: true, // enable editing
        pageable: true,
        sortable: true,
        filterable: true,
        dataSource: {
            serverPaging: true,
            serverFiltering: true,
            serverSorting: true,
            pageSize: 10,
            schema: {
                data: "Data",
                total: "Total",
                model: { // define the model of the data source. Required for validation and property types.
                    id: "AlbumID",
                    fields: {
                        AlbumID: { editable: false, nullable: true },
                        Title: { validation: { required: true } },
                        Price: { type: "number", validation: { required: true, min: 1 } },
                        AlbumArtUrl: { validation: { required: false } }
                    }
                }
            },
            batch: true, // enable batch editing - changes will be saved when the user clicks the "Save changes" button
            transport: {
                
                read: {
                    url: "@Url.Action("Index", "StoreManager")", //specify the URL which should return the records.
                    contentType: "application/json",
                    dataType: "json",
                    type: "POST" //use HTTP POST request as by default GET is not allowed by ASP.NET MVC
                },
                parameterMap: function(data, operation) {
                    if (operation != "read") {
                        // post the products so the ASP.NET DefaultModelBinder will understand them:

                        // products[0].Name="name"
                        // products[0].ProductID =1
                        // products[1].Name="name"
                        // products[1].ProductID =1

                        var result = {};

                        for (var i = 0; i < data.models.length; i++) {
                            var album = data.models[i];

                            for (var member in product) {
                                result["albums[" + i + "]." + member] = album[member];
                            }
                        }

                        return result;
                    } else {
                        return JSON.stringify(data)
                    }
                }
            }
        }
    });
});
</script>

 

[Vladimir Iliev]

Hello Emmanouil,

You can check the following example which shows possible way of binding the Kendo UI Grid to MVC back-end:

• Kendo UI Grid - CRUD operations with ASP.NET MVC

Regards,
Vladimir Iliev
Telerik by Progress