How to Apply Role-Based Data Masking in Syncfusion Blazor SfGrid Columns

[ammaraamer]

The application handles highly sensitive client records, contracts, and financial statements.

 

Recently, an external legal compliance firm audited the client's data workflows and mandated strict UI-level enforcement for data visibility to comply with regional financial privacy regulations. Because of this, I need to lock down certain UI elements dynamically based on user roles.

SfGrid: Is there a built-in way to apply a visual data mask (e.g., showing only the last 4 digits of a tax ID or masking email addresses) directly at the GridColumn level based on the active user's authentication role, without altering or intercepting the underlying bound data model?

[Prathap Senthil]

Hi ammaraamer,

Greetings from Syncfusion support.

Based on your requirement, the DataGrid does not provide a built-in GridColumn property for role-based data masking. By default, the Grid displays the field value bound to the column. However, you can implement UI-level masking without modifying the underlying data source by using a Column Template and applying custom masking logic based on the authenticated user's role. This approach affects only the displayed value in the UI, while the original value remains unchanged in the underlying data object. Kindly refer to the following code snippet and sample for more details.

Code Snippet:

 

<SfGrid DataSource="@Employees" Width="100%">

    <GridColumns>

 

        <GridColumn Field=@nameof(EmployeeRecord.Id)

                    HeaderText="ID"

                    Width="100" />

 

        <GridColumn Field=@nameof(EmployeeRecord.Name)

                    HeaderText="Employee Name"

                    Width="180" />

 

        <GridColumn HeaderText="Tax ID"

                    Width="180">

 

            <Template>

                @{

                    var employee = (context as EmployeeRecord);

 

                    <span>

                        @(CanViewSensitiveData

                            ? employee?.TaxId

                            : MaskTaxId(employee?.TaxId))

                    </span>

                }

            </Template>

 

        </GridColumn>

 

        <GridColumn HeaderText="Email"

                    Width="250">

 

            <Template>

                @{

                    var employee = (context as EmployeeRecord);

 

                    <span>

                        @(CanViewSensitiveData

                            ? employee?.Email

                            : MaskEmail(employee?.Email))

                    </span>

                }

            </Template>

 

        </GridColumn>

 

    </GridColumns>

</SfGrid>

 

@code {

 

    private bool CanViewSensitiveData;

 

    public List<EmployeeRecord> Employees = new()

    {

        new EmployeeRecord

        {

            Id = 1,

            Name = "John Smith",

            TaxId = "123456789",

            Email = "[email protected]"

        },

        new EmployeeRecord

        {

            Id = 2,

            Name = "Mary Jones",

            TaxId = "987654321",

            Email = "[email protected]"

        }

    };

 

 

    private string MaskTaxId(string taxId)

    {

        if (string.IsNullOrEmpty(taxId) || taxId.Length <= 4)

            return taxId;

 

        return new string('*', taxId.Length - 4) +

               taxId.Substring(taxId.Length - 4);

    }

 

    private string MaskEmail(string email)

    {

        if (string.IsNullOrWhiteSpace(email))

            return email;

 

        var parts = email.Split('@');

 

        if (parts.Length != 2)

            return email;

 

        var username = parts[0];

 

        if (username.Length <= 2)

            return "**@" + parts[1];

 

        return $"{username[0]}******{username[^1]}@{parts[1]}";

    }

Sample: Check the attachment.

Documentation: https://blazor.syncfusion.com/documentation/datagrid/column-template

Note: Template columns are primarily intended for rendering custom content and do not provide built-in support for actions such as sorting, filtering, or editing. To enable these actions, it is required to define the Field property for the GridColumn.

Regards,
Prathap Senthil