The format of a column's cell is lost when the first column's value is null

Question

HiMy code is<e-column field='march' headerText='Mar' textAlign='center'  format='C2'/>The above is the same for all columns, notice I use format='C2' to make the format as currency with 2 decimal digits. As you can see from the below:If the value of the first row is there, everything is ok. If the first row's value is null (I put null instead of zero), then the rest of the values below, loses the format. The same happens with the footer summary of those columns.Also, I read here: https://codesandbox.io/s/vue-template-zvpsi and here https://ej2.syncfusion.com/vue/documentation/grid/cell/ but no matter what I do, I can't make the cell text to be bold, or anything else other than the default.Am I doing something wrong or is it a bug? I'm using version 18 of your components.Is there a newer version 18.1.43? I use 18.1.42 and it doesn't say there's a newer one but in your site I see there is from 7/4.Thanks

Rajapandiyan Settu · Answer

Hi Amos,

Greetings from syncfusion support.

Query : If the value of the first row is there, everything is ok. If the first row's value is null (I put null instead of zero), then the rest of the values below, loses the format. The same happens with the footer summary of those columns.

Before proceeding your requirement we would like to share some details about the column behavior. The currency format is only applied for the column with type as number. By default the column type is null and which is changed as type of first cell value in that column.

In your grid you have null value for the first cell. So the column type is null. Because of that the currency format is not applied to that column. To avoid such cases we suggest you to set the column type manually by using the column level API type. Please refer the below code example and sample for more information.

<e-column field="X2" type="number" format="C2" width="120" textAlign="Right"></e-column>

Sample : https://codesandbox.io/s/vue-template-uxirk?file=/src/App.vue

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

Query #2 : Is there a newer version 18.1.43? I use 18.1.42 and it doesn't say there's a newer one but in your site I see there is from 7/4.

Yes. At Syncfusion, we are committed to fixing all validated defects (subject to technological feasibility and Product Development Life Cycle ) and will include the defect fix in our patch release which is rolled out by weekly. Our last patch release was rolled out on APR 7^th 2020. Please refer the below link.

https://www.npmjs.com/package/@syncfusion/ej2

Regards,

Rajapandiyan S

Amos · Answer

1. type="number" to fix the formatting - worked, thanks a lot.2. Regarding making a cell content bold: I read here: https://codesandbox.io/s/vue-template-zvpsi and here 
https://ej2.syncfusion.com/vue/documentation/grid/cell/ but no matter 
what I do, I can't make the cell text to be bold, or anything else other
 than the default. What am I missing?3. 18.1.42 vs 18.1.43: So there is a newer version but it is a patch and not a formal release, right? I do npm outdated to see the list of packages to be updated so once the release is formal,  I will see it listed? Or is there another way for me to get upgrades of syncfusion's libraries?Thanks

Rajapandiyan Settu · Answer

Hi Amos, 

Thanks for your update. 

Query #1:  type="number" to fix the formatting - worked, thanks a lot. 

We are glad that the provided solution is resolved your requirement.  

Query #2: Regarding making a cell content bold: I can't make the cell text to be bold, or anything else other than the default. 
 
We have validated the provided details and suggest you to use the below CSS classes to customize the grid style. 
 




 
// customize the selected row style 
.e-grid td.e-active { 
  background: #22b24b; 
  font-weight: bold; 
} 
// customize the grid content style 
.e-grid .e-rowcell, 
.e-grid .e-row .e-detailrowcollapse { 
  background: rgb(224, 224, 224); 
  border-color: rgb(0, 0, 0); 
  font-family: serif; 
  font-style: italic; 
  font-weight: bold; 
} 
//customize the header background 
.e-grid .e-headercell, 
.e-grid .e-detailheadercell { 
  background: blue; 
} 
// customize the grid header content style 
.e-grid .e-headertext { 
  font-weight: bold; 
  font-size: 15px; 
  font-family: serif; 
  font-style: italic; 
  color: white; 
} 
 
 
 
Sample : https://codesandbox.io/s/vue-template-pb3xk 
 
Query #3 : 18.1.42 vs 18.1.43: So there is a newer version but it is a patch and not a formal release, right? I do npm outdated to see the list of packages to be updated so once the release is formal,  I will see it listed? Or is there another way for me to get upgrades of syncfusion's libraries? 
 
This is our official release only and all the patch release fixes are included in our main release. So we are glad to announce that you could use syncfusion’s latest packages. 
 
Please get back to us if you need further assistance on this. 
 
Regards, 
Rajapandiyan S

Amos · Answer

I tried the following because I have different styles for different cells:

<ejs-grid :dataSource="matrixData" height='100%' gridLines='Both' :allowSorting='true' :queryCellInfo='matrixColoring'>

    matrixColoring: function(args) {
        if (args.column.field == 'field1') {
            args.cell.classList.add('boldText');
        } else {
          if (this.matrixDataColoring[args.data['field1']][args.column.field] == 0)
            args.cell.classList.add('received');
          else if (this.matrixDataColoring[args.data['field1']][args.column.field] == 1)
            args.cell.classList.add('remain');
          else
            args.cell.classList.add('projected');
        }
    },

  .e-rowcell.boldText {
    font-weight: bold;
  }

  .e-rowcell.received {
    color: #66DA26 !important;
  }

  .e-rowcell.remain {
    color: #2E93fA !important;
  }

  .e-rowcell.projected {
    color: #8b42f8 !important;
  }

I tried with .e-rowcell and without .e-rowcell but both failed, nothing affected the content of the cell.
I see the relevant classes in the html code (inspect tab in F12 panel) meaning the classes are added as expected
but the class css code does not affect the cell.

Rajapandiyan Settu · Answer

Hi Amos, Thanks for your update. Query : I tried with .e-rowcell and without .e-rowcell but both failed, nothing affected the content of the cell. As per the provided code we have added a different custom classes to the grid cells in the queryCellInfo event. Changing the grid cell content styles using those custom classes is working fine at our end. please refer the below code example and sample for more information. queryCellInfo: function(args) { switch (+args.cell.getAttribute("index") % 3) { // adding a custom class to the grid cells case 1: args.cell.classList.add("customclass1"); break; case 2: args.cell.classList.add("customclass2"); break; default: args.cell.classList.add("customclass3"); break; } } }, Sample : https://codesandbox.io/s/vue-template-31ttg If you still face the same problem, please get back to us with the below details to validate further on this. Share the full grid code. Share the screenshot of grid cell element in the (inspect tab in F12 panel). If possible share the problem reproduced sample with us. Regards, Rajapandiyan S

Amos · Answer

I noticed that your demo is using version 17, once I changed it to @syncfusion/ej2-vue-grids 18.1.44 - the same problem occurs.The css change didn't have any affect on the grid.

Rajapandiyan Settu · Answer

Hi Amos, 

Thanks for your update. 

Query : I noticed that your demo is using version 17, once I changed it to @syncfusion/ej2-vue-grids 18.1.44 - the same problem occurs. 
The css change didn't have any affect on the grid. 
 
We updated the sample to the latest version and it completely working fine at our end. please refer the below sample for more information. 

Sample : https://codesandbox.io/s/vue-template-7qw63  
 
If you still face the same problem, please get back to us with the below details. 

Share the full grid code.
Share the screenshot of grid cell element in the (inspect tab in F12 panel).
Share the problem reproduced sample or make the issue given sample and share with us.
 
The above details are highly recommended to validate further on this. 
 
Regards, Rajapandiyan S