Datatable component is not displaying data pulled from server via API call

Webix JS
1

Goal is to use webix.ui.datatable and Angular to pull data from server and display it.
My datatable component:

import { Component, Input, ElementRef, OnDestroy, OnInit, Output, EventEmitter } from '@angular/core';
import { Subject } from 'rxjs';
import { HttpClient } from '@angular/common/http';
import { environment } from '../../environments/environment.test';

@Component({
  selector: 'datatable',
  template:""
})
export class DataTableComponent implements OnDestroy, OnInit {
  private ui : webix.ui.datatable;
  //private userData: any[] = [];
  dtTrigger: Subject<any> = new Subject<any>();

  constructor(private http: HttpClient, root: ElementRef) {
    this.ui = <webix.ui.datatable>webix.ui({
      container: root.nativeElement,
      view: "datatable",
      autoConfig: true,
      autoheight: true,
      /*url: function () {
        let endpoint = "my_endpoint";
        let headers = "my_headers";
        let path = endpoint + '/test/path';

        var promise = webix.ajax().headers(headers).get(path);
        promise.then(function (data) {
          let userData = data.json().data;
          console.log(userData); //this is working -- an array of objects of format {col1: "data", col2: "data"}
          return userData;
        });

        promise.catch(function (err) {
          console.log('Failed to load data');
        });
      }*/,
      data: [
        { id: 1, title: "The Shawshank Redemption", year: 1994, votes: 678790, rating: 9.2, rank: 1, category: "Thriller" },
        { id: 2, title: "The Godfather", year: 1972, votes: 511495, rating: 9.2, rank: 2, category: "Crime" },
        { id: 3, title: "The Godfather: Part II", year: 1974, votes: 319352, rating: 9.0, rank: 3, category: "Crime" },
        { id: 4, title: "The Good, the Bad and the Ugly", year: 1966, votes: 213030, rating: 8.9, rank: 4, category: "Western" },
        { id: 5, title: "Pulp fiction", year: 1994, votes: 533848, rating: 8.9, rank: 5, category: "Crime" },
        { id: 6, title: "12 Angry Men", year: 1957, votes: 164558, rating: 8.9, rank: 6, category: "Western" }
      ],
    });
  }

  ngOnInit() {
    this.ui.resize();
  }
  ngOnDestroy() {
    this.ui.destructor();
  }
}

I use datatable in parent.component.html as:

<rows type="space" class="pagebox">
  <columns>
    <cell><datatable class='pagebox'></datatable></cell>
  </columns>
</rows>

As you can see, I have loaded static data via the data parameter in the constructor, which is displaying as expected.
But when I follow the documentation to load data through an AJAX call via the url parameter (commented out in the code above), the datatable does not display any data or column names. I can confirm that the data returned by the ajax call is an array of objects. Any input on how to solve this is appreciated.

2

you need to return promise in your function.
try to change function like that

url: function () {
  let endpoint = "my_endpoint";
  let headers = "my_headers";
  let path = endpoint + '/test/path';

  var promise = webix.ajax().headers(headers).get(path);
  promise = promise.then(function (data) {
    let userData = data.json().data;
    console.log(userData); //this is working -- an array of objects of format {col1: "data", col2: "data"}
    return userData;
  });

  promise = promise.catch(function (err) {
    console.log('Failed to load data');
  });
  return promise;
}

https://docs.webix.com/api__link__ui.datatable_url_config.html#:~:text=return%20webix.ajax("some/path")%3B

3

Duh, of course. Worked perfectly. Thanks!

4

what if I wanted to clean the data returned by server before returning promise itself? How can I achieve that?

5

try to use removeMissed property.
or catch “data->onparse” event and do clearAll there

on:{
           "data->onparse": function(){
             this.clearAll()
           }
         }

or store table reference and clear old records just before data return in promise (not recommended)

6

When I set autoheight: false or remove it altogether, the table does not render. However when I set it it to true, the table loads only some records (according to the width and height of the cell it is contained in) but the scroller does not appear, which is expected as per the docs. How can I get the vertical scroller to appear? Setting scrollY explicitly to true does not make a difference

import { Component, ElementRef, OnDestroy, OnInit } from '@angular/core';

@Component({
  selector: 'datatable',
  template:""
})
export class DataTableComponent implements OnDestroy, OnInit {
  private ui : webix.ui.datatable;

  constructor(root: ElementRef) {
    this.ui = <webix.ui.datatable>webix.ui({
      container: root.nativeElement,
      view: "datatable",
      autoheight: true,
      columns: [
        { id: "id", header: "ID", adjust:"data" },
        { id: "name", header: "Name", adjust:"data" },
        { id: "email", header: "Email", adjust:"data" },
        { id: "phoneNo", header: "Phone Number", adjust: "data" },
        { id: "role", header: "Role", adjust: "data" },
        { id: "customer", header: "Customer", adjust: "data" },
        { id: "type", header: "Customer", adjust: "data" },
        { id: "isActive", header: "Active", adjust: true }
      ],
      url: function() {
        let endpoint = some_endpoint;
        let headers = some_headers;
        let path = endpoint + '/some/path';

        var promise = webix.ajax().headers(headers).get(path);
        promise.then(function (data) {
          console.log(data.json().data); //working
        });

        promise.catch(function (err) {
          console.log('Failed to load data');
        });

        return promise;
      }
    });
  }

  ngOnInit() {
    this.ui.resize();
  }
  ngOnDestroy() {
    this.ui.destructor();
  }
}
7

most probably, the container (root.nativeElement) does not have height setting (like height:200px; or height:20vh; in style)
either container or component should have explicit height in case of autoheight:false

1 Like