[Solved] Deleted item is not substituted in a paged grid with OData v4

[Frank]

Hello,

when using inline-edit in a grid with a datasource calling an OData v4 service, the deleted item is not substituted in the current page (see screen in attachment). What am I missing in my code?

Following an example

$('#gridProductCategories').kendoGrid({
    sortable: true,
    scrollable: false,
    selectable: true,
    pageable: {
        refresh: true,
        pageSizes: [5, 10, 20, 40],
        buttonCount: 5
    },
    toolbar: [{ name: "create", text: getLocValue("AddProductCategory") }],
    editable: {
        mode: "inline",
        confirmation: getLocValue("Confirmation")
    },
    columns: [
        {
            field: "PC_ID",
            title: getLocValue("ID")
        },
        {
            field: "PC_Text_de",
            title: getLocValue("Text_de")
        },
        {
            field: "PC_Text_en",
            title: getLocValue("Text_en")
        },
         {
             width: 90,
             command: [
                 { name: "edit", text: { edit: "", cancel: "", update: "" }, className: "action_button edit" },
                 { name: "destroy", text: "", className: "action_button delete" }
             ],
             title: " "
         }
    ]
});

[HttpDelete]
[EnableQuery(AllowedQueryOptions = AllowedQueryOptions.All)]
[Authorize(Roles = "administrator, maintenance")]
public IHttpActionResult Delete([FromODataUri] int key)
{
    ProductCategory productCategory = dbcontext.ProductCategory.Find(key);
    if (productCategory == null)
    {
        return BadRequest(ModelState);
    }

    productCategory.PC_Deleted = true;

    dbcontext.ProductCategory.AddOrUpdate(productCategory);
    dbcontext.SaveChanges();
    return Ok(productCategory);
}

productCategorySource: new kendo.data.DataSource({

    type: "odata-v4",

    pageSize: 20,

    serverPaging: true,

    serverFiltering: true,

    serverSorting: true,

    transport: {

        read: {

            url: serviceUrl + "/odata/ProductCategories",

            dataType: "json",

            type: "GET"

        },

        update: {

            url: serviceUrl + "/odata/ProductCategories(0)",

            dataType: "json",

            type: "PUT"

        },

        create: {

            url: serviceUrl + "/odata/ProductCategories",

            dataType: "json",

            type: "POST"

        },

        destroy: {

            url: function (data) {

                return serviceUrl + "/odata/ProductCategories(" + data.PC_ID + ")"

            },

            dataType: "json",

            type: "DELETE"

        }

    },

    schema: {

        model: {

            id: "PC_ID",

            fields: {

                PC_ID: { type: "number", editable: false },

                PC_Text_de: { type: "string", validation: { required: true } },

                PC_Text_en: { type: "string", validation: { required: true } }

            }

        }

    },

    error: function (e) {

        console.log(e.errorThrown);

    }

})

[Alex Hajigeorgieva]

Hi, Frank,

Thank you very much for the provided screenshot and code.

The behaviour that you are describing in the pager of the Kendo UI Grid could be due to a failed destroy request.

Could you verify if the destroys are successful by inspecting the response/ debugging the server logic and/or by using the refresh on the pager? 
Would you also share the read action in the controller?

Look forward to hearing back from you.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

[Frank]

Hello Alex,

thanks for your answer, the item is just deleted fine in the controller and the response looks also fine. After refreshing the page everything is as it should be.

Antwort HTTP/1.1 200 OK
Cache-Control no-cache
Content-Length 176
Content-Type application/json; odata.metadata=minimal
Date Wed, 19 Sep 2018 15:32:13 GMT
Expires -1
OData-Version 4.0
Persistent-Auth true
Pragma no-cache
Server Microsoft-IIS/8.0
X-AspNet-Version 4.0.30319
X-Powered-By ASP.NET

 

The read function is just standard odata implementation

[EnableQuery(AllowedQueryOptions = AllowedQueryOptions.All)]
public IQueryable<ProductCategory> Get()
{
     return dbcontext.ProductCategory.Where(e => !e.PC_Deleted);
}

 

[Alex Hajigeorgieva]

Hi, Frank,

The only thing that seems different than the usual response, is the status code. 

Would you be able to check if at all possible to respond with JSON and the deleted item instead?

If this does not help, would you be able to send us project or give me as much information as possible so I can attempt to reproduce this error?

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

[Frank]

Hello Alex,

thanks again. I´ve sent you only the response header, the status code 200 comes from using the Ok-method to return the deleted item in the delete method (see the posted one), so the deleted item is returned as JSON.

I attached a small demo project in which the problem occurrs.

Kind regards

Frank

[Alex Hajigeorgieva]

Hi, Frank,

Thank you so much for the provided project that perfectly illustrates your point.

I can see the described behaviour which occur when server operations are used. I would need a little extra time to investigate if we can ensure the pager is refreshed in this occasion, meanwhile, you may add a requestEnd event handler and force a read:

requestEnd: function (e) {
    if (e.type === "destroy") {
        var grid = $('#gridProductCategories').data("kendoGrid");
        grid.dataSource.read();
    }
}

Thank you in advance for your understanding.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

[Alex Hajigeorgieva]

Hello, Frank,

Thank you very much for your patience.

After having discussed this with the team, with server operations enabled, it is not possible to have a different behaviour unless another read request is made. 

If we were to change the way the Kendo UI Grid works now, that would be a breaking change for all users who do not wish the additional read request being made on creating and destroying items. 

At this point, the option would be to issue another read request programmatically when an item is created or destroyed when the requestEnd event of the data source is triggered as demonstrated in my previous response.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

[Frank]

Hi Alex,

thanks for your help, I´m fine with your workaround.

Kind regards

Frank