Custom CheckboxEditor - Should i go for custom checkbox editor(new) or extend existing checkbox editor if i want to develop functionality like below

Tags: #<Tag:0x00007f8b25e20f88>
#1

This is the image for reference. When user double clicks, it should open the checkboxes list with whatever values I have available. Once the user clicks on ‘add an option’ it will be going to display ‘textbox’. Once the user enters text value and press enter it should append it in the existing list.

Shall I go for a custom new editor or extend existing checkbox editor? Can I get a reference to a link where anybody made a custom editor for the checkbox?

#2

Hey @manthanp

Admittedly checkboxEditor has only one method - beginEditing - but it’s a good start to extend the custom editor.

1 Like
#3

Thank you. @aleksandra_budnik. will start from there.

#4

Hi @aleksandra_budnik thanks for the response. i have a custom HTML renderer inside a cell and i have a rowheader property set to true on my handsontable instance.

Based on the content, my tables row height is managed automatically. but somehow height of the row headers remains as it is. It does not adjust dynamically. Any idea why ?

Attached is the screenshot below.

image.png850×133 11.4 KB

#5

Handsontable needs to know the exact high of a cell. You’d need to limit the area - for example add a DIV wrapper for the cell content.
Sometimes ‘autoRowSize: true’ also solves the misalignment.

#6

Yes, I have that flag(autoRowSize) set to true also I have made sure to limit the area by wrapping content of the cell into the DIV.
Issue is with the ROW HEADERS. They are not resizing according to the content.
If you see in screenshot, number 17,18 and 19 displayed for single row.

Also I have set, ‘rowHeaders’ flag to true, which is generating these numbers dynamically I guess. 1,2,3 etc… but only that part of my row ( i.e. cell which is 17,18 and 19) is not resizing.

#7

Would you be able to send am example with this code? I’d like to debug it.

#8

Hello @aleksandra_budnik . Thank you for response. It seems to be the CSS issue. I have resolved it. Sorry for delayed response.

However, I am stuck in exportFile pluging with HTML content. HTML content is coming as sanitized.

var d = hot.getPlugin('exportFile')
    d.downloadFile('csv', {
      bom: false,
      columnDelimiter: '\t',
      columnHeaders: true,
      exportHiddenColumns: true,
      exportHiddenRows: true,
      fileExtension: 'xls',
      filename: 'Handsontable-XLS',
      mimeType: 'text/csv',
      rowDelimiter: '\r\n',
      rowHeaders: false
    });

“test HTML content” is HTML content - Actual content inside cell is <div><p>test HTML content </p> </div>

but when I export the content of hot table it looks like below.

Do we have any solution for this ? so that HTML content will be parsed before export functionality works.

#9

The .csv file that is being exported is a raw file with no meta data, renderers or styling.

#10

So, is there any way to modify our data before export to excel operation is performed or may be we can pass a parameter name ‘data’ to the downloadFile method of exportToFile plugin ?

OR

We have to pefrom export on server side ?

#11

Data that is being exported is what Handsontable sees in the getData method. Here’s an example https://jsfiddle.net/v7zg2j36/
You can replace the element with anything else via setDataAtCell before it gets exported and then change it again when the export is finished.

#12

Thank you for response. I will try it out

#13