numericedit right alligned?

[Michael Kornatzki]

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

[Pavithra Subramaniyam]

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. 

[Michael Kornatzki]

Thank you, this works.

[Pavithra Subramaniyam]

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. 

[pradeep]

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

[Pavithra Subramaniyam]

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. 

 

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

 

Regards, 

Pavithra S.