I copied the example "Grid 2 (with local Pagination)" into my project, but the pagination does not appear.

[LRHF]

Hi,
I copied "Grid 2 (with local Pagination)" from example 1 into my existing Aurelia project, but the pagination does not show up.
I cloned the repo and I can see the pagination working properly in localhost. However, it does not show up in my project.

I followed these steps:

• npm install aurelia-slickgrid (which installed "6.2.1")
• Included the jquery window entries:
  
• The styles: @import '~@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-bootstrap.scss';
• And the plugin: .plugin(PLATFORM.moduleName("aurelia-slickgrid"))
• Finally I copied all the code (HTML and .ts files):
  
  But the grid does not show the pagination.
  

What am I missing? I spent hours browsing in the examples files but couldn't find anything useful.
Note: other features like sorting and hiding columns work fine, sandwich menu, etc.
Thanks!

[ghiscoding]

The jQuery requirement was dropped, you don't need it anymore (unless you still use Bootstrap 4 then that lib version still requires jQuery). I cannot help without a repro and you did not show any code. I would suggest you download the Aurelia-Slickgrid-Demos and start from there. You should also check if you have any console error, you could also inspect if the div container for the pagination is created at all, it has the .slick-pagination-container CSS class that you could query against

[LRHF]

Thanks for your answer. I found the issue. I had these 2 lines inside of activate():

  this.dataset1 = this.mockData(1000);
  this.dataset2 = this.mockData(1000);

But it's compulsory for them to be in attached(), I didn't see that in the documentation, even putting them in the contructor() does not work. It's a tricky error because you are able to see the rows in the grid, but the .slick-pagination-container is not generated and no errors are displayed in the Console.

Another observation, I'm using Font Awesome 6 Free and the font-width: 900 is compulsory, otherwise you cannot see the icons. And there in no SCSS variable for that, so I had to do it manually:

.slick-pagination .slick-pagination-nav .pagination .page-item a[class*=icon-seek-] {
  font-weight: $fa-style;
}

[ghiscoding]

You should read the Styling Wiki which has docs on how to use it with SASS and it has a link to the SASS variables. I spent a ton of hours, mostly in my spare time for free, writing these docs but I know they are not perfect and if you think you can improve them then please contribute a PR. There is a SASS variables for text font-size and icon font-size, I'm not sure if it's properly used in the pagination but again please contribute a PR if you see possible enhancement, I stopped using Font-Awesome since v4

The data cannot be instantiated in the constructor because the grid must be created prior to add any data to it and that happens in the attached lifecycle. I mean, you could create your data in the constructor but the final assignment to the this.dataset = must be at the minimum in the attached lifecycle because again the grid needs to exist before we can assign any data to it

basically the creation of the grid internally (via new Slick.Grid()) is created in the attached lifecycle so...

aurelia-slickgrid/src/aurelia-slickgrid/custom-elements/aurelia-slickgrid.ts

Lines 270 to 285 in 8c6bc2e

	attached() {
	this._eventHandler = new Slick.EventHandler();
	this.initialization(this._eventHandler);
	this._isGridInitialized = true;
	// recheck the empty warning message after grid is shown so that it works in every use case
	if (this.gridOptions?.enableEmptyDataWarningMessage) {
	const dataset = this.dataset || [];
	if (Array.isArray(dataset)) {
	const finalTotalCount = dataset.length;
	this.displayEmptyDataWarning(finalTotalCount < 1);
	}
	}
	}
	initialization(eventHandler: SlickEventHandler) {

aurelia-slickgrid/src/aurelia-slickgrid/custom-elements/aurelia-slickgrid.ts

Lines 369 to 373 in 8c6bc2e

	// build SlickGrid Grid, also user might optionally pass a custom dataview (e.g. remote model)
	this.grid = new Slick.Grid(`#${this.gridId}`, this.customDataView || this.dataview, this._columnDefinitions, this.gridOptions);
	this.sharedService.dataView = this.dataview;
	this.sharedService.slickGrid = this.grid;
	this.sharedService.gridContainerElement = this.elm as HTMLDivElement;