display/hide columns based on user Role

Dear support,

Is it possible to display a column based on user role  in a Blazor Server app?

e.g. "admin" will be able to see the column with name DOB but "Simpleuser" role will not be able to see that column.

Can you please provide a working sample?

thank you


3 Replies

JP Jeevakanth Palaniappan Syncfusion Team November 17, 2021 09:02 AM UTC

Hi DAN, 

Greetings from Syncfusion support. 

We have validated your query and we suggest you to set the GridColumns definition based on your requirement in an if-else statement. Please refer the below code snippet for your reference. 

<SfGrid DataSource="@Orders"> 
@if (Role == "admin") 
{ 
    <GridColumns> 
        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn> 
        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn> 
        <GridColumn Field=@nameof(Order.DOB) HeaderText="DOB" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn> 
        <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn> 
    </GridColumns> 
    }  
else 
{ 
    <GridColumns> 
        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn> 
        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn> 
    </GridColumns>     
}     
</SfGrid> 

Please get back to us if you have any other queries. 

Regards, 
Jeevakanth SP. 





DA DAN replied to Jeevakanth Palaniappan November 17, 2021 09:04 AM UTC

Hello,

can you please provide a simple working sample with 2 roles that demonstrate the above?

thanks



JP Jeevakanth Palaniappan Syncfusion Team November 18, 2021 11:30 AM UTC

Hi DAN, 

We have prepared a sample to render columns based on a role. Here for an example, we have set roles in a variable Role. Initially, the Role is set as “admin” and the grid will render 4 columns. When you click on the ChangeRole button, the Role will be set as “user” the grid will render only 2 columns. So the grid will render the columns dynamically based on the Role. The grid level changes is just to render the GridColumns component in an if-else statement based on your scenario. With this example, we suggest you to modify your application based on your requirement. 

Please find the sample for your reference. 


<button @onclick="ChangeRole">ChangeRole</button> 
 
<SfGrid DataSource="@Orders">  
@if (Role == "admin")  
{  
    <GridColumns>  
        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn>  
        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn>  
        <GridColumn Field=@nameof(Order.DOB) HeaderText="DOB" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn>  
        <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn>  
    </GridColumns>  
} 
else 
{ 
    <GridColumns>  
        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn>  
        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn>  
    </GridColumns>      
}      
</SfGrid> 
 
 
@code{ 
    public List<Order> Orders { get; set; } 
 
    public string Role { get; set; } = "admin"; 
 
    public void ChangeRole() 
    { 
        if (Role == "admin") 
        { 
 
            Role = "user"; 
        } 
        else 
        { 
            Role = "admin"; 
        } 
    } 
} 

Get back to us if you have any other queries. 

Regards, 
Jeevakanth SP. 


Loader.
Up arrow icon