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

2-4. Processing Data with Webix Widgets

By ihelga

2-4. Processing Data with Webix Widgets

Widget Data Storage. Modifying and ordering data. Linking data between app wdigets.

ihelga

webix.com

Processing Data with Webix Widgets

Data Storage

Data Storage

DataStore API

DataStore Only API

Modifying Data

Ordering Data

UI Controls

UI Controls

Data Relations

Data Relations

Data Binding

Data Binding

Data Syncing

Data Collections

Why Collection?

Syncing to Data Collection

Binding to Data Collection

2-4. Processing Data with Webix Widgets

More from ihelga