[Data Grid Reactive] How to suppress empty numeric values shown as zero
Forge component by Bruno Martinho
Application Type
Reactive

Hi,

I have a table containing 3rows where in one a numeric (decimal 12,3) field Price is empty. In the datagrid this is shown as a zero value. Is there a simple way to suppress this or should I go the way of conditional formatting?

Hi Raymond Vermeer,

An example can be done in expression:

If (GetTest.List.Current.Test.GrossTakingsAmount <= 0, "", FormatCurrency (GetTest.List.Current.Test.GrossTakingsAmount, "$", 2, ".", ","))

Or directly in the aggregate filter.

I hope it helps you.

Best Regards,

But with this solution I have to change my Price column from Currency to Text and I will loose all filter options in the grid that comes with a numeric column.

Hey Raymond!


Don't worry. You won't need to change your columns. With the grid's new On Initialize Event, you can run a script that solves your problem.

For this to happen you will need to create a handler for the event:
And inside this handler, you will need to run Javascript containing the following code:

var column = GridAPI.GridManager.GetActiveGrid().provider.columns.filter(function(column){ return column.binding === "Sample_Product.Price"});

column[0].isRequired = false;

Notice that you will need to change the code above to your specific binding.


Just in case, I'm uploading a sample where you can find the mentioned solution.

If you have any questions, feel free to ask us.


Thank you,

Gabriel Lundgren

ForumPriceNull.oml

Thanks Gabriel but your Javascript above:

var column = GridAPI.GridManager.GetActiveGrid().provider.columns.filter(function(column){ return column.binding === "Sample_Product.Price"});

column[0].isRequired = false;

is different from the one in your oml example:

var column = GridAPI.GridManager.GetActiveGrid().provider.columns.filter(function(column){ return column.binding === "Sample_Product.Price"})[0];

column.isRequired = false;

Also the oml gives 21 errors when I open it in service studio. The most important one is: 

Required Property Value

Unknown 'Structures\Grid' Source Block in 'Grid1' Block.

I tried to build both versions of the javascript in in my screen but both have no effect.

Should I only change Sample_Product.Price ?

I fixed there errors in your example.

I put the price of one of the product records in the database to zero.

Still the zero price is displayed in your example:

Can you send me your sample please?

this is the sample I use. In the Product table you have to update a price to zero.

ForumPriceNull.70731.oml

Raymond, 


I'm sorry I misunderstood your initial question. I was thinking you wanted to do this in runtime. The sample I've sent you allows you to do what you desire if you press delete on the cell.

I just want to display the data. The grid is not editable. Zero numbers need to be suppressed from displaying.

Hello @Raymond Vermeer 

In order to achieve that requirement you'll need to extend the DataGrid behavior.

Using the OnInitialize event, you need to use JS to set the field value as undefined when the value is 0.

In the sample, the data source doesn't have a price = 0 so we've used 99.9

Please mind, that for your use case, you need to replace the 99.9 by 0 and e.dataItem.[your data source field Name]

Also, this hasn't been tested for all possible use cases or that it cover all of your requirements, so we cannot assure that it will work for all use cases.

The OML has been attached.

Please let us know if this helps,

Thanks,

Bruno Martinho


ForumPriceNull.70731.oml

As a side effect with this Javascript the grouping on one or more columns doesn't work anymore. When I disable the javascript the grouping works again.

Hello @Raymond Vermeer ,

This wasn't tested to every possibility, but in this case it was some bad JS written by me, I'm sorry.

GridAPI.GridManager.GetActiveGrid().provider.updatingView.addHandler(function(grid) {

     grid.rows.forEach(function(x) {

         if (x.dataItem.Sample_Product && x.dataItem.Sample_Product.Price === 99.9) {

             x.dataItem.Sample_Product.Price = undefined; 

         }

    });

})

When you do groups using group panels, there are new rows created (for each group) and they don't have the column information in dataItem.

Can you please check if this solves that error?

Again, please keep in mind that this hasn't been tested in all uses cases,

Bruno Martinho

Hi Raymond Vermeer,

Another solution would be an if in the column expression:

Result:

I hope it helps you.

Best Regards,

For a "normal" table this would work but this concerns the Data Grid Reactive component.

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.