Syncing 2 different Jetviews from the same DataCollection

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

Comments

  • edited December 6

    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.

  • edited December 6

    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);
    
  • edited December 6

    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 :-(

  • edited December 7

    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!!!

Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!