Processing Data with Webix Widgets

DataStore

DataCollection

Data Relations

Data Storage

DataStore

TreeStore

    // Datastore/Treestore accessor
    $$("table").data;
    $$("tree").data;

    webix.ui({ view:"datatable", id:"table", data:[
        { id:1, name:"Alex", age:31},
        { id:2, name:"Christin", age:28}
    ]});

    //all records as hash
    $$("table").data.pull;
    
    {
        1:{ id:1, name:"Alex", age:31},
        2:{ id:2, name:"Christin", age:28}
    }
    
    //current order in component as plain array
    $$("table").data.order;
    
    [ 1, 2]

Data Storage

DataStore

TreeStore

    // Datastore/Treestore accessor
    $$("table").data;
    $$("tree").data;

    webix.ui({ view:"datatable", id:"table", data:[
        { name:"Alex", age:31},
        { name:"Christin", age:28}
    ]});
    
    //all records as hash
    $$("table").data.pull;
    
    {
        1510240943485:{ id:1510240943485, name:"Alex", age:31},
        1510240943486:{ id:1510240943486, name:"Christin", age:28}
    }
    
    //current order in component as plain array
    $$("table").data.order;
    
    [ 1510240943485, 1510240943486]

DataStore API

getting items
iterating items
CRUD operations
filter
sorting

methods

events

Component API

$$("table").data.getItem(1); or $$("table").getItem(1);

$$("table").data.clearAll(); or $$("table").clearAll();

$$("table").data.attachEvent("onAfterAdd", handler);
//equal to
$$("table").attachEvent("onAfterAdd", handler);

Datastore API

DataStore Only API

$$("table").data.attachEvent("onAfterFilter", handler);

Events: onAfterFilter, onStoreUpdated, etc..


webix.ui({
    view:"datatable",
    on:{
        "data->onAfterFilter":handler
    }
});

Iterate items

$$("table").data.each(function(obj){
    //your code
});

+ eachChild(), eachLeaf() for Tree

Perform specific operations

$$("table").data.changeId(7, 777);

Modifying Data

view.add(data)
view.updateItem(id, update)
view.remove(id)

DataStore-based
Work with

view.data.pull
view.data.order

    $$("table").data.pull;
    
    {
        1:{ id:1, name:"Alex", age:31},
        2:{ id:2, name:"Christin", age:28}
    }
    
    $$("table").data.order;
    
    [ 1, 2]

view.getItem(id)

Ordering Data

view.filter(rule);
view.sort(rule);
view.move(id, target); //drag-n-drop

view.getIdByIndex(ind);
view.getIndexById(id);
view.getFirstId() / view.getLastId();
view.getNextId(id) / view.getPreviousId(id);

    $$("table").data.order;
    
    [ 1, 2, 3, 4, 5, 6, 7, 8]
    
    //sorted
    [ 5, 6, 3, 8, 1, 3, 4, 2]

    //filtered
    [ 5, 6, 3 ]

UI Controls

    view:"datatable", columns: [
        { id:"title", sort:"int", //"string", "date", etc.
          header:{ content:"textFilter"} //"selectFilter", "datepickerFilter"
        }
    ]

Filtering and sorting:

Data updates:

    view:"datatable", editable:true, columns:[
        { id:"title", editor:"text"} //combo, date, color, etc.
    ]

Data move:

    view:"datatable", 
    drag:true //"source", "target"

UI Controls

    view:"datatable", columns: [
        { id:"title", sort:function(a, b){
            a = a.title;
            b = b.title;
            return a>b?1:(a<b?-1:0);
         },
         header:{ content:"textFilter", compare:function(value, filter){
             return value.indexOf(filter) === 0;
         }}
        }
    ]

Filtering and sorting:

Data updates:

    view:"datatable", editable:true, columns:[
        { id:"title", editor:"text"} 
    ],
    on:{
        onBeforeEditStart:function(id){
            //deny editing for some records
            if(id<=1) return false;
        },
        onBeforeEditStop:function(state, editor){
            // prevent from saving the empty value
            if(!state.value) return false;
        }
    }

Data Relations

One data widget depends on another - Binding

$$("myform").bind($$("mydata"));
$$("myform").save();

selection-based
master and slave (s)

Data Relations

One data widget depends on another - Binding

Two data widgets share the same data - Syncing

$$("myform").bind($$("mydata"));
$$("myform").save();

selection-based
master and slave (s)

webix.ui({
    cols:[
        { view:"list", id:"list", select:true, data:[...]},
        { view:"datatable", id:"table", autoConfig:true }
    ]
});

$$("mydata").sync($$("list"));

master and slave (s)

Data Binding

$$("mydata").attachEvent("onAfterSelect", function(id){
    var item  = this.getItem(id);
    $$("myform").setValues(item);
});

$$("myform").attachEvent("onChange", function(){
    var values = this.getValues();
    $$("mydata").updateItem(values.id, values);
});

* form elements should have names

Text

Data Binding

$$("myform").bind($$("mydata"));

$$("myform").save();

$$("myform").attachEvent("onChange", function(){
   this.save();
});

* form elements should have names

master selection

slave

master

slave .save()

Text

Data Syncing

Sync them!

    webix.ui({
        cols:[
            { view:"list", id:"list", select:true, data:[...]},
            { view:"datatable", id:"table", autoConfig:true }
        ]
    });
    
    $$("mydata").sync($$("list"));

Edit: master

Add: master

slave

Remove: master

slave

Data Collections

Abstract and invisible

'viewless'

Painted

in UI

'view'

DataCollection

DataTable

List, DataView

Chart

TreeTable, Tree

TreeCollection

Why Collection?

$$("list").sync(collection);

$$("table").sync(collection, function(){
  this.filter(function(obj){
      return obj.rank%2;
  });
});

Load once, then work on client side
Up-to-date data in different app parts
Possible to sync only part of the data

Syncing to Data Collection

    var collection = new webix.DataCollection({
      data:grid_data
    });
    
    webix.ui({
        rows:[
            {view:"list", id:"list"},
            {view:"datatable", id:"table"}
        ]
    });
    
    
    $$("list").sync(collection);
    $$("table").sync(collection);

Edit: master collection

Add: master collection

Remove: master collection

slave views

Binding to Data Collection

var collection = new webix.DataCollection({
  data:grid_data
});

....
{ view:"list", id:"list" }
{ view:"datatable", id:"table" }
{ view:"form", id:"form" }
....

$$("list").sync(collection);
$$("table").sync(collection);

master collection.setCursor(id)

master collection

slave view

slave view.save()

$$("form").bind(collection);

$$("list").attachEvent("onAfterSelect", function(id){
    collection.setCursor(id);
});

$$("table").attachEvent("onAfterSelect", function(id){
    collection.setCursor(id.row);
});


//form is always up-to-date