alternative data source for filtered and bound data
webix.ui({
view: "combo",
options: {
body: {
dataFeed: "//docs.webix.com/samples/server/countries"
}
}
});
The dataFeed setting defines an alternative data source for
url:"main/data", //loads data initially
dataFeed: "datafeed/data" //loads data afterwards
You can provide a URL string as a value for the dataFeed property. In the sample below it is used for server-side filtering of a combobox values.
Filtering dataset with dataFeed as a string
webix.ui({
view: "combo",
options: {
body: {
dataFeed: "//docs.webix.com/samples/server/countries"
}
}
});
In this case Combo dataFeed issues a GET request like ""url?filter[fieldID]=" + fieldValue", where:
With a dataFeed as a proxy object, you can:
Filtering dataset with dataFeed as a proxy
dataFeed:{
$proxy: true, // obligatory field
load: function(view, params){
// changing default "value" parameter to "title"
params["filter[title]"] = params.filter.value;
delete params.filter;
return (
webix.ajax(
"//docs.webix.com/samples/server/films_sortfilter", params
)
);
}
}
Keep in mind that you must return a promise with data from the load function.
With dataFeed as a function, you can
In the sample below the load method is used to load data and parse it to the list.
Filtering dataset with dataFeed as a function
dataFeed: function(text) {
// clearing list from previous values
this.clearAll();
this.load("//docs.webix.com/samples/server/countries?filter[value]=" + text)
}
You can send an Ajax request manually and return a promise with the data:
dataFeed: function(text) {
return webix.ajax("//docs.webix.com/samples/server/countries?filter[value]=" + text)
.then(data => {
// do smth with data
// ...
return data;
});
}
The dataFeed property can be used during binding data components and collection. It allows you to reload data in the bound component directly from the server, not from the master component as expected.
By default, a slave component takes data from the master component. With dataFeed, it requests data from another source, e.g. server.
Simulating remote data for dataFeed
{
view:"datatable",
dataFeed:"remote/data",
//or
dataFeed:function(id, obj){
return webix.ajax("remote/data");
}
//or
dataFeed:{
$proxy:true,
load:function(view, params){
return webix.ajax("remote/data");
}
}
};
Related sample: Datatable: Binding Collections with dataFeed
When used with data components dataFeed as a function takes the following parameters:
Whereas the load function inside the dataFeed as a proxy takes the following parameters:
When used as a string, dataFeed issues a GET request like ""url?filter[fieldID]=" + fieldValue", where:
For Form you can define dataFeed as a string or as a function only. Using dataFeed as a function allows modifying data before it is parsed into the form.
dataFeed with Form
const form = {
view:"form",
dataFeed:"//docs.webix.com/samples/40_serverside/01_php/server/form.php",
//or
dataFeed: function(id){
webix.ajax("//docs.webix.com/samples/40_serverside/01_php/server/form.php?id="+id)
.then(data => {
data = data.json()[0];
this.setValues(data);
});
}
};
Related sample: Datatable: Binding with Form
When used with as a string, dataFeed issues a GET request like data/form.php?action=get&id=" + fieldValue, where