How to check whether full handsontable is empty or not?

Tags: #<Tag:0x00007efc7290c980>
#1

I need to know disable my Submit button when complete handsontable is empty and also i dont need red color on empty cell as well i.e. i don’t want to use allow empty: false and when someone enter value on handsontable then submit button should enable and vice versa???

#2

Hi @siddhantjain15298

To confirm - would you like to run your function for SUBMIT button only if all the cells in Handsontable are filled? (or filled with correct data)?

#3

Hi @aleksandra_budnik I need when handsontable is empty then submit button is disabled and when there is data then submit button is enabled and also if i emptied the table again then submit button disabled again if any cell is filled then submit button is enabled if no data inside the table then submit disabled.??

#4

Ok, so if AT LEAST one cell is filled then Submit button works.

#5

Yes and vice versa

#6

Here is an example that you can start with https://jsfiddle.net/qmbfnkau/14/ I’ve set up a flag that runs the logic of the button if it is set to true and true is given when the user edits any cell.

Doing the opposite (when there’s a lot of data and the user removes that data one after another) would require the check for the dataset. And you can use here for example https://handsontable.com/docs/api/options/#isemptyrow to do that checks on all of the rows.

#7

Hello @aleksandra_budnik I got the solution check if rows are empty or not according to that Submit button act accordingly

#8

Hello @aleksandra_budnik i have one more question actually need help in export functionality actually i am using numeric input with currency symbol but when i export currency symbol disappears in excel how do i get that in excel as it is same as in handsontable like having currency symbol and percentage symbol same as look in UI?

#9

Hi @siddhantjain15298

Export in Handsontable is based on the .CSV raw data transfer. It means that values in the cells are stripped from formatting, renderers, and styling.
If you would like to have that currency symbol in your .csv file output you would need to have it in the cell physically.

#10

Hi @aleksandra_budnik How can i alter the data can u give me demo of that like i need to symbol on values on time of export how do i do that?

#11

I do not have such a demo. But I can describe the process for you.

Here https://handsontable.com/docs/export-to-csv/#live-examples we trigger export on a button click, so before you can the exportPlugin you need to use

instance.batch(() => {
  instance.setDataAtCell(row, column, value_with_sign)
  ....
  instance.setDataAtCell(row, column, value_with_sign)
})

Where batch() method is used to avoid express calls to the cell renderer; setDataAtCell() method points out which cells have to be changed.

So if cell 0, 0 used to be 10 and appeared as $10.00 you would need to do
instance.setDataAtCell(0, 0, '$10.00)`

#12

Hi @aleksandra_budnik So do need to add instance.batch() insiade event callback or having a separate function also one question can we alter header for export only ??

#13

the setDataAtCell method triggers cell renderer so the table rerenders each time to call it. Batch takes all of those setDataAtCell calls and blocks the rendering till all of the cells are change. Here https://handsontable.com/docs/batch-operations/#overview is a graph that shows the execution time of methods like setDataAtCell with and without batch(). As you can see, with 3+ operations it is better to add the batch().

#14

Hi @aleksandra_budnik also can we change column header name only for export not on ui i.e l. Changes should display on Excel not on ui

#15

And what is the header presently and what should be exported?

#16

column
column.png916×199 5.29 KB

So for Example there is “CTR” column header for percentage in UI but when i export CTR should change with “CTR (%)” in excel

#17

with headers you can pick one of two approaches

  1. colHeaders
  2. afterGetColHeader

whatever you find easier to use.
If that is a single header to change I think that you could replace the value within the array of colHeaders.

#18

Actually You dont understand @aleksandra_budnik i am saying changes should reflect only in excel not on ui. On ui column header remain the same

#19

I understand. But the columnHeaders option of the exportToFile method accepts only boolean values (specify if headers should be added or not). This https://jsfiddle.net/snzp394w/ will not work.

That is why the only way to have different headers is to switch them as mentioned before (with the colHeaders possibly in updateSettings) and switch them back to whatever you wish when file is uploaded.

Here http://jsfiddle.net/4as0Lok9/ is a similar case but with hiddenRows. In the table, you can see some values starting with letter C in the first columns and when you export the file you can see more data that starts with A and B. For user it looks the same. But underneath (as shown in the demo) you are using the updateSettinhs method to change those settings and in a slip of second get them back to what should be visible for the user.

#20