dataFeed

alternative data source for filtered and bound data

string| object| function dataFeed;

Example

webix.ui({
  view: "combo",
  options: {
    body: {
      dataFeed: "//docs.webix.com/samples/server/countries"
    }
  }
});

Related samples

Combo: Using dataFeed

Details

The dataFeed setting defines an alternative data source for

Combo boxes to load data during filtering when users type text into the input field
Forms and data components bound to other components to load data when it is requested by a master component.

url:"main/data", //loads data initially
dataFeed: "datafeed/data" //loads data afterwards

Using as a string

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:

fieldID - ID of the field data used for filtering ("value" by default);
fieldValue - input value user typed in.

Using as a proxy

With a dataFeed as a proxy object, you can:

manually send an Ajax request with the needed parameters
modify data before parsing it into component.

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.

Using as a function

With dataFeed as a function, you can

manually send an Ajax request with the needed parameters
manually load or parse data into the component.

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;
   });
}

Using dataFeed for bound Data components

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");
    }
  }
};

When used with data components dataFeed as a function takes the following parameters:

id (number) - element ID;
obj (object) - object with the name of the field and its value.

Whereas the load function inside the dataFeed as a proxy takes the following parameters:

view (object) - Webix view;
params (object) - parameters for filtering.

When used as a string, dataFeed issues a GET request like ""url?filter[fieldID]=" + fieldValue", where:

fieldID - ID of the field data used for filtering ("id" by default);
fieldValue - data field value.

Using dataFeed for bound Forms

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);
    });
  }
};

When used with as a string, dataFeed issues a GET request like data/form.php?action=get&id=" + fieldValue, where

fieldID - ID of the field data used for filtering ("id" by default);
fieldValue - data field value.