Is it possible to enable Custome Renderer and Cells effetcs at the same time?

Tags: #<Tag:0x00007efc60a507b8>
#1

https://jsfiddle.net/cs4rhkxn/7/

This is what you see when you open and run my jsfiddle:

image

When you edit the A1 cell (for example, try to type ‘2017’):

image

Hit enter then the cursor goes to A2 cell:

image

My question is why A1 cell cannot be like ‘2,017’?

Expected result: 2,017
Actual result: 2017

Because, in my sample code, there is cells the code ‘pattern: 0,0’.
I was expecting this code takes effect for the entier spreadsheet (including the A1 cell)

image

In my example, for A1 cell, I try to apply both of Customer Renderer and Cells: function.

Is my code wrong?

#2

To get the decimal number you need to use the comma. You can program it either way but the default behavior doesn’t convert a non-decimal value to a decimal one.

Here’s https://jsfiddle.net/wbep9L6o/ an example where we modify the value in a way that after typing 2050 the way appears as 2.050 (line 15 in the code).

The numeric format itself is a pattern of formatting the cells used by Numbro (our dependency). Here https://numbrojs.com/format.html you can check the input and output on a certain format. We do not support them all but it should give you an overall result.

Let me know if you’d need more help with the renderer.

#3

Sorry, but I wanted the 2050 to be displayed 2,050 not 2.050

#4

a little bit more coding but possible https://jsfiddle.net/w70bcnp5/

1 Like
#5

When i try to type 2,050 manually:
image
the cell will look like 0,002:
image .

Is there any way to make the typed value as is (2,050 should look like 2,050 just as typed)?

#6

Hi @kazuya.okamoto

Maybe this approach fit to your needs - https://jsfiddle.net/udnt13Lb/?

#7

Thank you for the info.

Please see my new playground code.
https://jsfiddle.net/ysut2aj6/

i intend to apply the follwoing pattern:
pattern: {
thousandSeparated: true
}

When i typed a value into the cell manually, it works.
image

However, when i try to copy a value in excel and paste it to Handson,
image

Handson shows that the value is invalid,
image

Is there any way for the COPY PASTE operation (from excel file) to be allowed like this example?

#8

Hey @kazuya.okamoto

your Excel data has two commas, it marked red as an incorrect value.

#9

Hi @aleksandra_budnik,

thanks for the info.

Why having two commas considered as an incorrect value?
Excel spreadsheet will accept that kind of data entry.
Also, other Javascript spreadsheet frameworks will consider it as a correct value.

Open excel sheet in your PC and try to type 2,345,678 please.

#10

the 000,000,000 format of data is accepted by text cell type but not by numeric.

Here https://jsfiddle.net/smw763xp/ column 0 is text and column 1 is numeric.

You can still change this behavior while creating a custom validator. Here’s more about this subject https://handsontable.com/docs/7.4.2/demo-data-validation.html

#11

Thank you for your suggestion, @aleksandra_budnik

Switching from Numeric to Text is one of what I considered, but there will be no numeric validation when i set the field to Text.

Making customize validation is going too far to me, based on the manhour I can allocate to my project.

Isn’t there any way to make the field behave like Text but still with the effect of Numeric validation?

#12

It’s not that hard if you use a regex generator :slight_smile:
Here’s the demo https://jsfiddle.net/ar75dbs3/
Here I allow to use digints 0-9 and commas (,).

#13

Hi @aleksandra_budnik,

This is getting close to what I need, but it still accepts impossible values such as 1,23,456

Isn’t there any other option to make both possible:

  1. input usability is like TEXT
  2. there is still a fully-working numeric validation.
#14

You can either define a cell as numeric which will allow you to

  • use predefined validator (accepts only ona comma)
  • create a new validator

choose text cell type

  • it won’t allow you to use any validation
  • it will allow to type/paste every char

I recommend visiting a regex generator website to generate the proper syntax for the custom validator

#15

Can I request to change the Numeric’s predefined validator in Handson?

use predefined validator (accepts only ona comma)

Currently, Handson’s validator (for numeric) checks one period only.

Example of Accepted number inputs in Handson:

  1. 1234.56 (one period)
  2. 123456

Example of NOT Accpted number inputs in Handson:

  1. 1234,56 (one comma)
  2. 123,456,789 (two commas)
  3. 123,456.0 (one comma + one period)

There are many other spread JS library that can validate both of Accepted and Not Accepted.

It is not that easy for me to create a custom validation, even if I use the proper syntax in your suggested website.

I’m thinking of registering this as a GitHub Issue to get improved version.

Also, sadly, my project team may stop to consider purchase more quantity of your producs in the future.

#16

You can always create a feature request on our Github board https://github.com/handsontable/handsontable

However, we usually do not change defaults (to keep backward compatibility). That is why we allow users to create custom validator, editor and renderer.

If you would pass the whole list of the cases
input / output / class validity (validated as bad - red) I will help you to create the script.

1 Like
#17

Can you please send me an email to support@handsontable.com with those patterns?

#18

Thank you, @aleksandra_budnik!

I understand changing the defualt behaivor isn’t very easy task to do.
Having said this, I’m so glad that you could come up with the proposal to make a valiation for my request.

I will be getting back to you once my specification (probably almost like Excel) tomorrow.

I will use the email address when replying to this.

#19

I just received the message on email so I allow myself to close this forum ticket.

#20