Toolbar not visible in SfGrid after upgrade from 19 to 20

[Craig Boucher]

I have toolbars in all of my SfGrids.  After upgrading Syncfusion.Blazor from 19.4.0.56 to 20.2.0.36, toolbars don't display in any of my grids.  Also, any grid with Mode=EditMode.Dialog stopped displaying the dialog window when I double click on a row to edit the row.

Here is a grid before the upgrade:

Here is the grid after the upgrade:

Here is the SfGrid:

<SfGrid ID="JobsGrid" @ref="Grid" TValue="Job" DataSource="@jobs"
        AllowPaging="true" AllowSorting="true" AllowFiltering="true" EnableHover="true"
        AllowExcelExport="true" AllowPdfExport="true" AllowResizing="true"
        Toolbar="@toolbar">
    <GridFilterSettings Type="Syncfusion.Blazor.Grids.FilterType.Excel"></GridFilterSettings>
    <GridEvents TValue="Job"
                OnToolbarClick="ToolbackClicked"
                OnActionBegin="ActionBegin"
                OnActionFailure="ActionFailure"
                CommandClicked="OnCommandClicked"></GridEvents>
    <GridEditSettings AllowAdding="user.HasInsertPermission(Permissions.Jobs)"
                      AllowDeleting="user.HasDeletePermission(Permissions.Jobs)"
                      AllowEditing="user.HasUpdatePermission(Permissions.Jobs)"
                      ShowDeleteConfirmDialog="true"
                      Mode="EditMode.Dialog">


    </GridEditSettings>
    <GridColumns>
        <GridColumn Field="@nameof(Job.JobId)" IsPrimaryKey="true" IsIdentity="true" Visible="false"></GridColumn>
        <GridColumn Field="@nameof(Job.JobName)" HeaderText="@localizer[Resources.App.JobName]"></GridColumn>
        <GridColumn Field="@nameof(Job.JobDisplayName)" HeaderText="@localizer[Resources.App.JobDisplayName]" Width="0px">
            <EditTemplate>
                @{ var job = (context as Job); }
                <SfTextBox ID="JobDisplayName" Multiline="true" Rows="3" @bind-Value="@(job.JobDisplayName)" FloatLabelType="FloatLabelType.Always" Placeholder="@localizer[Resources.App.JobDisplayName]"></SfTextBox>
            </EditTemplate>
        </GridColumn>
        <GridColumn Field="@nameof(Job.Goal)" HeaderText="@localizer[Resources.App.PPHGoal]"></GridColumn>
        <GridColumn Field="@nameof(Job.EmployeeCount)" HeaderText="@localizer[Resources.App.EmployeeCount]"></GridColumn>
        <GridColumn Field="@nameof(Job.InactivityAlarmMinutes)" HeaderText="@localizer[Resources.App.InactivityAlarmMinutes]"></GridColumn>
        <GridColumn Field="@nameof(Job.AutoEndSessionMinutes)" HeaderText="@localizer[Resources.App.AutoEndSessionMinutes]"></GridColumn>
        <GridForeignColumn Field="@nameof(Job.MinPieceCountGapOption)" HeaderText="@localizer[Resources.App.MinPieceCountGapOption]" Width="0px" ForeignKeyField="@nameof(SimpleLookup.Key)" ForeignKeyValue="@nameof(SimpleLookup.Value)" ForeignDataSource="@minPieceCountGapOptions">
            <EditTemplate>
                @{ var job = (context as Job); }
                <label class="" id="label_MinPieceCountOption" for="MinPieceCountGapOption">@localizer[Resources.App.MinPieceCountGapOption]</label><br />
                @foreach (var minPieceCountGapOption in minPieceCountGapOptions)
                {
                    <SfRadioButton Label="@minPieceCountGapOption.Value" Name="MinPieceCountGapOption" Value="@minPieceCountGapOption.Key.ToString()" @bind-Checked="@job.MinPieceCountGapOption"></SfRadioButton><br />
                }
            </EditTemplate>
        </GridForeignColumn>
        <GridColumn Field="@nameof(Job.MinPieceCountGap)" HeaderText="@localizer[Resources.App.MinPieceCountGap]" Width="0px" EditType="EditType.NumericEdit"></GridColumn>
        <GridForeignColumn Field="@nameof(Job.FeedbackColorSchemeId)" HeaderText="@localizer[Resources.App.FeedbackColorScheme]" Width="0px" ForeignKeyField="@nameof(FeedbackColorScheme.FeedbackColorSchemeId)" ForeignKeyValue="@nameof(FeedbackColorScheme.FeedbackColorSchemeName)" ForeignDataSource="feedbackColorSchemes"></GridForeignColumn>
        <GridColumn Field="@nameof(Job.ExcludeFromAccumulatorBool)" HeaderText="@localizer[Resources.App.ExcludeFromAccumulator]" Width="0px"></GridColumn>
        <DefaultGridCommandColumns HasInsertPermission="@user.HasInsertPermission(Permissions.Jobs)" HasDeletePermission="@user.HasDeletePermission(Permissions.Jobs)"></DefaultGridCommandColumns>
    </GridColumns>
</SfGrid>

The toolbar variable is declared as:

private List<object> toolbar { get; set; }

I populate it in OnInitializedAsync via a helper function that contains the following code:

public static List<object> GetGridToolbar(ClaimsPrincipal user, string securityKey, bool includePrint = false, bool includeExport = false)
        {
            var toolbar = new List<object>();
            if (user.HasInsertPermission(securityKey))
                toolbar.Add("Add");
            if (user.HasUpdatePermission(securityKey))
                toolbar.Add("Edit");
            if (user.HasDeletePermission(securityKey))
                toolbar.Add("Delete");
            if (includePrint)
                toolbar.Add("Print");
            if (includeExport)
            {
                toolbar.Add("ExcelExport");
                toolbar.Add("CsvExport");
                toolbar.Add("PdfExport");
            }
            return toolbar;
        }

Thanks for any help you can give,
Craig

[Sarveswaran Palani]

Hi Craig,

Greetings from Syncfusion support.

We have checked your query and prepared a sample based on your requirement. But we could not be able to replicate the reported issue at our end. Kindly refer the attached code snippet and UG documentation for your reference. Before that Kindly make ensure to include script and themes in your project.

<head>

    <meta charset="utf-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <base rel='nofollow' href="~/" />

    <link rel="stylesheet" rel='nofollow' href="css/bootstrap/bootstrap.min.css" />

    <link rel='nofollow' href="css/site.css" rel="stylesheet" />

    <link rel='nofollow' href="sample2022.styles.css" rel="stylesheet" />

    <link rel='nofollow' href=https://cdn.syncfusion.com/blazor/20.2.36/styles/bootstrap5.css rel="stylesheet" />

    <script src=https://cdn.syncfusion.com/blazor/20.2.36/syncfusion-blazor.min.js type="text/javascript"></script>

    <component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />

</head>

If you are referencing themes or scripts from CDN, Can you please ensure to change the version of reference.

https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference

https://blazor.syncfusion.com/documentation/common/adding-script-references#cdn-reference

Regards,

Sarveswaran PK

[Craig Boucher]

Thanks for the quick response.  It led me to find the issue.  I had to change IgnoreScriptIsolation to false and then everything stated working.

services.AddSyncfusionBlazor(options => { options.IgnoreScriptIsolation = false; });

But Visual Studio says this option is obsolete.  I'm loading the .css from _content/Syncfusion.Blazor/styles....  Should I be doing this differently?

Thanks,
Craig

[Sarveswaran Palani]

Hi Craig,

From the below table, we suspect that you used way 2 approach to refer the script in your project, it also acceptable. But we suggest that way 1 is the most recommendable to refer the script for better performance. Kindly refer the attached table for more information.

Built-in JavaScript isolation feature is marked as obsolete and disabled by default, since loading scripts externally provides better performance over JavaScript isolation approach. If you used the JavaScript isolation feature, you have to make one of the following changes.

Way 1: Load scripts externally via CDN or Static Web Assets.

Way 2: Enable JavaScript isolation by setting IgnoreScriptIsolation as false while adding Syncfusion Blazor service using AddSyncfusionBlazor().

 

If we misunderstood your query, please get back to us

Regards,

Sarveswaran PK