numericedit right alligned?

Michael Kornatzki

Asked On September 30, 2019 12:13 PM UTC

Hi,

is it possible to make the value in a numericedit (NumericTextBox) of a dataGrid right aligned?

I want to configure for decimals a right aligned numeric edit field without spin buttons.

{
    field: 'Freight',
    headerText: 'Freight',
    textAlign: 'Right',
    format: 'C3',
    width: 90,
    editType: 'numericedit',
    edit: { params: { decimals: 4, showSpinButton:false, validateDecimalOnType:true, textAlign: 'Right'} },
}

The value in the editor is still left aligned.

Kind regards,

michael

Reply | Reply with quote

Pavithra Subramaniyam [Syncfusion]

Replied On October 1, 2019 05:09 AM UTC

Hi Michael,

Thanks for contacting Syncfusion support.

You can achieve your requirement by adding the “cssClass” property for the NumericTextBox component. Please refer to the below code example and documentation link for more information.

{

field: 'Freight',

headerText: 'Freight',

textAlign: 'Right',

format: 'C3',

width: 190,

editType: 'numericedit',

edit: { params: { decimals: 4, showSpinButton:false, validateDecimalOnType:true, cssClass: 'numericalign'} },

},

[Style]

.numericalign .e-numerictextbox{

text-align:right;

}

Documentation: https://ej2.syncfusion.com/javascript/documentation/api/numerictextbox/#cssclass

Regards,

Pavithra S.

Reply | Reply with quote

Michael Kornatzki

Replied On October 1, 2019 05:26 AM UTC

Thank you, this works.

Reply | Reply with quote

Pavithra Subramaniyam [Syncfusion]

Replied On October 1, 2019 07:36 AM UTC

Hi Michael,

Thanks for your update.

We are glad to know that the provided solution helped you.

Please get back to us if you need any assistance on this.

Regards,

Pavithra S.

Reply | Reply with quote

pradeep

Replied On October 3, 2019 10:40 AM UTC

Hi Michael,

Thanks for contacting Syncfusion support.

You can achieve your requirement by adding the “cssClass” property for the NumericTextBox component. Please refer to the below code example and documentation link for more information.

{

    field: 'Freight',

    headerText: 'Freight',

    textAlign: 'Right',

    format: 'C3',

    width: 190,

    editType: 'numericedit',

    edit: { params: { decimals: 4, showSpinButton:false, validateDecimalOnType:true, cssClass: 'numericalign'} },

},

[Style]

.numericalign .e-numerictextbox{

        text-align:right;

  }

Documentation: https://ej2.syncfusion.com/javascript/documentation/api/numerictextbox/#cssclass

Regards,

Pavithra S.

not work

Reply | Reply with quote

Pavithra Subramaniyam [Syncfusion]

Replied On October 3, 2019 10:59 AM UTC

Hi pradeep,

For validating your query we need some more details from your end. Could you please provide the below details that will be helpful for better understanding and provide solution as early as possible.

Share your code example.
Share the customized style for numeric text box
Share the Syncfusion Package version you are using.

Regards,

Pavithra S.

Reply | Reply with quote

Thread ID:	Created:	Updated:	Platform:	Replies:
147973	Sep 30,2019 12:13 PM UTC	Oct 3,2019 10:59 AM UTC	Vue	5

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US