1

enter image description here

I want to show en edit icon next to value in Amount column. This is because the Amount column is actually editable.But to give that as a hint to user, i want to show some edit icon next to it. How to do that in aurelia slickgrid?

Or maybe there is a way to highlight a field on hover ? I am using aurelia slickgrid and looking if there is some option in aurelia slickgrid itself.

A Farmanbar
  • 4,381
  • 5
  • 24
  • 42
sb32134
  • 426
  • 8
  • 19
  • 1
    You need a Formatter for that, take a look at this SO [answer](https://stackoverflow.com/a/66243168/1212166) (the second part of the answer) – ghiscoding Aug 09 '21 at 12:43

2 Answers2

1

Go to the aurelia slickgrid example link and click on the link of example's source code

enter image description here

When you open it, there is a method called defineGrids

/* Define grid Options and Columns */
  defineGrids() {
    this.columnDefinitions1 = [
      ..., 
      ...,
      ...,
      ...,
      ...,
      { id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven', formatter: myCustomCheckmarkFormatter, type: FieldType.number, sortable: true, minWidth: 100 }
    ];
    ... rest of the code
  }

The row with id effort-driven is where the icons are placed. On the other words, when you push a data collection(usually array of json object) to the table, values of the data objects with key name effort-driven are given to column with id effort-driven. Furthermore, for each passed value to the column, the method myCustomCheckmarkFormatter reformat it(for example 0 -> false or null -> not filled) and place it to the corresponding table's cell. look at the below method:

// create my custom Formatter with the Formatter type
const myCustomCheckmarkFormatter: Formatter<DataItem> = (_row, _cell, value) => {
  // you can return a string of a object (of type FormatterResultObject), the 2 types are shown below
  return value ? `<i class="fa fa-fire red" aria-hidden="true"></i>` : { text: '<i class="fa fa-snowflake-o" aria-hidden="true"></i>', addClasses: 'lightblue', toolTip: 'Freezing' };
};

As you can see, when the method is called, it returns an icon such as <i class="fa fa-fire red" aria-hidden="true"></i> which is placed in the table's cell.

A Farmanbar
  • 4,381
  • 5
  • 24
  • 42
  • Thanks, i took the idea from ghiscoding comment above and highlight worked for me. I also tried above solution but for some reason, i had no icons in my column...maybe i was missing some icon pack? Anyway, in the end, i put an edit icon column with highlighting and that seems to be good for now. – sb32134 Aug 09 '21 at 14:54
  • 1
    Ah, i think i understood your answer, So i need a column with key as effort-driven and rest will map. In my current case, i get an api json response from the backend (using odata), so data is already defined. Maybe this is suitable for locally generated data or where we can change the backend response. Do you have screenshot of your solution? Then i can select yours as the proffered answer. – sb32134 Aug 10 '21 at 05:32
  • @sb32134 you only need to have column name id and json values key same. no need to have id with effort-driven you can set id to myId in such a case when you values' key be myId – A Farmanbar Aug 10 '21 at 09:29
0

enter image description here

I added an edit icon next to Amount,

{
                id: "Edit",
                field: "edit",
                excludeFromColumnPicker: true,
                excludeFromExport: true,
                excludeFromQuery: true,
                excludeFromGridMenu: true,
                excludeFromHeaderMenu: true,
                minWidth: 30,
                maxWidth: 30,
                formatter: Formatters.editIcon,
            },

and used this custom format from ghiscoding comment:

const customEditableInputFormatter: Formatter = (_row, _cell, value, columnDef, dataContext, grid) => {
const isEditable = !!columnDef.editor;
value = (value === null || value === undefined) ? '' : value;
return isEditable ? `<div style="background-color: aliceblue">${value}</div>` : value;

};

The result is as shown in the picture.

sb32134
  • 426
  • 8
  • 19
  • 1
    great you got it working, just a side note if you want the blue background color to fill the entire cell container without the padding, you can change your Formatter to return an object instead of a string and its `addClass` and when you do that it's the entire cell container instead of a div inside the cell container. See this [FormatterResultObject - Wiki](https://github.com/ghiscoding/Angular-Slickgrid/wiki/Formatters#formatterresultobject) something like `return { addClass: 'custom-editor', text: value }` – ghiscoding Aug 10 '21 at 12:14