This is a migrated thread and some comments may be shown as answers.

Kendo UI Grid reading from controller action

1 Answer 532 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Emmanouil Gimissis
Top achievements
Rank 1
Emmanouil Gimissis asked on 06 Oct 2016, 05:16 PM

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>

 

1 Answer, 1 is accepted

Sort by
0
Vladimir Iliev
Telerik team
answered on 10 Oct 2016, 08:31 AM
Hello Emmanouil,

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


Regards,
Vladimir Iliev
Telerik by Progress
 
Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
 
Tags
Grid
Asked by
Emmanouil Gimissis
Top achievements
Rank 1
Answers by
Vladimir Iliev
Telerik team
Share this question
or