KendoUI Grid with WebAPI

7 posts, 0 answers
  1. Patrik Johansson
    Patrik Johansson avatar
    274 posts
    Member since:
    May 2010

    Posted 28 Nov 2015 Link to this post

    I have a newly created Telerik project to which I've only added Entity Framework and WebAPI. I've used the KendoUI scaffolder to create a simple Grid from a very simple model (and hopefully corrected the errors in the scaffolder in the latest version). Read (GET) and Create (POST) work fine, but Update and Delete doesn't work. When trying to do Update or Delete, I get:

    kendo.all.min.js:9 "Uncaught TypeError: e.replace is not a function"

     

    Any idea of what is wrong? I am quite sure it is something quite simple. 

     

    I've attached code below

     

     <div id="grid"></div>
    <script>
        $("#grid").kendoGrid({
            height: 400,
            columns: [
                {field: "Name"},
                {command: [ "edit" , "destroy"], width: 180 }
            ],
            toolbar: ["create"],
            dataSource: {
                type: "webapi", 


                transport: {
                    create: {
                        url: "/api/AccommodationTypes/",
                        contentType: "application/json",
                        type: "POST"
                    },
                    read: {
                        url: "/api/AccommodationTypes/",
                        contentType: "application/json"
                    },
                    update: {
                        url: function (accommodationType) {
                            return "/api/AccommodationTypes/" + accommodationType.id;
                        },
                        contentType: "application/json",
                        type: "PUT"
                    },


                    destroy: {
                        url: function (accommodationType) {
                            return "/api/AccommodationTypes/" + accommodationType.id;
                        },
                        contentType: "application/json",
                        type: "DELETE"
                    },
                    parameterMap: function (data, operation) {
                        return JSON.stringify(data);
                    }
                },

                schema: {
                    data: "Data",
                    total: "Total", 
                    errors: "Errors",
                    model: {
                        id: "Id",
    fields: {
    Id: { type: "number"},
    Name: { type: "string"}
    }
                    }
                },
                serverPaging: true,
                serverSorting: true,
                serverFiltering: true,
                serverGrouping: true,
                serverAggregates: true,
            },
            editable: "inline",
            selectable: "single row",
            filterable: { 
    mode: "row"
    },
            scrollable: true
        })

    </script>

  2. Dimo
    Admin
    Dimo avatar
    8385 posts

    Posted 30 Nov 2015 Link to this post

    Hi Patrik,

    The observed error indicates that the server response does not meet the Grid DataSource requirements (e.g. the defined schema), which are described on the following documentation page:

    http://docs.telerik.com/kendo-ui/framework/datasource/crud

    Here are some resources that you can take a look at:

    https://github.com/telerik/ui-for-aspnet-mvc-examples/tree/master/grid/odata-v4-web-api-binding

    https://www.youtube.com/watch?v=HBALzROBX8k

    On a side note, dataSource.type of "webapi" is intended to be used only with the Kendo UI MVC wrappers, when the kendo.aspnetmvc.js is registered. Unless you have a special reason to set this dataSource.type value and have implemented the server code in accordance with the Kendo UI MVC Grid documentation, I recommend removing it.

    http://docs.telerik.com/kendo-ui/aspnet-mvc/helpers/grid/webapi-editing

    https://github.com/telerik/ui-for-aspnet-mvc-examples/tree/master/grid/odata-v4-web-api-binding-wrappers

    Using internal APIs from the Kendo UI MVC wrappers in the HTML5/JS widgets is not officially supported.

    Regards,
    Dimo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Patrik Johansson
    Patrik Johansson avatar
    274 posts
    Member since:
    May 2010

    Posted 30 Nov 2015 in reply to Dimo Link to this post

    Hi Dimo and thanks for responding to this,

    Could you please tell what i actually needed to change in order to get this to work? I've already been through most of the links you gave and that didn't make me solve this.

    "On a side note, dataSource.type of "webapi" is intended to be used only
    with the Kendo UI MVC wrappers, when the kendo.aspnetmvc.js is
    registered. Unless you have a special reason to set this dataSource.type
    value and have implemented the server code in accordance with the Kendo
    UI MVC Grid documentation, I recommend removing it."

    This is code generated by Teleriks own scaffolder by choosing the Kendo UI grid (non MVC) and selecting WebAPI from the Datasource type menu. And now you are telling us that the generate code is wrong and that Kendo UI non MVC version doesn't even support WebAPI? Or am I missing something here?

    If Kendo UI HTML5/JS does not support WebAPI (which is bad in itself), what Datasource Types does it actually support and which of these are prefered? In the Scaffolder there is also "AJAX" (which seem to work fine) and "Server" which doesn't say anything to me what it is.

    Please enlighten us :)

     

  4. Patrik Johansson
    Patrik Johansson avatar
    274 posts
    Member since:
    May 2010

    Posted 30 Nov 2015 Link to this post

    OK, turns out the code generated by Teleriks scaffolder is, for the lack of a better word, crap. Not even close to working, which makes the scaffolder kind of pointless. Looking at the video Dimo gave in his post, I was able to get this to work, but surely there must be a better way to implement a WebAPI as datasource than that?
  5. Patrik Johansson
    Patrik Johansson avatar
    274 posts
    Member since:
    May 2010

    Posted 30 Nov 2015 Link to this post

    To help others I post some code that ACTUALLY WORKS with the Kendo UI Datasource unlike the code produced by the Kendo UI Scaffolder in the latest version of Kendo UI. Must say I am a bit frustrated and concerned about the scaffolding problems in this release of Kendo UI, I mean, the hole point of having a scaffolder is that it generates working code, it not it's quite pointless. Anyway, here we go:

     

    <div id="grid"></div>
    <script>
        $("#grid").kendoGrid({
            height: 400,
            columns: [
                {field: "Name"},
                {command: [ "edit" , "destroy"], width: 180 }
            ],
            toolbar: ["create", "excel", "pdf"],
            dataSource: {
                //type: "webapi", 
                transport: {

                    read: {
                        url: "/api/AccommodationTypeViewModels",
                        datatype: "json",
                        type: "GET"
                    },
    create: { 
       url: "/api/AccommodationTypeViewModels",
       datatype: "json",
       type: "POST"
    },
    update:
                      {
                          url: function (data) {
                              return "/api/AccommodationTypeViewModels/" + data.Id;
                          },
                          datatype: "json",
                          type: "PUT"
                      },
    destroy: { 
       url: function (data) {
           return "/api/AccommodationTypeViewModels/" + data.Id;
       },
       datatype: "json",
       type: "DELETE"
    }
    },

                schema: {
                    data: "Data",
                    total: "Total",
                    errors: "Errors",
                    model: {
                        id: "Id",
                        fields: {
                            Id: { type: "number" },
                            Name: { type: "string" }
                        }
                    }
                },
                serverPaging: true,
                serverSorting: true,
                serverFiltering: true,
                serverGrouping: true,
                serverAggregates: true,
            },
            editable: "popup",
            selectable: "single row",
            sortable: {
                mode: "single"
            },
            filterable: { 
    mode: "row"
    },
            change: onChange,
            save: onSave,
            scrollable: true
        })

        function onChange(e){
            //Implement the event handler for change
        }

        function onSave(e){
            //Implement the event handler for save
        }

    </script>

  6. Dimo
    Admin
    Dimo avatar
    8385 posts

    Posted 02 Dec 2015 Link to this post

    Hi Patrik,

    Thank you for sharing a working implementation.

    I admit that the current Scaffolder suffers from some issues and I understand your disappointment. We will do our best to address these as soon as possible. To be more specific, generating type:"webapi" is an oversight on our end, as it assumes that the kendo.aspnetmvc.js script is available, which may not be the case for developers that use Kendo UI Professional only. We will need to choose one of several options - remove the generated dataSource type, remove the dependency to the Kendo UI MVC script, make the dependency clear to developers, or abandon this scenario and remove it from the Scaffolder. We still need to evaluate all options before making a decision, but at this point we are inclined towards the third option and listing the required dependencies in the Scaffolder wizard.

    Regards,
    Dimo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  7. Patrik Johansson
    Patrik Johansson avatar
    274 posts
    Member since:
    May 2010

    Posted 02 Dec 2015 in reply to Dimo Link to this post

    Hi Dimo,

    Thanks for responding. 

    Sorry for coming down so hard on the scaffolder but I think this is a really important area and something Telerik definitely should invest some time and money in. Scaffolding and code-generation tools are really important to me as a developer, to enable me to be as productive as possible. Especially when it comes to "simple and boring" stuff like creating for example 15 very similar CRUD pages. What I've read about the Kendo UI 2.0 plattform being released soon sounds promising, and Telerik really need to up your game here compared to the likes of DevExpress, Infragistics etc. which seem to be ahead in this area.  

Back to Top