This is a migrated thread and some comments may be shown as answers.

How to remove item from Grid without triggering datasource destroy()

5 Answers 1331 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Grant
Top achievements
Rank 3
Iron
Iron
Veteran
Grant asked on 16 Feb 2018, 11:08 AM

Hi, 

As the title says, Im trying to remove a row from my grid without it affecting the datasource. The reason for this is that I have a list of ACTIVE users and if one is updated to be INACTIVE I need to remove it from the grid.

Things I've tried in the dataSource requestEnd(), if the type is an update, and the response object is inactive:
 1) Remove it from the datasource. This does not work, becuase the next DS sync thats run, calls the destroy method on the deactivated record
 2) execute a filter() on the dataSource to only display ACTIVE users but I get a JavaScript error "Uncaught TypeError: Cannot read property 'status' of undefined" and it points to the lie where the filter is executed.

Any advice would be appreciated.

Thanks and Kind Regards,
Grant

5 Answers, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 20 Feb 2018, 07:27 AM
Hello, Grant,

Thank you for the details.

Based on the description I can assume that the filter approach will be the best one as it will use a built-in API.

If possible please provide the Grid configuration and any accompanying JavaScript functions, and I will try to test why the JavaScript error occurs. In general, in the described case, the Grid should be filtered as expected with no errors:

https://docs.telerik.com/kendo-ui/api/javascript/data/datasource/configuration/filter

I will be expecting the additional details.

Regards,
Stefan
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Grant
Top achievements
Rank 3
Iron
Iron
Veteran
answered on 23 Feb 2018, 08:42 AM

I Stefan, 

I've been trying to implement the filter in different ways, but the only way it works if I include it when initializing the dataSource. I also cannot duplicate it in the kendo dojo :(.

The fields in my Grid are "name" & "status", both have string values.
In the requestEnd of the DS, I run this:

requestEnd: function(e) {
  if (e.type === "update") {
    if (e.response.data.status === "INACTIVE") {
      this.filter({ field: "status", operator: "eq", value: "ACTIVE" });
    }
  }
},

But any time I try to execute the filter(), or even if the filter is in place (on initialization) and I clear it, I get the JS error "Uncaught TypeError: Cannot read property 'status' of undefined"

I tried to monitor whats happening using the change event on the grid, but it was never triggered.

Thanks,
Grant

0
Alex Hajigeorgieva
Telerik team
answered on 27 Feb 2018, 08:56 AM
Hello, Grant,

My name is Alex and I will take over this thread while my colleague Stefan is away.

It seems to me that the best approach here is to have an initial filter if you would like to set the default view for the users to see active items only. I understand that you have already tried that and got an error but I am not able to reproduce such error when I test in a similar scenario as I imagine you have on your hands. It would be most helpful if you let me know what are the differences between the Dojo below and the implementation of your project:

https://dojo.telerik.com/@bubblemaster/oZePET

There are few things that can go wrong so it would be best to get the complete picture so we can provide you with the most appropriate advice.

On a side note, unless there are other statuses, I feel that the best approach would be to have the "status" field as a boolean instead of a string.

Look forward to hearing back from you.

Regards,
Alex Hajigeorgieva
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Grant
Top achievements
Rank 3
Iron
Iron
Veteran
answered on 12 Mar 2018, 01:52 PM

Hi Alex, 

My apologies for leaving this thread so long, but some other functionality had been moved up the priority list. I came back to this issue today and was actually able to solve it.

Its a little hard to explain, but I'll do my best.
The example I posted previously was a shortened version of my code, the full snippet is as follows

requestEnd: function(e) {
  if (e.response && e.response.status === "SUCCESS") {
    if (e.type === "update") {
      // If the access level is updated to be INACTIVE and the grid is hiding INACTIVE access levels
      // run a filter on the grid to only display ACTIVE Access Levels
      if (e.response.data.status === "INACTIVE" && !$("#checkbox-includeInactive").is(":checked")) {
        this.filter({ field: "status", operator: "eq", value: "ACTIVE" });
      }
    }
  }
},

If you look at line 2, there's and 'e.response.status' field Im checking which indicates a successful response from the server, this was the status that was undefined whenever I ran the filter, not the 'status' field within the data.

I found this by putting a console log in the requestEnd and noticed that another request of type 'read' was ending after the filter was applied. The object in this second request end did not contain a 'response' object, and therein lied my error.

I really appreciate your time and effort and Im sorry it was a waste.

Kind Regards,
Grant

0
Alex Hajigeorgieva
Telerik team
answered on 13 Mar 2018, 07:54 AM
Hello, Grant,

Thank you for your feedback. We are pleased to hear it is all sorted now. 

A "console.log()" can be a man's best friend, indeed. I wanted to just share the requestEnd API reference for completeness:

https://docs.telerik.com/kendo-ui/api/javascript/data/datasource/events/requestend

Kind Regards,
Alex Hajigeorgieva
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Grid
Asked by
Grant
Top achievements
Rank 3
Iron
Iron
Veteran
Answers by
Stefan
Telerik team
Grant
Top achievements
Rank 3
Iron
Iron
Veteran
Alex Hajigeorgieva
Telerik team
Share this question
or