Syncing 2 different Jetviews from the same DataCollection

Is it possible to sync 2 Jetviews (1 dataview and 1 datatable) sharing the same DataCollection?

Hi David,

Yep, you can sync two views to the same Data Collection. You can define this collection in models:

//models/data.js
export const data = new webix.DataCollection({...});

And use in views:

//views/datatable.js
import {data} from "models/data";

export default class DataView extends JetView{
	config(){
		return {
			view:"dataview"
		};
	}
    init(view){
         view.sync(data);
    }

And the same logic for DatatableView.

Ok thank you, this is exactly what I tried and it doesn’t work, which means I probably missed something… somewhere… I’ll double-check my code!

Thank you by the way, at least I know I’m on the right track.

Here is what I did.

The model:

// models/applications
export const dataApplications = new webix.DataCollection({
    url: "/applications",
    save: "rest->/applications"
});

The view
(here, it’s a workspace that displays a list of applications. When you click on an app, it opens the corresponding app in its own window) :

// views/workspace
import { JetView } from "webix-jet";
import { dataApplications } from "models/applications";

export default class ViewWorkspace extends JetView {
    config() {
        return {
            type: "clean",
            rows: [{
                    view: "template",
                    template: "Your company name",
                    css: "workspace-header",
                    minHeight: 50,
                    gravity: 1
                },
                {
                    view: "resizer"
                },
                {
                    view: "dataview",
                    id: "workspace-apps",
                    type: "clean",
                    gravity: 3,

                    type: {
                        css: 'workspace-app',
                        height: 300,
                        width: 300
                    },

                    template:
                        "<table>" +
                        "<tr><th>#name#</th></tr>" +
                        "<tr><td>Description: #description#</td></tr>" +
                        "</table>",

                    data: dataApplications,

                    click: (id) => {
                        this.show('/workspace/app?id=' + id)
                    }
                }
            ]
        }
    }

    init(view, url) {
        view.sync(dataApplications);
    }
}

In another view, the DataCollection ‘dataApplications’ is modified: I can add / remove records from there, but when I come back to the workspace view, the data remains unchanged (not synced).

Maybe it’s just a bug with JetViews syncing process?

Just in case, I’ve also tried other syntaxes, without success:

    $$("workspace-apps").sync(dataApplications);
or
    view.data.sync(dataApplications);
or
    $$("workspace-apps").data.sync(dataApplications);

Try removing the data: dataApplications line from the dataview configuration.

And in the init code use either of the following lines:

//access dataview by id
$$("workspace-apps").sync(dataApplications);

//or by its position in hierarhy, as 'view' is the top view returned by config()
view.getChildViews()[2].sync(dataApplications)

Thank you Olga for your prompt reply.
I’ve just tried => same result, no sync

I can add / remove records from there

By the way, do you add and remove your records from the related view, or from the Data Collection?

The correct way is to perform add/remove operations on the master collection while synced views will reflect these changes automatically. Slave views can only update the master.

I was adding/removing from the related view, because I thought that using the “sync” method, the view would pass the calls to add/update/remove to the DataCollection.

Now everything is clear and works fine. Thanks you!!!