Kendo UI Grid reading from controller action

2 posts, 0 answers
  1. Emmanouil Gimissis
    Emmanouil Gimissis avatar
    2 posts
    Member since:
    Aug 2009

    Posted 06 Oct Link to this post

    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>

     

  2. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 10 Oct Link to this post

    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.
     
  3. Kendo UI is VS 2017 Ready
Back to Top