Conditionally hide or disable GridCommandButtons
I need to hide a Grid Command Button, say if the current displayed row contains the Administrator user name, I need to hide the Delete Button, also I would also need to be able to disable the reset password button if the current use who is logged in is not admin, it would disable all the reset password buttons in the grid but the users.
Is this possible in your grid and if so how, I cannot seem to find any examples, plus I have studied the documentation and can't seem to work out a way to achieve this,
I did try to add a Template to the GridColumnHeader with GridCommandButtons in, but this failed.
Example I have works using the MatBlazor Table.
<MatTable>
<MatTableHeader>
<th>Full Name</th>
<th>Email</th>
<th>Roles</th>
<th>Options</th>
</MatTableHeader>
<MatTableRow Context="UserRow">
<td>@UserRow.Name</td>
<td>@UserRow.Email</td>
<td>@UserRow.Roles</td>
<td>
<AuthorizeView Policy="@Policies.IsAdmin" Context="AuthorizeContext">
<Authorized>
<MatIconButton Icon="edit" OnClick="@()">/MatIconButton>
</Authorized>
<NotAuthorized>
<MatIconButton Icon="edit" OnClick="@()" Disabled="true"></MatIconButton>
</NotAuthorized>
</AuthorizeView>
<AuthorizeView Policy="@Policies.IsAdmin" Context="AuthorizeContext">
<Authorized>
<MatIconButton Icon="rotate_right" OnClick="@()">/MatIconButton>
</Authorized>
<NotAuthorized>
<MatIconButton Icon="rotate_right" Disabled="@(UserRow.UserId != userProfile.UserId)" OnClick="@()" Disabled="true"></MatIconButton>
</NotAuthorized>
</AuthorizeView>
<AuthorizeView Policy="@Policies.IsAdmin" Context="AuthorizeContext">
<Authorized>
@if (!UserRow.FirstName.Contains("Administrator")) {
<MatIconButton Icon="rotate_right" OnClick="@()">/MatIconButton>
}
</Authorized>
<NotAuthorized>
<MatIconButton Icon="delete" Disabled="true"></MatIconButton>
</NotAuthorized>
</AuthorizeView>
</td>
</MatTableRow>
</MatTable>
SIGN IN To post a reply.
3 Replies
VN
Vignesh Natarajan
Syncfusion Team
April 20, 2020 10:37 AM UTC
Hi Simon,
Greetings from Syncfusion support.
Query: “I need to hide a Grid Command Button, say if the current displayed row contains the Administrator user name”
From your query we understand that you want to render command button based on row details. We suggest you to achieve your requirement using Column template feature of the Grid. Using column template we can render custom components inside the Grid column. Inside the template you can get the current row details.
Refer the below code example
|
<SfGrid @ref="Grid" DataSource="@Employees">
<GridEditSettings AllowAdding="true" AllowDeleting="true" AllowEditing="true"></GridEditSettings>
<GridColumns>
<GridColumn Field=@nameof(EmployeeData.EmployeeID) HeaderText="Employee ID" IsPrimaryKey="true" TextAlign="TextAlign.Right" Width="120"></GridColumn>
<GridColumn Field=@nameof(EmployeeData.FirstName) HeaderText="First Name" Width="130"></GridColumn>
<GridColumn Field=@nameof(EmployeeData.Title) HeaderText="Title" Width="120"></GridColumn>
<GridColumn Field=@nameof(EmployeeData.HireDate) HeaderText="Hire Date" Format="d" TextAlign="TextAlign.Right" Width="150"></GridColumn>
<GridColumn HeaderText="Employee Image" TextAlign="TextAlign.Center" Width="120">
<Template>
@{
var position = (context as EmployeeData);
if (position.Title != "Administrator")
{
<SfButton OnClick="@(()=>Del(position))">Delete</SfButton>
}
<SfButton Disabled="@(position.FirstName == "Nancy")">Refresh</SfButton>
}
</Template>
</GridColumn>
</GridColumns>
</SfGrid>
|
For your convenience we have prepared a sample which can be downloaded from below
Refer our UG documentation for your reference
Kindly get back to us if you have further queries.
Regards,
Vignesh Natarajan
SA
Simon Arnold
April 20, 2020 11:37 AM UTC
Thanks for that, it is getting me in the right direction, now I have come across a small issue I need to use the Tooltip as well, but when I use the SfToolTip around the button, the position of the tooltip is at the end of the data row and not on the button, If I assign and ID to the button, it only shows on on button and then won't show again, I know I would have to assign a unique id to each button and tooltip target, but that seems a little overkill, any other suggestions on this ?
VN
Vignesh Natarajan
Syncfusion Team
April 21, 2020 03:54 AM UTC
Hi Simon,
Thanks for the update.
Query: “now I have come across a small issue I need to use the Tooltip as well”
We suggest you to define the title attribute to Syncfusion Button using HtmlAttributes property of SfButton. Refer the below code example.
|
<GridColumn HeaderText="Employee Image" TextAlign="TextAlign.Center" Width="120">
<Template>
@{
var position = (context as EmployeeData);
if (position.Title != "Administrator")
{
<SfButton Content="Delete" HtmlAttributes="@primButton" OnClick="@(()=>Del(position))"></SfButton>
}
<SfButton Disabled="@(position.FirstName == "Nancy")">Refresh</SfButton>
}
</Template>
</GridColumn>
. . . . . |
Refer our how to section for your reference
Kindly get back to us if you have further queries.
Regards,
Vignesh Natarajan
SIGN IN To post a reply.
