0

I have a new Angular 12 project that I am trying to have an angular slick grid grid in. But all the data is piled on top of itself, as shown in the photo. What is happening

I'm using code from here and it's obviously creating the table, but not styling it. I also have fixed all the errors in the console by adding the ngx-translate/core stuff but that didn't do anything. I've been working on this since 10am and haven't gotten anywhere.

here is my angular.json: Angular.json

here is the html, again, taken from the link above.

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

And here is the ts. Again, taken straight from the website link that I posted

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)
  };
}
HumanHickory
  • 464
  • 1
  • 6
  • 19

3 Answers3

0

Yes indeed you're missing the proper CSS styling for Angular-Slickgrid, you should follow the HOWTO - Step by Step Wiki to get started and in your case the Step 3, where you have to choose between CSS or SASS imports.

The best way to get started is to:

  1. read the HOWTO - Step by Step
  2. and/or git clone the Angular-Slickgrid-Demos

I created a lot of Wikis and Examples, so consulting them first is always good to do.

Please note that I'm the author of Angular-Slickgrid

So in summary if you're using CSS, then you need to do this change in your angular.json file

"styles": [
    // ...
    "node_modules/@slickgrid-universal/common/dist/styles/css/slickgrid-theme-bootstrap.css"
],
ghiscoding
  • 12,308
  • 6
  • 69
  • 112
  • I temporarily moved on to a different project because I was angry with SlickGrid, but i will give it a try here next week and come back and upvote this if it works. Thank you so much for commenting!! – HumanHickory Nov 24 '21 at 16:41
0

Ensure your angular.json contains a theme for slickgrid, otherwise the grid shows exactly like yours:

"node_modules/@slickgrid-universal/common/dist/styles/css/slickgrid-theme-bootstrap.css"

Myzter
  • 27
  • 4
0

I use React and ran into the same problem, in my case it helped me to add the line

import '../node_modules/@slickgrid-universal/common/dist/styles/css/slickgrid-theme-bootstrap.css';

To the index.jsx file.

Powehi
  • 1