ghiscoding/Angular-Slickgrid

Boolean column with filter collection and render html not working, displays true/false

irg1008 opened this issue · 7 comments

irg1008 commented

Describe the bug

When setting a column type of "boolean", and then assigning a collection to display custom values, it works. Then if I add some injected html into the collection label with labelPrefix, instead of displaying the label, the value "true" or "false" are displayed as labels

If I disable this the label is correctly displayed, but the html is not injected. Thank you

See the "HERE" note in the next snippet :

  GetCheckboxGridColumn(field: string, group: FeedColumnCategory, size = 75, editable = true): Column {
    return {
     ...
      type: FieldType.boolean,
      sortable: true,
      formatter: Formatters.multiple,
      params: { formatters: [Formatters.checkmark, backupFormatter] },
      minWidth: size,
      filterable: true,
      editor: editable ? { model: Editors.checkbox } : null,
      filter: {
        // HERE: Displaying "true" and "false" as labels when "enableRenderHtml" set to true
        enableRenderHtml: true,
        collection: [
          { value: '', label: 'Todos' },
          { value: true, label: 'Verdadero', labelPrefix: `<i class="fa fa-check"></i> ` },
          { value: false, label: 'Falso', labelPrefix: `<i class="fa fa-close"></i> ` },
        ],
        model: Filters.singleSelect,
      },
      ...
    };
  }

Reproduction

  • Create a column with boolean type
  • Add custom collections for custom labels
  • Set enableRenderHtml to true
  • See how instead of custom labels "true" and "false" are displayed

Expectation

The html should be injected and displayed as label

Environment Info

Angular 16.2.1
Slickgrid 3.2.0
TS 4.9
Chrome 116.0.5845.98

Validations

ghiscoding commented

seems to be working fine for me with Angular-Slickgrid v6.2.0, it is showing as I expect it to be displayed.

with enableRenderHtml: true

image

with enableRenderHtml: false

when disabled, it again shows what is expected (which is the html as text)

image

irg1008 commented

I mean in the input, for me it works in the dropdown but the final input content shows "true" or "false"

image

irg1008 commented

This is my grid table:
image

ghiscoding commented

oh ok now I understand what your problem is and I'm able to replicate, it might be something with the new lib I rewrote but the lib itself seems correct as shown in this multiple-select-vanille demo, I'll have to investigate further. I wasn't sure which version you are using because you wrote Slickgrid 3.2.0 which isn't clear if it's Angular-Slickgrid or Slickgrid-Universal version that you wrote... I assume it's Slickgrid-Universal, if so then it's probably the new lib multiple-select-vanilla that was rewritten in pure JS code to remove jQuery dependency

ghiscoding commented

oops I see what the problem is, I made a mistake and used the wrong ms-select-vanilla flag, I used useSelectOptionLabelToHtml instead of renderOptionLabelAsHtml internally (when enableRenderHtml is true) and the first flag is to render html for values instead of the text labels which is why the values were being displayed oops....

See the difference of these 2 flags in multiple-select-vanilla external lib

I'll push a fix in Slickgrid-Universal but in the meantime you could use a temp fix by providing this filterOptions override

filter: {
  // ...
  model: Filters.singleSelect,
  filterOptions: { renderOptionLabelAsHtml: true, useSelectOptionLabelToHtml: false }
},

and here's the new output with the temp fix until a new version is released sometime this week

image

  • 👍1
  • 🎉1
ghiscoding commented

@irg1008 it should be fixed in latest v6.2.1, I have also updated Slickgrid-Universal Example 7 to demo the fix (I didn't update any Angular-Slickgrid examples though). Also worth to know that this issue was for both the Filter and the Editor since I use the wrong flag in both.

Thanks for reporting the issue and please ⭐ the lib if you like it 😉

irg1008 commented

@ghiscoding Amazing, thank you so much for this fix and the library!! Keep up the amazing work

  • ❤️1