Dropdown not working in angular-slickgrid

Question

I have downloaded source code from here . I have checked demo but single select dropdown functionality not implemented anywhere. so i have modified code for last row "completed". Because i want to implement dropdown functionality on cell edit. following are code changes in existing source code for single select dropdown.

------grid-formatter.component.ts-----

const customEnableButtonFormatter: Formatter = (row: number, cell: number, value: any, columnDef: Column, dataContext: any, grid: any) => {

  if (value == 'Yes') {
    return '<select style="font-size:8px; z-inex:1; font-weight:Normal;width:70px;"  class="c-select-status c-select-status__text target table-cell-dropdown" id="' + row + '"><option value="Yes" selected>' + 'Yes' + '</option><option value="No">' + 'No' + '</option> "</select>';
    }
    else {
    return '<select style="font-size:8px; z-inex:1; font-weight:Normal;width:70px; "  class="c-select-status c-select-status__text target table-cell-dropdown" id="' + row + '"><option value="Yes">' + 'Yes' + '</option><option value="No" selected>' + 'No' + '</option> "</select>';
    }
};

 this.columnDefinitions = [
      { id: 'title', name: 'Title', field: 'title', sortable: true, type: FieldType.string, width: 70 },
      { id: 'phone', name: 'Phone Number using mask', field: 'phone', sortable: true, type: FieldType.number, minWidth: 100, formatter: Formatters.mask, params: { mask: '(000) 000-0000' } },
      { id: 'duration', name: 'Duration (days)', field: 'duration', formatter: Formatters.decimal, params: { minDecimal: 1, maxDecimal: 2 }, sortable: true, type: FieldType.number, minWidth: 90, exportWithFormatter: true },
      { id: 'complete', name: '% Complete', field: 'percentComplete', formatter: Formatters.percentCompleteBar, type: FieldType.number, sortable: true, minWidth: 100 },
      { id: 'percent2', name: '% Complete', field: 'percentComplete2', formatter: Formatters.progressBar, type: FieldType.number, sortable: true, minWidth: 100 },
      { id: 'start', name: 'Start', field: 'start', formatter: Formatters.dateIso, sortable: true, type: FieldType.date, minWidth: 90, exportWithFormatter: true },
      { id: 'finish', name: 'Finish', field: 'finish', formatter: Formatters.dateIso, sortable: true, type: FieldType.date, minWidth: 90, exportWithFormatter: true },
      { id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven', formatter: myCustomCheckmarkFormatter, type: FieldType.number, sortable: true, minWidth: 100 },
      {
        id: 'completed', name: 'Completed', field: 'completed', type: FieldType.string, sortable: true, minWidth: 100,
        formatter: customEnableButtonFormatter,
        onCellClick: (e, args) => {
          console.log("*****",args);
        
        }
      }
    ];


  this.dataset[i] = {
        id: i,
        title: 'Task ' + i,
        phone: this.generatePhoneNumber(),
        duration: (i % 33 === 0) ? null : Math.random() * 100 + '',
        percentComplete: randomPercent,
        percentComplete2: randomPercent,
        percentCompleteNumber: randomPercent,
        start: new Date(randomYear, randomMonth, randomDay),
        finish: new Date(randomYear, (randomMonth + 1), randomDay),
        effortDriven: (i % 5 === 0),
        completed:"Yes"     <<<<-------important change----I have passed 'Yes' by default

      };

------collection_100_numbers.json---
[
  { "value": 0, "label": "Yes" }, 
  { "value": 1, "label": "No"}

]

Below is look and feel of my dropdown in cell

Now actual Question is onCellChange() event not trigger when i used in columndefination. So i have used onCellClick() method. After changing dropdown value as no or yes then only every time event firing as "Yes" value only. Why its so?

Answer 1

It looks like there's a lot of misunderstanding of how to use the code and some of the terms used.

First, there is already a single select dropdown editor, there is no need to create another one. All the Editors are shown in Example 3 , the single select editor is on the "% Complete" column. All you need is this piece of code

this.columnDefinitions = [
  {
    id: 'completed', name: 'Completed', field: 'completed', type: FieldType.boolean,
    editor: {
      model: Editors.singleSelect,
      //  the value can be changed to whatever your data is, while the label is what will be displayed on the screen
      collection: [{ value: false, label: 'No', value: true, label: 'Yes' }]
    }
  }
];

There is also a Single/Multiple Select Editor - Wiki

If you think that there's no Editors in Example 3, it might be because you think the editors are always visible and that is not and will never be the case, which might be where the confusion is. SlickGrid will never show all editors at once, the cell become editable only after clicking on the cell. The reason is simple and it's for performance reasons, displaying data is a lot faster than creating each and every editors all at the same time (that is very inefficient), it's also easier to deal with disabled editors and validation since they're showing only after you click... if you want a way to tell the user that it's editable then you will need a Custom FormatterWiki , you can add an outline or background color to editable fields, we've done that in our project with an outline (the first 2 columns shown below are editable)

You can use this Custom Formatter for cell with editors and then use it in your column definitions formatter: customEditableInputFormatter

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;
};

So as you can see there is no need to create something that already exist, you just need to learn how to use them properly. I wrote a ton of Wikis , you should read and consult them first.

Also just to point out, a Formatter will not change data, it has nothing to do with editing so your customEnableButtonFormatter will never do anything. You need a lot more code than that to create an editor and there's a Custom Inline Editor - Wiki for that too. To be clear on the Formatter, you use them to display something else to your user it will not change any of your data, it will only display it differently and to be human readable.