Skip to content
This repository was archived by the owner on Jun 1, 2025. It is now read-only.

HOWTO Step by Step

Jump to bottom
Ghislain B edited this page Aug 20, 2019 · 119 revisions

1. Install NPM Package

Install the Angular-Slickgrid, Slickgrid, Bootstrap 3.x (or 4.x), Font-Awesome and jQuery 3.x NPM packages with

npm install --save angular-slickgrid jquery bootstrap font-awesome
# or with yarn add

Important note about ngx-translate

Angular 7

Angular 7 should be fine with current dependencies in the lib, they are set at @ngx-translate/core version 11.x and @ngx-translate/http-loader at version 4.x

Angular 4-5-6

Use @ngx-translate/core version 9.x for Angular 4-5 and version 10.x for Angular 6. While @ngx-translate/http-loader has version 2.x for Angular 4-5 and version 3.x for Angular 6.

npm install @ngx-translate/[email protected] # change to the version that works for you
npm install @ngx-translate/[email protected] # change to the version that works for you

2. Modify the angular.json file

previous Angular versions were using .angular-cli.json

Then modify your angular.json file with the following Styles and Scripts:

Note: The Scripts section includes every single controls/plugins, however if you wish to exclude some of them since you might never use some functionalities then just don't include them (for example if you never want to use the column picker, then just delete the slick.columnpicker.js file from the Scripts list).

Note 2: Flatpickr is used by the date inline editor. If you are not planning to use it, you can skip including flatpickr.css in your styles.

Note 3: Multiple-Select.js is a customized version of the original. Couple of small options were added to suit Angular-SlickGrid needs, which is why it points to angular-slickgrid/lib folder. This lib is required if you plan to use multipleSelect or singleSelect Filters (see Uncyclo - Filter).

"styles": [
    "../node_modules/bootstrap/dist/css/bootstrap.css",
    "../node_modules/font-awesome/css/font-awesome.css",
    "../node_modules/flatpickr/dist/flatpickr.css",
    "../node_modules/angular-slickgrid/lib/multiple-select/multiple-select.css",
    "styles.css"
],
"scripts": [
    "../node_modules/jquery/dist/jquery.js",
    "../node_modules/jquery-ui-dist/jquery-ui.min.js",
    "../node_modules/slickgrid/lib/jquery.event.drag-2.3.0.js",
    "../node_modules/bootstrap/dist/js/bootstrap.js",
    "../node_modules/angular-slickgrid/lib/multiple-select/multiple-select.js"
],

Bootstrap 4

Bootstrap 4 doesn't require the bootstrap.css since it uses SASS, so you can remove that line. So from the previous code, just remove this line (as this is only for BS3)

"../node_modules/bootstrap/dist/css/bootstrap.css",

3. CSS / SASS Styles

Load the default Bootstrap theme style and/or customize it to your taste (customization requires SASS)

CSS

Default compiled css (if you use the plain Bootstrap Theme CSS, you could simply add it to your .angular-cli.json file and be done with it).

Note: If you are also using Bootstrap-SASS, then there is no need to include the bootstrap.css in the styles: [] section.

"styles": [
    "../node_modules/bootstrap/dist/css/bootstrap.css",
    "../node_modules/font-awesome/css/font-awesome.css",
    "styles.css",
    "../node_modules/angular-slickgrid/styles/css/slickgrid-theme-bootstrap.css"
],

SASS (scss)

You could also compile the SASS files with your own customization, for that simply take any of the _variables.scss (without the !default flag) variable file and make sure to import the Bootstrap Theme afterward. For example, you could modify your style.scss with the following changes:

/* for example, let's change the mouse hover color */
$cell-odd-background-color: lightyellow;
$row-mouse-hover-color: lightgreen;

/* make sure to add the @import the SlickGrid Bootstrap Theme AFTER the variables changes */
@import '../node_modules/angular-slickgrid/styles/sass/slickgrid-theme-bootstrap.scss';

4. Include it in your App Module

Include AngularSlickgridModule in your App Module (app.module.ts) Note Make sure to add the forRoot since it will throw an error in the console when not provided.

import { AngularSlickgridModule } from 'angular-slickgrid';

