CODEWITHSUNDEEP
aureliaslickgridangular-slickgrid
sb32134
sb32134

Reputation: 430

How to show icon next to value in cloumn in aurelia slickgrid/slickgrid?

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.

Upvotes: 1

Views: 560

Answers (2)

sb32134
sb32134

Reputation: 430

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.

Upvotes: 0

A Farmanbar
A Farmanbar

Reputation: 4788

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.

Upvotes: 1

Related Questions