DataSource Callbacks not Allowed in MVC?

5 posts, 0 answers
  1. Shawn
    Shawn avatar
    30 posts
    Member since:
    Mar 2011

    Posted 27 Jul 2012 Link to this post

    I set up a simple grid like this using the Razor syntax:

    @(Html.Kendo().Grid<VideoGames.Game>(Model)
      .Name("theGrid")
      .Columns(c =>
      {
        c.Bound(p => p.Name).Width(200);
        c.Bound(p => p.Price).Format("{0:c}").Width(100);
        c.Bound(p => p.Genre).Width(100);
        c.Bound(p => p.ImageUrl).ClientTemplate("<img src='#= ImageUrl #' alt='' />").Width(150);
        c.Command(cmd => { cmd.Edit(); });
      })
      .Editable(editable => editable.Mode(Kendo.Mvc.UI.GridEditMode.InCell))
      .Pageable()
      .ToolBar(c => c.Save())
      .DataSource(d => d.Ajax()
                        .Model(m => m.Id(p => p.Name))
                        .Update(c => c.Action("UpdateGame", "Home")))
      )

    The problem is that the .Update(...) in the DataSource doesn't expose the callback that the underlying KendoUI does:

    $("#theGrid").kendoGrid({
            dataSource: {
              data: data,
              batch: true,
              schema: {
                model: {
                  id: "GameID",
                  fields: {
                    GameID: { editable: false, nullable: true },
                    Name: "Name",
                    Price: { type: "number" },
                    ReleaseDate: { type: "date" },
                    Genre: "Genre",
                    Rating: "Rating",
                  }
                }
              }
            },
            transport: {
              update: {
                url: "/home/updategame",
                success: onUpdateSuccess,
                error: onUpdateError
              }
            }
            toolbar: [ "Save" ],
            height: 400,
            editable: true,
            scrollable: true,
            columns: [
              {
                field: "Name",
                title: "Title"
              },
              {
                field: "Price",
                title: "Price",
                format: '{0:c}'
              },
              {
                field: "ReleaseDate",
                title: "Rel Date",
                template: '#= kendo.toString(ReleaseDate,"MM/dd/yyyy") #'
              },
              {
                field: "Genre"
              },
              {
                field: "Rating"
              },
            ],
          });


    Since the transport.update (in the JavaScript) are passed through to the $.ajax handler, we can wire up to success and error, but can't via the MVC. We can do this after the fact, but it's not expected behavior. Can we get this added to future versions of the MVC package?
  2. Shawn
    Shawn avatar
    30 posts
    Member since:
    Mar 2011

    Posted 27 Jul 2012 Link to this post

    I tried to work around this by doing this but it seems that these are never being called?  Is this right?

    var grid = $("#theGrid").data("kendoGrid");
    grid.dataSource.transport.options.update.success = function (data) {
      alert("updated");
    };
    grid.dataSource.transport.options.update.error = function () {
      alert("error");
    };

    It seems the update options aren't being sent to the $.ajax call or the success/error arn't being chained/used.  Ideas?
  3. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 30 Jul 2012 Link to this post

    Hello Shawn, 

    Indeed those are not currently supported. The error event of the DataSource is exposed and we plan to create two new events for the next official release: "sync" and "responseEnd". I think those would allow you to handle the same requirement.

     Right now you have two options:
    1. Use the jQuery plugin
    2. Use the following JavaScript before the grid declaration:
    kendo.data.transports["aspnetmvc-ajax"].fn.options.update.success = function() {
        console.log(arguments);
    }

     If you choose the latter make sure you are using "complete" instead of "success". "success" is used internally.

    Regards,
    Atanas Korchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  4. Kai
    Kai avatar
    25 posts
    Member since:
    Jul 2012

    Posted 04 Mar 2013 Link to this post

    Is this still an issue? I have my action returning a status message showing if the update was a success or fail but haven't figured out a solution yet
  5. KV
    KV avatar
    1 posts
    Member since:
    Mar 2012

    Posted 24 Sep 2013 Link to this post

    You can use the datasource requestEnd function to know the status of the response.

    requestEnd: function(e) {
                        var response = e.response;
                        var type = e.type;
                        if (type == "undefined") {
                            showError();
                        }
                        else {
                            showSuccess(type);
                        }
    },
Back to Top