@NgModule({
  declarations: [AppComponent],
  imports: [ AngularSlickgridModule.forRoot() ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Angular 7

The new updated version of ng-packagr use strict metadata and you might get errors about Lambda not supported, to bypass this problem you can add the @dynamic over the @NgModule as so:

// @dynamic
@NgModule({
  ...
})

And finally use it your code, for example let's create a grid-basic.component.html example.

<div class="container">
  <angular-slickgrid gridId="grid1"
            [columnDefinitions]="columnDefinitions"
            [gridOptions]="gridOptions"
            [dataset]="dataset">
  </angular-slickgrid>
</div>

5. Install/Setup ngx-translate for Localization (optional)

To provide locales other than English (default locale), you have 2 options that you can go with. If you only use English, there is nothing to do (you can still change some of the texts in the grid via option 1.)

  1. Using Custom Locale, that is when you use only 1 locale (other thank English)... this is a new feature starting from version 2.10.0 and up.
  2. Using Localization with I18N, that is when you want to use multiple locales dynamically.

6. Create a basic grid

and then configure the Column Definitions, Grid Options and pass a Dataset to the grid:

import { Component, OnInit } from '@angular/core';
import { Column, GridOption } from 'angular-slickgrid';

@Component({
  templateUrl: './grid-basic.component.html'
})
export class GridBasicComponent implements OnInit {
  columnDefinitions: Column[] = [];
  gridOptions: GridOption = {};
  dataset: any[] = [];

  ngOnInit(): void {
    this.columnDefinitions = [
      { id: 'title', name: 'Title', field: 'title', sortable: true },
      { id: 'duration', name: 'Duration (days)', field: 'duration', sortable: true },
      { id: '%', name: '% Complete', field: 'percentComplete', sortable: true },
      { id: 'start', name: 'Start', field: 'start' },
      { id: 'finish', name: 'Finish', field: 'finish' },
      { id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven', sortable: true }
    ];
    this.gridOptions = {
      enableAutoResize: true,       // true by default
      enableCellNavigation: true
    };

    // fill the dataset with your data
    // VERY IMPORTANT, Angular-Slickgrid uses Slickgrid DataView which REQUIRES a unique "id" and it has to be lowercase "id" and be part of the dataset
    this.dataset = [];

    // for demo purpose, let's mock a 1000 lines of data
    for (let i = 0; i < 1000; i++) {
      const randomYear = 2000 + Math.floor(Math.random() * 10);
      const randomMonth = Math.floor(Math.random() * 11);
      const randomDay = Math.floor((Math.random() * 28));
      const randomPercent = Math.round(Math.random() * 100);

      this.dataset[i] = {
        id: i, // again VERY IMPORTANT to fill the "id" with unique values
        title: 'Task ' + i,
        duration: Math.round(Math.random() * 100) + '',
        percentComplete: randomPercent,
        start: `${randomMonth}/${randomDay}/${randomYear}`,
        finish: `${randomMonth}/${randomDay}/${randomYear}`,
        effortDriven: (i % 5 === 0)
      };
    }
  }
}

7. Explore the Uncyclo page content

The last step is really to explore all the pages that are available in this Uncyclo, all the documentation will be place in here and so you should visit it often. For example a good starter is to look at the following

8. Bootstrap 3 and 4 supported

The creation of Angular-Slickgrid started with Bootstrap 3 support and Bootstrap 4 is now supported as well since version 1.2.0

9. How to load data with HttpClient?

You might notice that all demos are made with mocked dataset that are embedded in each examples, that is mainly for demo purposes, but you might be wondering how to connect this with an HttpClient? Easy... just replace the mocked data, assigned to the dataset property, by your HttpClient call and that's it. The dataset property can be changed at any time, which is why you can use local data and/or connect it to a Promise or an Observable with HttpClient (internally it's just a SETTER that refreshes the grid). See Example 24 for a demo showing how to load a JSON file with HttpClient.

10. Bootstrap support

Angular-Slickgrid supports both Bootstrap 3 and Bootstrap 4, you can see a demo of each one below.

11. Missing Features? (fear not)

What if Angular-Slickgrid is missing feature(s) versus the original SlickGrid? Fear not and directly use the SlickGrid and DataView objects that are expose from the start through Event Emitters. For more info continue reading on Uncyclo - SlickGrid & DataView objects and Uncyclo - Grid & DataView Events

Contents

Clone this wiki locally