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

Kendo UI Grid with offline storage and custom schema record disappearing

14 Answers 349 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Michel
Top achievements
Rank 1
Michel asked on 07 Dec 2017, 03:56 AM
The record is removed when cancelling the edit of a new record.

JSFiddle: http://dojo.telerik.com/adAZa

Steps:
1. Click Add new Record
2. Click Update
3. Click Edit
4. Click Cancel

Record is Gone.

Click Refresh

Record is back!

14 Answers, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 08 Dec 2017, 01:45 PM
Hello, Michel,

Thank you for the example.

The issue occurs because there is no update transport defined in the Grid and the update is not actually made. That is why when the cancel button is clicked this is calling cancel changes and it is removing all of the unsafe changes.

Noticed that this is not observed in our demo where there is a transport update setup:

http://demos.telerik.com/kendo-ui/grid/offline

https://docs.telerik.com/kendo-ui/framework/datasource/offline

Please let me know if you need additional information on this matter.

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
Michel
Top achievements
Rank 1
answered on 11 Dec 2017, 06:08 PM

The grid is off-line, no update should happen.

The bug is using off-line mode with custom schema config.

0
Michel
Top achievements
Rank 1
answered on 11 Dec 2017, 06:08 PM

The grid is off-line, no update should happen.

The bug is using off-line mode with custom schema config.

0
Stefan
Telerik team
answered on 13 Dec 2017, 08:39 AM
Hello, Michel,

Please advise which is the expected result in this scenario?

When the dataSource is in offline mode, it will save all of the changes in the local storage and it will make the update once the dataSource is again in online mode.

As for the schema, the issue occurs because the data is the response, and setting the schema.data to "data" will force the Grid to look for its data in response.data which is empty. The same is applicable for schema.total, schema.groups and schema.aggregates:

http://dojo.telerik.com/adAZa/5

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

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
Michel
Top achievements
Rank 1
answered on 13 Dec 2017, 11:19 AM

As for the schema, the issue occurs because the data is the response, and setting the schema.data to "data" will force the Grid to look for its data in response.data which is empty.

The grid is offline. No response or its data in response should be expected. It should have data in response when it becomes online again.

The expected result is to save the data on the offline storage normally, even with a custom schema.

 

 

0
Stefan
Telerik team
answered on 14 Dec 2017, 09:17 AM
Hello, Michel,

Even if the Grid is in offline mode a response is still expected, it is just received from the local storage.

In this case, we recommend using a function for the schema.data and the others schema options as this will allow checking if the Grid is in offline mode. Then the function should return a response, and in online mode to return response.data:

http://dojo.telerik.com/adAZa/6


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
Michel
Top achievements
Rank 1
answered on 14 Dec 2017, 12:59 PM

My datasource has a transport, not a function.

Even if the Grid is in offline mode a response is still expected, it is just received from the local storage.

No response exists if the grid is offline, it is just nonsense.

And the bug still exists even if I store it respecting the schema. Notice that, after the record disappearing, it nows appears when you click refresh on the grid, which means that it is now being stored and retrieved correctly. The bug is on your side, I believe you are checking the record as new, even when editing a newly inserted record (which is wrong), and removing it from the view on cancel edit.

- cancel new should remove from view - working as expected;

- cancel edit shouldn't remove from view - not working even after hitting refresh;

- cancel "edit new"  shouldn't remove from view - not working.

http://dojo.telerik.com/ijOSU

It should work offline, without acrobatic manuevers.

0
Stefan
Telerik team
answered on 18 Dec 2017, 07:19 AM
Hello, Michel,

I have consulted with the developers' team and I can confirm that the described result is expected.

I will try to provide a more descriptive explanation of why this is happening.

When the Grid is using the "offline" mode it uses the browser local storage as an improvised data storage to which the new data should be sent and from where the data should be retrieved. It may look strange at first that the Grid is in offline mode, but it is still making requests, but this is how the offline functionality is working.

