diff --git a/vaadin-grid.html b/vaadin-grid.html index cef3922f6..a6f6e60bc 100644 --- a/vaadin-grid.html +++ b/vaadin-grid.html @@ -50,6 +50,36 @@ +### Lazy Loading with Function Data Provider + +In addition to assigning an array to the items property, you can alternatively +provide the vaadin-grid data through the `dataProvider` function property. +The vaadin-grid element calls this function lazily, only when it needs more data +to be displayed. + +See the `dataProvider` in +the API reference below for the detailed data provider arguments description, +and the remote data +live example. + +__Note that when using function data providers, `size` always needs to be +set manually.__ + + grid.size = 200; // The total number of items + grid.dataProvider = function(params, callback) { + var url = 'https://api.example/data' + + '?page=' + params.page + // the requested page index + '&per_page=' + params.pageSize; // number of items on the page + + var xhr = new XMLHttpRequest(); + xhr.onload = function() { + var response = JSON.parse(xhr.responseText); + callback(response.employees); + }; + xhr.open('GET', url, true); + xhr.send(); + }; + ### Styling The following custom properties and mixins are available for styling: