Moving pager below component (rather than above it)

Webix JS
#1

I create a list component with it’s own pager, and it works as expected. However the pager element appears above the list – is there any way I can make it appear below the component?

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

@Component({
  selector: 'test',
  template: ""
})
export class TestComponent implements OnDestroy, OnInit {
  private ui: webix.ui.list;
  container: ElementRef;

  constructor(root: ElementRef) {
    this.container = root.nativeElement;
  }

  ngOnInit() {
    this.loadData()
    this.ui.resize();
  }

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

  loadData() {
    this.ui = <webix.ui.list>webix.ui({
      container: this.container,
      view: "list",
      height: 700,
      width: 300,
      pager: {
        container: this.container,
        size: 10,
        group: 5,
        height: 50,
        width: 300
      },
      url: 'my-api/url',
    });
  }
}
#2

Hey @username12345
In your case you need to use Pager as separate view. Add property “pager” to view “list”. Below this view you should write down the view “pager” with your custom logic and properties. You can find a description of this topic in the documentation.

Check out the snippet with solution.

1 Like