Thousands separator in UnimEdit

[Ario.Paxaz]

Hello

 

How do I enable the thousands separator in UnimEdit?

 

Regards.

[Sherzod]

8 hours ago, Ario.Paxaz said:

How do I enable the thousands separator in UnimEdit?

Hello,

Which build are you using?

[Ario.Paxaz]

2 hours ago, Sherzod said:

Which build are you using?

1592

[Sherzod]

14 hours ago, Ario.Paxaz said:

1592

OK.

Use UnimNumberEdit.

[Ario.Paxaz]

6 hours ago, Sherzod said:

Use UnimNumberEdit

Which property should I use?

[Ario.Paxaz]

I used this link.

But don't work.

[Sherzod]

I will try to check again.

[Ario.Paxaz]

9 minutes ago, Sherzod said:

I will try to check again.

Thank you very much.

My customer really needs it.

[Ario.Paxaz]

On 1/11/2025 at 2:54 PM, Sherzod said:

I will try to check again.

Hello.

 

Have you checked this?

 

[Sherzod]

On 1/10/2025 at 12:34 AM, Ario.Paxaz said:

How do I enable the thousands separator in UnimEdit?

Hello,

What thousandths separator do you want?

[Ario.Paxaz]

7 minutes ago, Sherzod said:

What thousandths separator do you want?

Hello.

 

I want this  10,000,000

[Ario.Paxaz]

14 minutes ago, Sherzod said:

What thousandths separator do you want?

Of course I enable the following feature.

UnimEdit1.InputType := 'number';

That is, I want the numeric keypad to only open when the user enters this unimedit.

 

[Ario.Paxaz]

I can also put UnimNumberEdit on the form
It doesn't matter if the thousands separator works for UnimNumberEdit or UnimEdit.

1- The user can see the thousands separator like 10,000,000.

2- The keyboard only opens numbers for the user when entering data.

[Ario.Paxaz]

Hello.

 

I set the following property

UnimEdit1.InputType := 'text';

 

Is there a way to force the numeric keypad to open?

 

Regards.

 

[Ario.Paxaz]

On 1/14/2025 at 10:30 PM, Ario.Paxaz said:

Is there a way to force the numeric keypad to open?

 

I use this approach.

function painted(sender, eOpts)
{
    sender.inputElement.dom.setAttribute("inputmode", "numeric");
}  

 

Now I set the following

UnimEdit1.Input Type := 'text';

and the numeric keypad opens.

 

 

[Ario.Paxaz]

On 1/14/2025 at 3:27 PM, Sherzod said:

What thousandths separator do you want?

Hello.

The following Java Script code did not work.

function change(sender, newValue, oldValue, eOpts)
{
  var separator = ",";
  var int = sender.value.replace ( new RegExp ( separator, "g" ), "" );
  var regexp = new RegExp ( "\\B(\\d{3})(" + separator + "|$)" );
  do
  {
    int = int.replace ( regexp, separator + "$1" );
  }
  while ( int.search ( regexp ) >= 0 )
  sender.setValue(int);
}

 

Regards.

[Ario.Paxaz]

Hello @Sherzod

I used the OnChange event in Delphi to separate three digits, three digits of numbers inside the unimedit. And I used Delphi code to separate the numbers,

But I had a delay in inserting the separator.

I am using the following script for the client-side event, which is not working.

Should the script for the unimedit be modified?

function change(sender, newValue, oldValue, eOpts)
{
  var separator = ",";
  var int = sender.value.replace ( new RegExp ( separator, "g" ), "" );
  var regexp = new RegExp ( "\\B(\\d{3})(" + separator + "|$)" );
  do
  {
    int = int.replace ( regexp, separator + "$1" );
  }
  while ( int.search ( regexp ) >= 0 )
  sender.setValue(int);
}

 

Regards.

 

[Sherzod]

Hello,

Sorry, I don’t have a specific solution yet. I’ve tried.
Do your users only use mobile devices?

[Ario.Paxaz]

6 minutes ago, Sherzod said:

Do your users only use mobile devices?

I wrote a custom pwa for a client.
Everything works great.
The client requested this and did not proceed with the payment.

[Sherzod]

On 1/17/2025 at 10:07 PM, Ario.Paxaz said:

I wrote a custom pwa for a client.
Everything works great.
The client requested this and did not proceed with the payment.

I think I've solved the problem, tomorrow I'll try to share it with you if I can fully implement it.

[Sherzod]

On 1/17/2025 at 10:07 PM, Ario.Paxaz said:

I wrote a custom pwa for a client.
Everything works great.
The client requested this and did not proceed with the payment.

Try this approach:

1. Use UnimNumberEdit

2. UnimNumberEdit.ClientEvents.ExtEvents ->

function painted(sender, eOpts) 
{
    var field = sender;

    if (field._customSetupDone) return;
    field._customSetupDone = true;

    function customNumberFormat(value) {
        if (value === null || value === undefined || value === '') {
            return '0.00';
        }

        const number = parseFloat(value);
        if (isNaN(number)) {
            return '0.00';
        }

        return number.toLocaleString('en-US', {
            minimumFractionDigits: 2,
            maximumFractionDigits: 2
        });
    }

    var parent = field.up();

    if (!parent) {
        console.error('Parent container not found!');
        return;
    }

    field.formattedField = Ext.create('Ext.field.Text', {
        x: field.getLeft(),
        y: field.getTop(),
        width: field.getWidth(),
        style: 'margin: 0',
        value: customNumberFormat(field.getValue() || 0),
        clearable: true,
        hidden: false,
        listeners: {
            focus: function () {
                const rawValue = this.getValue().replace(/,/g, '');
                field.setValue(rawValue);
                this.hide();
                field.show();
                field.focus();
            },
            clearicontap: function () {
                const defaultValue = 0;

                this.setValue(customNumberFormat(defaultValue));
                field.setValue(defaultValue);
                this.hide();
                field.show();
                field.focus();
            }
        }
    });

    parent.add(field.formattedField);
    
    field.hide();

    field.on('blur', function () {
        const value = field.getValue();

        if (value !== null && value !== undefined && value !== '') {
            const formattedValue = customNumberFormat(value);
            field.formattedField.setValue(formattedValue);
        } else {
            field.formattedField.setValue(customNumberFormat(0));
            field.setValue(0);
        }

        field.formattedField.show();
        field.hide();
    });

    parent.on('resize', function () {
        field.formattedField.setLeft(field.getLeft());
        field.formattedField.setTop(field.getTop());
        field.formattedField.setWidth(field.getWidth());
    });
}

 

[Ario.Paxaz]

1 hour ago, Sherzod said:

Try this approach:

 

Excellent.

[Ario.Paxaz]

14 hours ago, Sherzod said:

I think I've solved the problem, tomorrow I'll try to share it with you if I can fully implement it.

Hello and Thanks Sherzod.

If I want to take action when the user is typing a number, on which event should I call it?

 

Regards.

[Sherzod]

Hello,

Sorry? 

[Ario.Paxaz]

 

5 minutes ago, Ario.Paxaz said:

If I want to take action when the user is typing a number, on which event should I call it?

 

I wrote that change in the event, but on Android it requires the Go key to work.