Grid with a custom datasource executing code after e.success()

8 posts, 1 answers
  1. Andrew
    Andrew avatar
    12 posts
    Member since:
    Jan 2017

    Posted 21 Jan 2017 Link to this post

    Hello,

    I've a grid with a custom datasource

    01..DataSource(dataSource => dataSource
    02.    .Custom()
    03.    .Batch(true)
    04.    .Schema(s =>
    05.        s.Model(model =>
    06.        {
    07.            model.Id(p => p.ID);
    08.        })
    09.    )
    10.    .Transport(new
    11.    {
    12.        read = new Kendo.Mvc.ClientHandlerDescriptor() { HandlerName = "customRead" },
    13.        create = new Kendo.Mvc.ClientHandlerDescriptor() { HandlerName = "customCreate" },
    14.        update = new Kendo.Mvc.ClientHandlerDescriptor() { HandlerName = "customUpdate" },
    15.        destroy = new Kendo.Mvc.ClientHandlerDescriptor() { HandlerName = "customDestroy" },
    16.    })
    17.)

     

    It works as expected but I'm trying to build a grid which will send in ONLY ONE request all the created, updated and destroyed items to the server.

    Out of the box the grid will send one request with all created items, another request with all updated items and another request with all destroyed items but searching here and there I got it working the way I need.

    Now I'm facing only one problem and it's in the customUpdate and customDestroy handlers. Here's the customUpdate handler

    1.function customUpdate(e) {
    2.    e.success();
    3.}

     

    Basically what I'm saying is: when the user update or destroy a row DOES NOTHING. I'll do all the updates when the user click a custom save button I've implemented.

    The problem is that after the e.success() method is called the datasource remove the state of the row (updated, destroyed) so this is what I need:

    Is it possible to execute some code right away after the whole code inside e.success() finished?

    PD: I've realized that when e.success() call is finished the status of the rows isn't changed yet (updated, destroyed) so I need to be able to execute some code after the whole code inside e.success() is executed.

    Thank you.

  2. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2466 posts

    Posted 24 Jan 2017 Link to this post

    Hi Andrew,

    You could try to attach handler to the dataBound event of the Grid with "one":
    function customUpdate(e) {
        e.success();
        var grid = $("#grid").data("kendoGrid");
        grid.one("dataBound", function () {
            //your custom code
        })
    }

    Can you please give this a try and let me know if it fits to your requirement.


    Regards,
    Konstantin Dikov
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Andrew
    Andrew avatar
    12 posts
    Member since:
    Jan 2017

    Posted 24 Jan 2017 Link to this post

    Hi Konstantin,

    Yes! it fits my requirement.

    Would you please tell me how grid.one works because I don't see it in the documentation.

    Thank you.

  4. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2466 posts

    Posted 25 Jan 2017 Link to this post

    Hello Andrew,

    This is a jQuery method that attaches event handler that will fire only once:

    Best Regards,
    Konstantin Dikov
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. Andrew
    Andrew avatar
    12 posts
    Member since:
    Jan 2017

    Posted 25 Jan 2017 Link to this post

    Hi Konstantin,

    I've a read action in one controller with this signature:

    1.public IActionResult CustomRead(Guid id)
    2.{
    3. 
    4.}

     

    How can I configure the read handler of the datasource to pass a parameter?

    01..DataSource(dataSource => dataSource
    02.    .Custom()
    03.    .Batch(true)
    04.    .Schema(s =>
    05.        s.Model(model =>
    06.        {
    07.            model.Id(p => p.ID);
    08.        })
    09.    )
    10.    .Transport(new
    11.    {
    12.        read = new Kendo.Mvc.ClientHandlerDescriptor() { HandlerName = "customRead" },
    13.        create = new Kendo.Mvc.ClientHandlerDescriptor() { HandlerName = "customCreate" },
    14.        update = new Kendo.Mvc.ClientHandlerDescriptor() { HandlerName = "customUpdate" },
    15.        destroy = new Kendo.Mvc.ClientHandlerDescriptor() { HandlerName = "customDestroy" },
    16.    })
    17.)

     

    Thank you.

  6. Pavlina
    Admin
    Pavlina avatar
    6187 posts

    Posted 27 Jan 2017 Link to this post

    Hello,

    I believe the following section of the documentation will help you achieve your goal:
    http://docs.telerik.com/aspnet-mvc/helpers/grid/binding/ajax-binding#pass-additional-data-to-action-methods

    Regards,
    Pavlina
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.

     
  7. Andrew
    Andrew avatar
    12 posts
    Member since:
    Jan 2017

    Posted 28 Jan 2017 in reply to Pavlina Link to this post

    Hello,

    I saw the page you suggested before asking the question.

    That's the documentation for an AJAX datasource and I'm using a CUSTOM datasource.

    Would you please explain me how I have to configure the custom read handler to pass a GUID parameter in line 12 of the datasource that I'm using the question?

    Thank you.

  8. Answer
    Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2466 posts

    Posted 01 Feb 2017 Link to this post

    Hi Andrew,

    Since you are making the AJAX request manually you need to pass the additional data in that request:

    Best Regards,
    Konstantin Dikov
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top