0

I am using angular slickgrid to display my data and also for inline editing data. In angular slickgrid Im using a default inline editor using the editor option like the one below

editor: {
  model: Editors.longText,
  required: true,
  validator: CspfmDataValidator
},

Now I want to add an edit icon button in that I want to provide a default inline editor with a click. Is it possible to provide such?

slickgrid cell with edit icon to open the editor

By clicking that custom edit pencil icon, I want to open the default inline editor like this

Editor opened after the edit icon clicked

ghiscoding
  • 12,308
  • 6
  • 69
  • 112
Keertika Prabu
  • 11
  • 1

1 Answers1

0

Unless I misunderstood (your question is not very clear), it's all in the Example 3 demo. single/double click is driven by autoEdit boolean flag. As for icon versus edit, if you want to show an icon then you use a Formatter, the editor has nothing to do with the icon (apart from the cell value that they both use). The Example has a column named "Effort Driven" which has a checkmark Formatter and the editor is a checkbox, that might look like what you're looking for. If that doesn't answer your question, then you need to edit your question and add more details (typically a good Stack Overflow question also includes the code you tried)

EDIT

As per your question update, it's not really how SlickGrid edits are working, but if you really want to make only the icon to open the editor then you can block that via the event (block anything else but the edit icon click), you can do it like this

{
        id: 'CspfmData',
        name: 'Institure',
        field: 'CspfmData',
        minWidth: 70,
        filterable: true,
        sortable: true,
        type: FieldType.string,
        editor: {
          model: Editors.longText,
          validator: CspfmDataValidator,
        },
        formatter: (row, cell, val) => {
          return val ? `${val} <span class="fa fa-pencil" style="padding: 2px; border: 1px solid #e0e0e0"></span>` : '';
        },
        onCellClick: (event) => {
          // cancel click event when it's not the edit icon
          if (!(event.target as HTMLSpanElement).classList.contains('fa-pencil')) {
            event.stopImmediatePropagation();
          }
        }
}

Personally I don't think it's a good idea though, I never really put an icon inside the cell because it takes extra space which we typically don't have, but if it's really how you want it then that solution should work.

A better approach which we use on our side is to format the cell that are editable, so we add an extra Formatter to display editable cell with a different css styling and that has the advantage to not take any space at all, you can see a demo on Example 30 the cells with blue background are editable (in our project we have a simple gray outline on the editable cells). This is a better approach since it doesn't take any space

ghiscoding
  • 12,308
  • 6
  • 69
  • 112
  • I have updated the question – Keertika Prabu Jan 17 '22 at 11:32
  • answered updated, that should work even if it's not recommended – ghiscoding Jan 18 '22 at 13:25
  • I want to open the editor with a single click but its opening for both single click and double click. – Keertika Prabu Jan 27 '22 at 06:47
  • you should read the answer carefully and look at the example 3, that was already answered – ghiscoding Jan 28 '22 at 14:32
  • Im using flatpickr for date and datetime fields ```editor: { model: Editors.date, editorOptions: this.cspfmFlatpickrConfigObject.getDateEditorOptions({ enableTime: false, listeners: this.flatpickrListeners, onOkButtonClick: () => { this.slickgridUtils.commitCurrentEdit(this.gridObj) } }) }, ``` but its not working now – Keertika Prabu Feb 24 '22 at 09:48
  • seems like nothing is valid from what you provided to the `editorOptions`, that property is used to add config from 3rd party lib, in that case Flatpickr, and nothing you provided is available in [Flatpickr Options](https://flatpickr.js.org/options/) and Hooks, there's no `onOkButtonClick` and if you're trying to add Angular code in there, that won't work because SlickGrid is a JS/jQuery library. I already provided you a valid answer to your original question, you should read it again and accept it if it works, your last comment should be asked in a new question since this is totally different – ghiscoding Feb 24 '22 at 14:22