Display a angular component in handsontable cell renderer

Tags: #<Tag:0x00007efc718b8480> #<Tag:0x00007efc718b82c8>
#1

I need to create a handsontable table that one of its columns is displayed in an Angular component, I have tried many things but it doesn’t work for me.

my angular component

import { Component } from ‘@angular/core’;

@Component({

selector: ‘app-multi-select’,

template: `

<nz-select

  [nzMaxTagCount]="3"

  [nzMaxTagPlaceholder]="tagPlaceHolder"

  nzMode="multiple"

  nzPlaceHolder="Please select"

  [(ngModel)]="listOfSelectedValue"

>

  <nz-option

    *ngFor="let item of listOfOption"

    [nzLabel]="item"

    [nzValue]="item"

  ></nz-option>

</nz-select>

<ng-template #tagPlaceHolder let-selectedList

  >and {{ selectedList.length }} more selected</ng-template

>

`,

})

export class MultiSelectComponent {

listOfOption = [‘Option 1’, ‘Option 2’, ‘Option 3’, ‘Option 4’, ‘Option 5’];

listOfSelectedValue: string[] = [];

}

#2

similar to this example

http://mydea.github.io/handsontable-chosen-editor/

but implement my own angular component

#3

Hi @carlos

Thank you for contacting us. Unfortunately, currently it isn’t possible to declare a custom renderer as a component within Angular wrapper.

#4

Ok. And manual renderer for transfor text in one cell type text

element 1, element 2

In this basic html

https://jsfiddle.net/wfevL3sp/

But when you select another cell you see the selected items separated with ‘,’

That is, the elements are stored separated by commas and when I select the cell, that small form opens to add or remove elements.

https://jsfiddle.net/wfevL3sp/

#5

Hi @carlos

I’m sorry but I don’t quite understand your requirements. Do you want to build a custom editor with multiple choices in a dropdown?

#6

i try this

but when I try to select a checkbox it closes, I imagine it has something to do with the editor, is there a way to select the checkboxes without it closing,

I show video for you to see.

Angular%20Starter%20(forked)%20-%20StackBlitz%20-%20Google%20Chrome%202023-10-14%2022-51-33

I can only deselect/select by right clicking (the browser menu appears) and then I click on the checkbox, it is not visible in the gift, but I left a stackblizt link for them to corroborate

#7

Hi @carlos

Thank you for the code and the explanation. I looked at your implementation and as it’s a custom logic it would require a code review from our side, so if you have an active license key send it to us at support@handsontable.com so we can check your current support plan.

I’d also recommend to check our example of custom editor (it’s in React, but the principles are the same) to check if the logic is correct as at the first view it seems that there is an issue with not preventing the editor to close before the chosen input item is selected.

https://jsfiddle.net/handsoncode/8d74fky5/

#8

sorry, actually no have license, i try develop a product, and when I see that I can translate my idea I would proceed to acquire a license.

#9

Hi @carlos

I understand. Please, check the example I sent you and compare it with your implementation regarding the editor closing logic.

#10