Kendo UI and ObservableCollection

[Donald]

I've been using MVVM in my UWP code to great effect, so most of my data modelling is done with ObservableCollections.  I want to have 'live' data in my ListView, so that if I add an item it will appear automatically and if I delete it, it will disappear automaticall.  Do the Kendo UO control for .NET Core respect the ObservableCollection interface?  And what about fields, if I update the name on a record on a IPropertyChangeNotification object in an ObservableCollection, will that change feed through to the UI?

[Alex Hajigeorgieva]

Hello, Donald,

Thank you for giving the Kendo UI ListView a test run.

The data source data of any data-bound widget goes through observable wrapping which is underpinned by the Kendo UI MVVM framework. Every item in the data source has the highlighted added to it :

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



For the change event of the MVVM framework to be triggered, the set() method of the Observable Object should be used.

The Kendo UI ListView for ASP.NET Core is a wrapper for the JavaScript widget which provides a time-saving and convenient way to use both the server-side extension methods and Razor. So that the change is triggered, the editors which are used in the demo are bound with the "data-bind=value:someproperty" Kendo MVVM attributes. In effect, they perform the call to the set() method for you and the CRUD operation is triggered so a request is made to the server out of the box as long as the Actions are configured.

.DataSource(dataSource => dataSource
        .Ajax()
        .Model(model => model.Id("ProductID"))
        .Create(create => create.Action("Editing_Create", "ListView"))
        .Read(read => read.Action("Editing_Read", "ListView"))
        .Update(update => update.Action("Editing_Update", "ListView"))
        .Destroy(destroy => destroy.Action("Editing_Destroy", "ListView"))
    )

the demo that I referenced above is using the editors in ~Views/Shared/EditorTemplates which are part of the Telerik VSX template and ready to use but to see better what they render, check the edit template in the JavaScript section at:

https://demos.telerik.com/kendo-ui/listview/editing

So finally, to answer your question regarding the ObservableCollection, I suppose you could use it on the server when the change from the client is transmitted to the server. However, we do not yet have such example and if it is necessary, I would need some time to get it to you.

I hope the explanations above will give you a better idea. Let me know if there is anything else that I should delve into.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik