AuthorizeView with SfGrid ToolbarItems

[Gerald Maale]

Hello,

I have been searching for a way to use AuthorizeView to assign policies or roles using SfGrid. I am currently successful with DevExpress DataGrid where you can customize the toolbar items to accept AuthorizeView components. 

For instance, I want to achieve this using SfGrid:

<DxDataGrid Data="@LoadData"

            @ref="@Grid"

            @bind-SingleSelectedDataRow="@SelectedAssociation"

            PageSize="PageSize"

            ShowPager="true"

            ShowFilterRow="@ShowFilterRow"

            PagerPageSizeSelectorVisible="true"

            PagerAllDataRowsItemVisible="false"

            PagerAllowedPageSizes=@(new int[] {15, 30, 50})

            PagerNavigationMode=PagerNavigationMode.InputBox>

    <HeaderTemplate>

        <DxToolbar ItemRenderStyleMode="ToolbarRenderStyleMode.Plain">

            <AuthorizeView Policy="CanCreate">

                <DxToolbarItem Text="New" BeginGroup="true" Click="@OnCreateAssociation" IconCssClass="fa fa-plus"/>

            </AuthorizeView>

            <AuthorizeView Policy="CanUpdate">

                <DxToolbarItem Text="Edit" Click="@OnEditAssociation" IconCssClass="fa fa-edit"/>

            </AuthorizeView>

            <AuthorizeView Policy="CanDelete">

                <DxToolbarItem Text="Delete" Click="@OnDelete" IconCssClass="fa fa-trash" Enabled="@Enabled"/>

            </AuthorizeView>

        </DxToolbar>

    </HeaderTemplate>

    <Columns>

        <DxDataGridColumn Field=@nameof(Association.AssociationName) Caption="Name"/>

        <DxDataGridColumn Field=@nameof(Association.Description) Caption="Description"/>

    </Columns>

</DxDataGrid>

[Renjith Singh Rajendran]

Hi Gerald, 

Greetings from Syncfusion support. 

Based on this scenario, we suggest you to use Custom Toolbar in Grid. With this ToolbarTemplate you can use the SfToolBar component as Grid’s toolbar. Please refer the below documentation for more details, 

https://blazor.syncfusion.com/documentation/datagrid/tool-bar/#custom-toolbar 

So now you can customize the render of ToolbarItem component of SfToolbar based on your requirement. 

https://blazor.syncfusion.com/documentation/toolbar/getting-started/ 

https://blazor.syncfusion.com/demos/toolbar/default-functionalities?theme=bootstrap4 

Please get back to us if you need further assistance. 

Regards, 

Renjith Singh Rajendran 

[Gerald Maale]

Hello Renjith,

Thank You  for the feedback. I tried the links given and I was able to get the toolbar work the way I wanted. 

Below is a snippet of how I did it. Hope its the right way.

<Syncfusion.Blazor.Grids.SfGrid ID="GridData"

                                        @ref="@GridData"

                                        TValue="AssociationDto"

                                        AllowPaging="true"

                                        AllowFiltering="true"

                                        AllowSorting="true"

                                        AllowExcelExport="true"

                                        AllowPdfExport="true"

                                        GridLines="Syncfusion.Blazor.Grids.GridLine.Both">

            <GridTemplates>

                <ToolbarTemplate>

                    <SfToolbar>

                        <ToolbarEvents Clicked="@ToolbarClickAsync"></ToolbarEvents>

                        <ToolbarItems>

                            <AuthorizeView Policy="CanCreate">

                                <ChildContent Context="canCreate">

                                    <ToolbarItem Type="@ItemType.Button" PrefixIcon="e-add" Id="add" TooltipText="New" Text="New"></ToolbarItem>

                                </ChildContent>

                            </AuthorizeView>

                            <AuthorizeView Policy="CanUpdate">

                                <ChildContent Context="canUpdate">

                                    <ToolbarItem Type="@ItemType.Button" PrefixIcon="e-edit" Id="edit" TooltipText="Edit" Text="Edit"></ToolbarItem>

                                </ChildContent>

                            </AuthorizeView>

                            <AuthorizeView Policy="CanDelete">

                                <ChildContent Context="canDelete">

                                    <ToolbarItem Type="@ItemType.Button" PrefixIcon="e-delete" Id="delete" TooltipText="Delete" Text="Delete"></ToolbarItem>

                                </ChildContent>

                            </AuthorizeView>

                            <ToolbarItem Type="ItemType.Input" Id="search">

                                <Template>

                                    <SfTextBox ID="searchText" Placeholder="Search ..." />

                                </Template>

                            </ToolbarItem>

                        </ToolbarItems>

                    </SfToolbar>

                </ToolbarTemplate>

            </GridTemplates>

         

            <SfDataManager AdaptorInstance="@typeof(AssociationsAdaptor)" Adaptor="Adaptors.CustomAdaptor"></SfDataManager>

[Renjith Singh Rajendran]

Hi Gerald, 

Thanks for your update. 

We are glad to hear that you have achieved your requirement. Please get back to us if you need further assistance. 

Regards, 

Renjith Singh Rajendran