formatter about aurelia-slickgrid HOT 12 CLOSED

Thats the bad side of modern JS and arrow functions which let you forget how you used to do things earlier with bind/call ;)

from aurelia-slickgrid.

I'm not fully sure to understand your question but if you want to get the entire dataset from the Formatter, you can actually get it from the grid object inside the Formatter. Formatters are totally independent and have no knowledge of the outside context, so you must use what is available by its arguments, the 6th and last argument is grid which can provide a lot, from it you can get the grid options and even the dataView object, for example

const myadjusterformatter = (row, cell, value, columnDef, dataContext, grid) => {
  const gridOptions = grid.getOptions();
  const dataView = grid.getData();
  const dataset = dataView.getItems();
  // ...
};

but if you wish to just get the item object then use the dataContext argument, it holds the entire item object of current row.

I believe that should answer your question

from aurelia-slickgrid.

Thanks for reply and I was aware of those capabilities and I tried to properly define use case and failed. What I was trying to ask if there is a way to get data outside of the data content just as you can do for editors and filters as shown below from an example I wrote some time ago. At any rate I think you answered and I will just use joins in database to get lookup value.

   {
        id: 'StaffName',
        name: 'StaffName ',
        field: 'assigntoStaffName',
        filterable: true,
        editable: true,
        sortable: true,
        type: FieldType.string,
        minWidth: 190,
        excludeFromExport: true,
        filter: {
          collectionAsync: this.getstaffNames(),
          model: Filters.multipleSelect,
          filterOptions: {
            offsetLeft: 2,
            width: 190
          },
          placeholder: 'choose an option'
        },
        formatter: Formatters.complexObject,
        onCellClick: (e, args) => {
          this.aureliaGrid.gridService.setSelectedRow(args.row);
        },
        editor: {
          collectionAsync: this.getstaffNames(),
           searchTerms: [true],
            model: Editors.singleSelect
        },
        minWidth: 125,
        params: {
          formatters: Formatters.collectionEditor
        }
      },

from aurelia-slickgrid.

Well again Formatters have their own context so you can't access anything outside of what is available in the Formatter arguments.
However if your data isn't too big, you could maybe add it to the params property of the grid options, which you can then read from the Formatters by getting the gridOptions as I wrote earlier.

const myadjusterformatter = (row, cell, value, columnDef, dataContext, grid) => {
  const gridOptions = grid.getOptions();
  const extraData = gridOptions.params.extraData;
  // ...
};

But I wouldn't use that for large dataset, it might impact the performance of the grid in general since the grid options are used across the lib, it's preferable to keep it rather small. I often use the grid options params for couple of flags that I want to pass to my Formatters and that's totally fine, it's small enough and it's global to the grid.

Another option is to use inline Formatters, I typically prefer to move my Custom Formatters into separate files (separation of concerns) but if you create your Formatter inline, then you could access the this inside your Formatter with whatever other data you might have. So that's another option too.

Also note that Formatters are synchronous, the data must be ready when you load the grid, it cannot be asynchronous. If you do have async data, then you can use the asyncRenderer but I rarely ever use that because it doesn't provide a good UX since the rendering is delayed by few seconds and it's not that nice.

from aurelia-slickgrid.

Correct me if I'm seing but if you bind the calling this like here formatter: Formatters.complexObject.bind(this) you should get the proper scope and can do the same inside your formatter as in your filters example

from aurelia-slickgrid.

damn that is a neat trick, I never thought of doing that. this way is so much better, thanks for the tips @zewa666

from aurelia-slickgrid.

Thanks for all the suggestions, All my shared datasets (mostly code lookups) get initialized on auth login so ther are available to all view/view models
The extra.Data param worked as suggested but not quite sure how to implement @zewa666 tip.

from aurelia-slickgrid.

If you bind your formatter as suggested above, inside its function this will point to your viewmodel so the same this as in filter

from aurelia-slickgrid.

ViewModel

this.extraData = [ /*...*/ ];

this.columnDefinitions = [
  id: 'StaffName', name: 'StaffName ', field: 'assigntoStaffName',
  formatter: myadjusterformatter.bind(this)
];

Extarnal Custom Formatter File

const myadjusterformatter = (row, cell, value, columnDef, dataContext, grid) => {
  const extraData = this.extraData;
  // ...
};

The this points to the ViewModel scope because you called .bind(this)

from aurelia-slickgrid.

Glad to know I had the correct code but when I tried that I get "this" undefined
const myadjusterformatter = (row, cell, value, columnDef, dataContext, grid) => {
const extraData = this.extraData;
// ...
};

from aurelia-slickgrid.

Try defining it like this: function myadjusterformatter(...) the arrow cannot be re-bound see here https://stackoverflow.com/questions/33308121/can-you-bind-this-in-an-arrow-function

from aurelia-slickgrid.

I think issue (question) was resolved, so I'll close the issue

from aurelia-slickgrid.