Grid_Header_Table

[Dieter Buchmann]

This is my problem. I see the Yellow marked Text in Grid

After searching in I-Net I found some solutins that the stylesheet is not loaded. So I added it to _Layout.cshtml (this is a .Net Core 6 Blazor Server App)

This was what I have before:

<link rel='nofollow' href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />

<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>

Thats, what I have added:

<link rel='nofollow' rel='nofollow' href="_content/Syncfusion.Blazor/styles/bootstrap5.css" rel="stylesheet" />

Hopefully someone 

This is my code:

@page "/Test/"

@inject ILagerNur100Service lagerNur100Service

@using Syncfusion.Blazor.Grids

<h3>Lagerbestand Nur 100</h3>

@if (response.Success == false)

{

    <div class="alert alert-danger">

        <h4>@response.Message</h4>

    </div>

}

 @if (Artikels == null)

{

    <div class="alert alert-info">

        <h4>Lade Daten...</h4>

    </div>

}

else

{

    <a class="btn btn-primary" rel='nofollow' href="/nurLager100/export"><span class="oi oi-arrow-right" aria-hidden="true"></span>Exportieren</a>

    <br />

    <SfGrid ID="Grid" @ref="DefaultGrid" DataSource="Artikels" AllowPaging="true" AllowResizing="true" Height="1000px" AllowSorting="true" Toolbar="@(new List<string>() { "ExcelExport" })" AllowExcelExport="true" AllowFiltering="true">

        <GridPageSettings PageSizes="true" PageSize="38" ></GridPageSettings>

        <GridFilterSettings Type="Syncfusion.Blazor.Grids.FilterType.Menu"></GridFilterSettings>

        <GridColumns >

            <GridColumn Field=@nameof(LagerNur100ReadOnlyDto.Id) HeaderText="LfnNr." TextAlign="TextAlign.Left" Width="20" AllowFiltering=false></GridColumn>

            <GridColumn Field=@nameof(LagerNur100ReadOnlyDto.Bez) HeaderText="Bezeichnung" TextAlign="TextAlign.Right" Width="300"></GridColumn>

            <GridColumn Field=@nameof(LagerNur100ReadOnlyDto.Bez2) HeaderText="Bezeichnung 2" TextAlign="TextAlign.Center" Width="300"></GridColumn>

            <GridColumn Field=@nameof(LagerNur100ReadOnlyDto.Lb) HeaderText="Lagerbestand" TextAlign="TextAlign.Right" Width="100">

             @* <Template>

                    @{

                        var originalValue = context as string;

                        //Console.WriteLine($"Original Value: {originalValue}");

                        if (!string.IsNullOrEmpty(originalValue) && decimal.TryParse(originalValue, out decimal lbValue) && lbValue <= 0)

                        {

                            @originalValue

                        }

                        else

                        {

                            <text>Auf Anfrage</text>

                        }

                    }

                </Template> *@

            </GridColumn>

            <GridColumn Field=@nameof(LagerNur100ReadOnlyDto.TeileGruppen) HeaderText="Teilegruppen" TextAlign="TextAlign.Right" Width="300"></GridColumn>

        </GridColumns>

    </SfGrid>

}

@code {

    private List<LagerNur100ReadOnlyDto> Artikels;

    private Response<List<LagerNur100ReadOnlyDto>> response = new Response<List<LagerNur100ReadOnlyDto>> { Success = true };

    private SfGrid<LagerNur100ReadOnlyDto> DefaultGrid;

    public async Task ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args)

    {

        if (args.Item.Id == "Grid_excelexport") //Id is combination of Grid's ID and itemname

        {

            await this.DefaultGrid.ExcelExport();

        }

    }

    protected override async Task OnInitializedAsync()

    {

        var response = await lagerNur100Service.GetLagerNur100();

        if (response.Success)

        {

            Artikels = response.Data;

        }

    }

    public async Task Exporter(Syncfusion.Blazor.Navigations.ClickEventArgs args)

    {

        if (args.Item.Id == "Grid_excelexport") //Id is combination of Grid's ID and itemname

        {

            await this.DefaultGrid.ExcelExport();

        }

    }

}

[Prathap Senthil]

Hi Dieter,

Based on the reported issue, it appears that the problem is due to incorrect theme references. If you refer to the proper style reference, it won't show the caption in the UI. We would like to inform you that if you are using the Syncfusion.Blazor single NuGet package. If this is the case, we recommend referring to the attached code snippet and our documentation for further assistance.

<head>

   

    <!--Refer theme style sheet as below if you are using Syncfusion.Blazor Single NuGet-->

    <link rel='nofollow' href="_content/Syncfusion.Blazor/styles/bootstrap5.css" rel="stylesheet" />

 

<script src="_content/Syncfusion.Blazor/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>

@*Or you can use the below CDN*@

 

@*

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

 

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

 

 

</head>

 

CDN	Scripts- https://blazor.syncfusion.com/documentation/common/adding-script-references#cdn-reference Styles - https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference
Static Web Assets	Scripts - https://blazor.syncfusion.com/documentation/common/adding-script-references#static-web-assets   Styles - https://www.nuget.org/packages/Syncfusion.Blazor.Themes/

If still issue persists. So, further proceeding with the reported problem, kindly share the issue's reproducible simple sample. This will help us check the reported issue and provide a prompt update.

Regards,
Prathap S

[Dieter Buchmann]

It was not the problem, because I have tried both of your suggestions.

In your GETTING Startet Docs you didn´t tell the people that they have also include 

Syncfusion.Blazor.Theme in their`re solution (I used package manager).

After including the error disapears.

Maby you should consider that, and include it in your docs.

@Prath

Anyway thank you for your help

[Monisha Saravanan]

Hi Dieter,

We are glad to hear that the reported issue has been resolved at your end.

Additionally, we'd like to inform you that we have documented the process of including styles when using the Theme package. You can find detailed information in the documentation linked below:

Reference: https://blazor.syncfusion.com/documentation/appearance/themes

Please let us know if you have any concerns.

Regards,

Monisha

[Dieter Buchmann]

Yes I found this after research. But If a newbie is using your components. The user will be quiete confused like I was. To avoid questions in the forum, I recommend to add this to the getting started. 

Just a recommendation.

THX

Regards

Dieter

[Monisha Saravanan]

Hi Dieter,

Thank you for your feedback and recommendation.

We apologize for any confusion you experienced while using our components. We appreciate your suggestion to include this information in the getting started documentation.

We want to assure you that we have already addressed this concern by providing detailed notes in the Getting Started section. We have included links and instructions on how to refer to themes and add stylesheet and script resources to your Blazor application.

You can find this information in the Notes section of the Getting Started guide under the following link:

Reference: https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app-single-nuget#add-stylesheet-and-script-resources

NOTE

 

If you are using Syncfusion.Blazor single NuGet, you don’t have to refer Syncfusion.Blazor.Themes NuGet. Since style sheets already inside the assets of Syncfusion.Blazor NuGet.
Check out the Blazor Themes topic to discover various methods (Static Web Assets, CDN, and CRG) for referencing themes in your Blazor application. Also, check out the Adding Script Reference topic to learn different approaches for adding script references in your Blazor application.

 

If you have any further questions or suggestions for improving our documentation and user experience, please don't hesitate to let us know. We are here to assist you at every step of your journey with our components.

Thank you for your understanding and support.

Regards,

Monisha