127
Views
6
Comments
Solved
[OutSystems Data Grid] [OutSystems Data Grid] Dependent Conditional Format on several columns
outsystems-data-grid
Reactive icon
Forge asset by OutSystems

I'm trying to do a conditional format on several cells, based on a value from another cell.

I saw some posts related to that but was not able to implement it.

Taking this example and already having a class 'text-red':

How can I do to apply the 'text-red' to the cells: Stock, Category when they are IsFavourite only when the grid is initialized, it is not necessary to apply it with the OnChange of IsFavourite.

Thanks.

Best regards

2022-11-12 11-28-30
Gonçalo Martins
Staff
Solution

Hello @Gonçalo Aguiar 

Conditional formats using logic from different columns aren't available out of the box.

However, using our APIs I was able to make a possible solution that is not as complex as it might seem:

  • Replaced your code in the Initialize event of the Grid block by:
    var grid = OutSystems.GridAPI.GridManager.GetGridById($parameters.GridId);
    
    grid.provider.formatItem.addHandler(function(s, e) {
       
        //Exclude aggregated rows
        if (e.panel !== s.columnFooters) {
    
            const col = s.columns[e.col];
    
            // column which we want to check
            if(col.binding === "Sample_Product.Price" || 
               col.binding === 'Sample_Product.Stock') 
            {
                //Check if is a valid item
                if(e.getRow().dataItem)
                {
                    if(e.getRow().dataItem.Sample_Product.IsFavourite === true)
                    {
                        // apply css class based on condition.
                        wijmo.addClass(e.cell, 'background-cyan');
                    }
                }
            }
        }
    })
                    

  • Created a new CSS class in the theme (the !important is really needed here đŸ˜¶)
    .wj-cell.background-cyan{
        background-color: cyan !important;
    }		

  • Et voilĂ¡:

Hope it helps.

Cheers,
GM


DataGrid_Workaround.oml
2022-11-12 11-28-30
Gonçalo Martins
Staff

Hello @Gonçalo Aguiar 

Have you tried to take a look at the example from our Sample?
Can you share an oml showing your implementation so that we can take a look?

Cheers,
GM

2022-03-29 16-12-55
Gonçalo Aguiar

Hi @Gonçalo Martins 

That example works when the values are related to each of the columns, or if I wanted to change the CSS of the entire row.

In this case, I want to change several cells depending on the value of another column.

I attached an example of what I'm trying to do.

Best regards.

DataGrid.oml
2018-11-09 09-14-06
Gonçalo Almeida

Hey,


You tagged the wrong Gonçalo ;)


2022-11-12 11-28-30
Gonçalo Martins
Staff
Solution

Hello @Gonçalo Aguiar 

Conditional formats using logic from different columns aren't available out of the box.

However, using our APIs I was able to make a possible solution that is not as complex as it might seem:

  • Replaced your code in the Initialize event of the Grid block by:
    var grid = OutSystems.GridAPI.GridManager.GetGridById($parameters.GridId);
    
    grid.provider.formatItem.addHandler(function(s, e) {
       
        //Exclude aggregated rows
        if (e.panel !== s.columnFooters) {
    
            const col = s.columns[e.col];
    
            // column which we want to check
            if(col.binding === "Sample_Product.Price" || 
               col.binding === 'Sample_Product.Stock') 
            {
                //Check if is a valid item
                if(e.getRow().dataItem)
                {
                    if(e.getRow().dataItem.Sample_Product.IsFavourite === true)
                    {
                        // apply css class based on condition.
                        wijmo.addClass(e.cell, 'background-cyan');
                    }
                }
            }
        }
    })
                    

  • Created a new CSS class in the theme (the !important is really needed here đŸ˜¶)
    .wj-cell.background-cyan{
        background-color: cyan !important;
    }		

  • Et voilĂ¡:

Hope it helps.

Cheers,
GM


DataGrid_Workaround.oml
2022-03-29 16-12-55
Gonçalo Aguiar
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.