Using PUT and DELETE for DataSource Actions

2 posts, 0 answers
  1. dwhite
    dwhite avatar
    12 posts
    Member since:
    Feb 2007

    Posted 23 Oct 2013 Link to this post

    I am using the Restful Routing (http://restfulrouting.com/) library in my MVC5 project. Restful Routing gives me true REST based actions for my controllers. I'm trying to use the Kendo Grid in edit mode against these actions. Using the MVC wrapper, I have the following code for my data source:

    .DataSource(ds => ds
       .Ajax()
       .Model(model => model.Id(mapping => mapping.Id))
       .Read(read => read.Action("list", "mappings").Type(HttpVerbs.Get))
       .Create(create => create.Action("create", "mappings").Type(HttpVerbs.Post))
       .Update(update => update.Action("update", "mappings").Type(HttpVerbs.Put))
       .Destroy(destroy => destroy.Action("destroy", "mappings").Type(HttpVerbs.Delete))
       .PageSize(20)
    )
    The actions there should resolve to the URL /mappings/{id} with the exception of Read and Create. When I look at the generated JavaScript code though, I get the following: 

    "dataSource": {
        "transport": {
            "prefix": "",
            "read": {
                "url": "/mappings/list",
                "type": "GET"
            },
            "create": {
                "url": "/mappings",
                "type": "POST"
            }
        },
    There are no definitions for the update or destroy actions. If I change .Action to .Url, then I'm able to apply an HttpVerb. I figure the Url is the way to go, but how do I get the models Id within the Url string? I thought that perhaps the CleintTemplate placeholders would work, but they don't, e.g.:

    .Update(update => update.Url(Url.Action("Update", "Mappings", new { id = "#=Id#"})).Type(HttpVerbs.Put))
    So, how can I get the Model's Id in a Url?

    Thanks,
    Damien

  2. Rosen
    Admin
    Rosen avatar
    3253 posts

    Posted 25 Oct 2013 Link to this post

    Hi dwhite,

    I'm afraid that we are not familiar with Restful Routing library nor it is clear how it is configured in your case. Therefore, could you please provide a small runnable sample in which this issue can be observed locally.

    In order to pass the id of the model via the URL, you will need to use a JavaScript function to build the URL. Similar to the following:

    $(function() {
        var grid = $("#grid").data("kendoGrid");
     
        grid.dataSource.transport.options.update.url = function(data) {
            return "@Url.Content("~/mappings/")" + data.Id;
        }
     
        grid.dataSource.transport.options.destroy.url = function(data) {
            return "@Url.Content("~/mappings/")" + data.Id;
        }
    });

    .DataSource(dataSource =>
        dataSource.Ajax()
          .Model(model =>{/*..*/})
          .Read(read => read.Url(Url.Content("~/mappings")).Type(HttpVerbs.Get))
          .Create(create => create.Url(Url.Content("~/mappings")).Type(HttpVerbs.Post))
          .Update(update => update.Url(Url.Content("~/mappings")).Type(HttpVerbs.Put))
          .Destroy(destroy => destroy.Url(Url.Content("~/mappings")).Type(HttpVerbs.Delete))
    )

    Regards,
    Rosen
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top