Aurelia-Slickgrid 3.x (third major version) is now released!

ghiscoding · December 22, 2020, 11:30pm

Hey everyone, I thought it would be nice to give a quick post on releasing the third iteration of Aurelia-Slickgrid 3.x that just came out and answer some of the questions you might have and also wanted to advertise the new release.

If you don’t know what Aurelia-Slickgrid library is, then check out the Aurelia-Slickgrid demo (now includes 30 Examples). I also wrote a Blog Post a year ago.

In short, it is a full fledge data grid with lots of features, free of charge with MIT license, it is a wrapper on top of SlickGrid a JavaScript library which was created over 10 years ago with thousand of stars, while Aurelia-Slickgrid was created over 3 years ago.

New Version Q&A

Question 1) why a new major 3.x version?

For a few reasons, the biggest being that it now uses an external monorepo library named Slickgrid-Universal and here’s a few reasons why…

because it’s a monorepo structure it allows for better decoupling of a few Services (Text Export, Excel Export, OData & GraphQL are now decoupled and opt-in)
since a few of these Services are now decoupled, it should, at least in theory, provide smaller production build size (download only what you really need and use)
that external lib is also framework agnostic (and it will potentially be used in the future by other frameworks that I also support). For example, we use it in Salesforce with ES6 syntax.
it also helps me quite a lot in maintaining less code, any changes made into Slickgrid-Universal bubbles up to Aurelia-Slickgrid, 1 library to rule them all
there are also some new features that were created originally only in Slickgrid-Universal and are now available in Aurelia-Slickgrid, the biggest new feature is Composite Editor Modal Window
- you can see a demo of that in the Example 30 - Composite Editor

Question 2) why create yet another lib? Slickgrid-Universal that is…

because I needed to use it in another framework, Salesforce with ES6 syntax.
since I had to support yet another framework, I decided to make it framework agnostic with a monorepo structure. I created 3 libs around SlickGrid (Aurelia-Slickgrid, Angular-Slickgrid and Slickgrid-Universal) and I wanted to try to simplify the code maintenance and structure.
I wanted a lib that would act as a central piece which could be used by any framework while I could push features & fixes in 1 location and expect the changes to bubble up to the other libs (Aurelia-Slickgrid for instance).
all libs have (had) around 80-85% code in common, they are all 100% unit tested (10K lines of code)
so the end result is that Slickgrid-Universal is now used in our Salesforce implementation and now also in Aurelia-Slickgrid and the bonus is that it becomes much simpler for to support. At the end, I dropped about 9k lines of code when Aurelia-Slickgrid switched to using Slickgrid-Universal code.

Migration and Installation

You have multiple ways to get started

to migrate from 2.x to 3.x, follow the new Migration Guide to 3.x.
- Make sure to read it all, you will get compilation errors that is a certainty (unfortunately) but it’s for the greater good
to start fresh, follow the HOWTO - Step by Step Wiki
or clone the Aurelia-Slickgrid-Demos

Quick Recap, the biggest reasons of why to upgrade to 3.x?

More Decoupling = Smaller Bundle size (monorepo structure, download only what you need)
One common repo to update (that was mostly my personal goal)
The library is now fully Typed, even the SlickGrid core lib (written in JS) now has full TS Typing (I added it all manually)
New Features and bug fixes will only be available going forward with version 3.x only
- I’m a team of 1, @ghiscoding, so I hope you understand the why.
- A new feature which is now available only in 3.x is Composite Editor (a CRUD modal window) and is demonstrated under this new Example 30 - Composite Editor
It’s fully tested with Jest (100% coverage) and Cypress for E2E testing (400 tests in Aurelia-Slickgrid and another 200 tests in Slickgrid-Universal)

Minimum Requirements

TypeScript >= 4.1.2
Aurelia-I18N >= 3.0.0
Aurelia-CLI >= 2.0.0
Bootstrap or any other UI framework like Bulma, Material, …

Final Words

A big thanks to @3cp and @zewa666 for their invaluable help in providing better support for all bundlers and also help with some code review.

If you like the lib, please upvote and/or Buy Me a Coffee

Cheers and Happy End of the Year

suvir · September 21, 2022, 7:22pm

A bit late here, but trying to move to version 3 now.

Got Column missing from import. Any idea why this compilaiton error. Nothing i found in migration guide about Column.

ghiscoding · September 21, 2022, 11:43pm

@suvir
Aurelia-Slickgrid has deep depencies on Slickgrid-Universal, if you have any, and the newer version only works with Aurelia-Slickgrid 4.x (which you are not), but if you want to use Aurelia-Slickgrid 3.12.1 then you’ll have to use Slickgrid-Universal 0.19.1. I forgot to create a tag before upgrading the Aurelia-Slickgrid-Demos to 4.x, but anyway you can see the last commit before the upgrade, this commit uses Aurelia-Slickgrid 3.12.1 with Slickgrid-Universal 0.19.1 (I’m not sure if 0.19.2 works, try to fix the version at 0.19.1 first and try 0.19.2 only after). I always update Slickgrid-Universal the same day as Aurelia-Slickgrid to interfaces problems like you’re having now.

So if you have any Slickgrid-Universal dependencies installed, make sure that you are using the correct version. and/or take a look at this commit that I mentioned. Ideally, you should think about upgrading to 4.x, the differences aren’t too big but I only support the last versions and I’m planning the next major within a month or so.

