1. Home
  2. Forum
  3. JavaScript - EJ 2
  4. Problem with Mask Text in Grid

Problem with Mask Text in Grid

Hello!

When I enter a format in my table like "##.###,####" it only works when editing, but in the view it shows me the normal number.

How can i fix this?

I attach my example

{
    'field': "det_valor",
    'headerName': 'Valor',
    'headerText': 'Valor',
    'textAlign': 'Right',
    'edit': {'params': {'change': 'funChange'}},
    'validationRules': {'required': True},
    'format': '###0.#0',
    'editType': 'numericedit',
    'width': 200,
},

unedited:

editing:




1 Reply
RR Rajapandi Ravi Syncfusion Team February 22, 2022 01:50 PM UTC

Hi Luis, 

Greetings from Syncfusion support 

We have checked your shared information and based on your query we have prepared a sample and tried to reproduce your reported problem, but it was unsuccessful. In Grid initial rendering, the Grid displays the number based on the applied format. Please refer the below code example and screenshot for more information. 


let grid: Grid = new Grid( 
        { 
            dataSource: orderDataSource.slice(0,5), 
            editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Normal', newRowPosition: 'Top' }, 
            allowPaging: true, 
            columns: [ 
                .  .  .  .  .  .  .  .  . 
                .  .  .  .  .  .  .  .  . 
                { 
                    field: "det_valor", 
                    headerText: 'Valor', 
                    format: '###0.#0', 
                    editType: 'numericedit', 
                    width: 200, 
                }, 
               .  .  .  .  .  .  .  .  .  .  . 
               .  .  .  .  .  .  .  .  .  .  .  
], 
        }); 
    grid.appendTo('#Grid'); 


Screenshot: 

 

To apply the format while editing, since you are setting editType as numericedit we suggest you set the format by using edit params property. Please refer the below code example, sample and documentation for more information. 


let grid: Grid = new Grid( 
        { 
            dataSource: orderDataSource.slice(0,5), 
            editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Normal', newRowPosition: 'Top' }, 
            allowPaging: true, 
            columns: [ 
                .  .  .  .  .  .  .  .  . 
                .  .  .  .  .  .  .  .  . 
                { 
                    field: "det_valor", 
                    headerText: 'Valor', 
                    format: '###0.#0', 
                    edit: { params: { format: '###0.#0', decimals: 2 } }, 
                    editType: 'numericedit', 
                    width: 200, 
                }, 
               .  .  .  .  .  .  .  .  .  .  . 
               .  .  .  .  .  .  .  .  .  .  .  
], 
        }); 
    grid.appendTo('#Grid'); 


Screenshot: 

Format applied in NumericText box 

 



                              https://ej2.syncfusion.com/documentation/numerictextbox/formats/#custom-formats 

If you still face any issue, please share the below details that will be helpful for us to provide better solution. 

1)        Please share your sample datasource structure, we would like to check what type of values you are displayed in your Valor column. 

2)        Please share any issue reproducible sample or try to reproduce the issue with our above attached sample. 


Rajapandi R 



Loader.
Up arrow icon