In the discussed scenario, the data received from the local storage is located inside the response variable directly which is causing the clearing of the data, as it is not finding any data in the response.data variable.

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
Michel
Top achievements
Rank 1
answered on 18 Dec 2017, 12:10 PM

I don't think you checked my last dojo, on my last response, when I updated using a custom storage.

http://dojo.telerik.com/ijOSU

In the discussed scenario, the data received from the local storage is located inside the response variable directly which is causing the clearing of the data, as it is not finding any data in the response.data variable.

Again not working as expected. Notice that in the last dojo, I put the data on the local storage respecting the schema (response.data):

sessionStorage.setItem('session-kendo-demo', JSON.stringify({data: item}));

Quoting myself:

Notice that, after the record disappearing, it nows appears when you click refresh on the grid, which means that it is now being stored and retrieved correctly.

So, it is working as expected only when reading data from the storage. When the record disappears, the storage's getItem method isn't even called.

Again, it is clearly a bug.

0
Preslav
Telerik team
answered on 20 Dec 2017, 11:59 AM
Hello Michel,

In the provided Dojo, as you put the data in the "data" object, it is located there. That said, I am not sure what is the issue, thus, please elaborate.

With the above said, I created a short video demonstrating that in the local/session storage the data is inside the "data" object:


Regards,
Preslav
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
Michel
Top achievements
Rank 1
answered on 10 Jan 2018, 12:44 AM

Sorry, I was out of office.

The data *is* persisted. the issue isn't about persisting the local data. Is about cancelling a newly inserted row. Using the following dojo:

http://dojo.telerik.com/ijOSU

1. Click 'Add New Record'

2. On the new record row, put 'Some Product' as the new name and '10' as the value.

3. Click Update

4. Click on 'Edit' on the only Record.

5. Now click in Cancel.

6. The record disappears from the grid (BUG!).

====

Note that the record is persisted. After the steps are done, try clicking refresh. It reads from the storage, respecting the schema.

Repeat the steps 4-6 again. The same bug happens.

 

 

0
Stefan
Telerik team
answered on 11 Jan 2018, 09:48 AM
Hello, Michel,

Thank you for the example and the steps.

As described this occurs because the custom schema is telling the Grid to search for its data in response.data, but the local storage is returning directly the data(response). If the schema is set as a function to parse response depending on the dataSource mode the example is working as expecting:

http://dojo.telerik.com/ijOSU/6

This is the expected result based on the implementation and if you consider this unexpected please submit a feature request as changing it without the approval from the community will cause a breaking change for all of the users which are using it as intended:

http://kendoui-feedback.telerik.com/forums/127393-telerik-kendo-ui-feedback/filters/new?category_id=63716

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
Michel
Top achievements
Rank 1
answered on 12 Jan 2018, 12:30 AM

Your solution works when the grid has no transport.

In my case, the real grid has a transport (which I cann't put public, and I don't have a simple sample) with a custom schema.

The "data" function isn't called in that case.

This is a show-stopper. The grid isn't reliable when used offline *and* with a custom schema. The record 'll still disappears from the grid. I cann't approve the purchase of the component with this feature broken.

If you can, repeat the test case using both:

- A custom schema

- A transport.

I hope that I can make you understand the issue.

0
Stefan
Telerik team
answered on 15 Jan 2018, 01:49 PM
Hello, Michel,

I'm sorry to hear that this is a show-stopper for using the Grid. If we receive an example reproducing the full issue we will be able to log it and fix it or advise if something in the configuration has to be changed.

I made an example with transport and the schema.data was called as expected:

http://dojo.telerik.com/odAxe

Thank you for collaborating with us on locating a possible issue with the Kendo UI Grid.

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.
Tags
Grid
Asked by
Michel
Top achievements
Rank 1
Answers by
Stefan
Telerik team
Michel
Top achievements
Rank 1
Preslav
Telerik team
Share this question
or