suvir · September 22, 2022, 6:57am

The list of slickgrid-universal packages are too long here. I just want to install what’s required from this list. npm
Which are the must have packages from the list.

suvir · September 22, 2022, 7:53am

Now using * TypeScript >= 4.1.2. Nice…it compiles sweet

One thing we used in older version is refreshBackendDataset. That one seems not available anymore? Or maybe it is not recommended to be used this way.

private updateTable(): void
    {
        //refreshBackendDataset(this.gridOptions);
    }

ghiscoding · September 22, 2022, 1:37pm

There’s a grid refresh command available from the Grid Menu or if you can to call it programmatically then you can use it from the ExtensionService. You can get the ExtensionService instance via the onAureliaGridCreated event or via the aureliaGrid instances.

via onAureliaGridCreated event (see Example 16)

  <aurelia-slickgrid grid-id="grid16"
                     column-definitions.bind="columnDefinitions"
                     grid-options.bind="gridOptions"
                     dataset.bind="dataset"
                     on-aurelia-grid-created.delegate="aureliaGridReady($event.detail)">
  </aurelia-slickgrid>

aureliaGrid: AureliaGridInstance;

 aureliaGridReady(aureliaGrid: AureliaGridInstance) {
    this.aureliaGrid = aureliaGrid;
}

refresh() {
   this.aureliaGrid?.extensionService.refreshBackendDataset(optionalGridOptions);
}

OR the simpler aureliaGrid instances binding (see Example 19)

  <aurelia-slickgrid grid-id="grid19"
                     column-definitions.bind="columnDefinitions"
                     grid-options.bind="gridOptions"
                     dataset.bind="dataset"
                     instances.bind="aureliaGrid">
  </aurelia-slickgrid>

aureliaGrid: AureliaGridInstance; // direct access via the `instances` binding

refresh() {
   this.aureliaGrid?.extensionService.refreshBackendDataset();
}

suvir · September 22, 2022, 4:00pm

Some progress now. Almost working. Sizing is not getting set. It seems resize is never gets called here.

public bind(): void
    {
        this.loading = true;

        this.update = () => {this.updateTable()};

        this.defineGrid();

        this.resizeObserver = new ResizeObserver(() =>
        {
            this.resize();
        });

        this.resizeObserver.observe(this.container);
    }

    public aureliaGridReady(aureliaGrid: AureliaGridInstance): void
    {
        this.aureliaGridObj = aureliaGrid;
    }

    private resize(): void
    {   
        if(this.aureliaGridObj)
        {
            console.log("resize "); // This never happens
            this.aureliaGridObj.resizerService.resizeGrid();
        }
    }

    private updateTable(): void
    {
        this.aureliaGridObj?.extensionService.refreshBackendDataset(this.gridOptions);
    }

So i think i am not able to call :

this.aureliaGridObj.resizerService.resizeGrid()

I know in other ways, i can do this:

But i would like to use resize function as it was before i did in version 2.x, if possible.

ghiscoding · September 22, 2022, 4:14pm

Sorry but I don’t think that I can provide much help on that side, I never used neither tried the ResizeObserver and I have no clue why it wouldn’t trigger your resize function. I always used the auto-resize service that I created which is watching for window resize and I actually never really used the calculateAvailableSizeBy, that was provided by another user, in some cases I use the maxWidth: '100%' but that doesn’t work all the time and it doesn’t work at all on the height. So I don’t know what your problem is with the resizer service but that is the only one I really support and that I have knowledge of. The only difference from 2.x to 3.x was that I moved the service into Slickgrid-Universal common package and I changed some of the properties like container but apart from that what you had in 2.x should still work in 3.x, at least I would think so, I think your issue seems more around the ResizeObserver itself and has nothing to do with Aurelia-Slickgrid as far as I understand it

and by the way, the new autoResize.container is now a query selector and the code you have in the print screen won’t work because you didn’t include the # in the front.

this.gridOptions = {
      autoResize: {
        container: '#demo-container', 
        // or
        // container: '.mygrid-class', 
      },
 // ...
}

Actually I also just recalled that I also moved the minHeight and minWidth from the Aurelia-Slickgrid html template into the ResizerService but again I don’t think that would have any impact on your ResizeObserver to trigger or not your resize callback (you linked it to this.container, does that really get resized?)

suvir · September 23, 2022, 7:40am

Thanks, this seems to have fixed it by adding # in front.

autoResize:
            {
                container: "#" + this.gridId + "-container",
                calculateAvailableSizeBy:"container",
            },

It was an old code with resize service, it still does not seem to get called but so far everything looks good with version 3.12.1 and i am happy with it.

suvir · September 23, 2022, 9:53am

This was the reason i think. Now it seems to work fine.

ghiscoding · September 23, 2022, 1:37pm

you should read and follow the dedicated guide, it’s all in there Migration to 3.x · ghiscoding/aurelia-slickgrid Wiki (github.com)

Topic		Replies	Views
Aurelia-Slickgrid now supports Aurelia 2 Blog Posts	4	389	January 20, 2024
Does Aurelia support Dependency Injection of non-Aurelia lib? Help Requests	7	630	December 7, 2020
Aurelia-Slickgrid reached full test coverage - might write blog post Framework Knowledge	8	1062	December 21, 2019
Ag-Grid with Aurelia	7	857	April 8, 2022
Transferred vGrid - to new org	1	732	June 1, 2022