Using Slick-Grid with Asp.net Core API

Help Requests
1

I am trying to upgrade my project and in particular the grids in it. I noticed that Slick-Grid seems to be quite popular - has a lot of documentation etc however I have been using Fetch to retrieve and send data to the API. Slick-Grid uses Odata in its pagination example and I have little idea what I need to do to implement this grid system with Fetch - there are no examples. I am not sure how to integrate Slick-grid into a project that uses Fetch…

This is the example I found that appears closest to a one I need. I am sending a query string back to the API and data is coming back in JSON format.

My Fetch for obtaining client data is as follows:

bind() {
    const headers = this.authService.header();

    fetch("/api/Client/Index", {
        method: "GET",
        headers
    })
        .then(response => {
            return response.json();
        })
        .then(data => {
            this.clients = data
            //console.log("CLIENTS: ", this.clients);
        })
}

How can I use this with slick-grid or do I have to use Odata in some form…

1 Like
2

Have you looked at aurelia-slickgrid?
see: https://github.com/ghiscoding/aurelia-slickgrid/wiki

The HOWTO guide shows an example of using your own dataset:

Hope that helps.

2 Likes
3

I’m the author of Aurelia-Slickgrid and as you found out all the examples are made with JSON dataset, the only thing you need to do is replace the JSON dataset with Http-Fetch or Http-Client, the dataset can be loaded at any time (internally it’s just a SETTER that refreshes the grid and that can be done at any time). The only major thing to know is to define the datagrid structure first, with Column Definitions and Grid Options before calling it in the View (it has to know the structure before being able to use it), so the dataset is the only property that is kind of async (since you can load at any point in time). So I usually define the grid in the constructor and then load the data (through the dataset property) in the attached method.

Here’s a simple implementation

constructor(private http: HttpClient) {
    // define the grid options & columns and then create the grid itself
    this.defineGrid();
  }

  async attached() {
    // populate the dataset once the grid is ready
    const response = await this.http.fetch('api/users');
    this.dataset = await response['json']();
  }

  /* Define grid Options and Columns */
  defineGrid() {
    this.columnDefinitions = [
      { id: 'firstName', field: 'firstName' }, 
      // ...
    ];

    this.gridOptions = {
       enableAutoResize: true,
       // ...
    }
}
1 Like
4

Much appreciated… Life got in the way but I will attend to this and make it work in the next couple of days… its good to know I can use my current fetch etc with this :smiley:

1 Like
5

You’re welcome, I’ll add an extra demo/examples in the future. I’m not sure if other potential users stumble on the same issue, but there’s really no witchcraft in that :laughing:

You can also up vote the lib if you like it :star:
I’d be nice to make it shine more hehe

2 Likes
6

Thanks for the demo consideration - I’ve had to change from my current table plugin as they are not supporting it anymore and this one came up as the main one… having fetch statements throughout I didnt want to change anymore than I had to

Of course… sure… will vote accordingly :smiley:

1 Like
7

I wanted to add a Bootstrap Tab example, so I added a Tab with Fetch-Client. The example is not yet pushed to the GitHub demo page, but it’s in the examples used by the lib itself. You can see the code here

and a print screen of it, nothing special about it, the code is probably what you want to look into… again there’s no witchcraft :mage::rabbit2:

image
image.png1123×451 23.6 KB

1 Like
8

I just released a new version and I pushed the new Tab demo in the same time. You can see it here

1 Like