Syncfusion.Blazor.Grid nuget package does not load style sheet

Hello,

I want o use only SfGrid and the components it depends on, so i installed Syncfusion.Blazor.Grid 19.1.0.54 nuget package instead whole Syncfusion.Blazor package.
I added  <link rel='nofollow' href="_content/Syncfusion.Blazor/styles/bootstrap4.css" rel="stylesheet" />  in index.html head section.

Added SfGrid component in Index.razor file as

@page "/"
@inject HttpClient Http

<SfGrid TValue="WeatherForecast" DataSource="forecasts"></SfGrid>

@code {
    private WeatherForecast[] forecasts;

    protected override async Task OnInitializedAsync()
    {
        forecasts = await Http.GetFromJsonAsync<WeatherForecast[]>("sample-data/weather.json");
    }

    public class WeatherForecast
    {
        public DateTime Date { get; set; }

        public int TemperatureC { get; set; }

        public string Summary { get; set; }

        public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
    }
}


but grid is not shown with style like following image:



To see this effect you may need to clear browser cash.

If i uninstall Package Syncfusion.Blazor.Grid -Version 19.1.0.54 and install full Package Syncfusion.Blazor -Version 19.1.0.54 then grid style works fine:



I don't know if i need to add another style for Package Syncfusion.Blazor.Grid -Version 19.1.0.54.

The GridForeignColumn is very useful, but for some big database tables i want to show sql vies on the grid and select foreign keys in edit dialog templates. Can you give me some links showing how to implement foreign keys in edit dialog templates?

Thanks.





3 Replies 1 reply marked as answer

VN Vignesh Natarajan Syncfusion Team April 6, 2021 04:24 AM UTC

Hi Ali,  
 
Thanks for contacting Syncfusion support.  
 
Query: “Syncfusion.Blazor.Grid nuget package does not load style sheet” 
 
We have analyzed your query and we understand that you are facing trouble while referring the individual Nuget packages. Kindly refer the below CSS link while referring the individual Nuget packages.  
 
<link rel='nofollow' href="_content/Syncfusion.Blazor.Themes/bootstrap4.css" rel="stylesheet" /> 
 
Refer our UG documentation for your reference 
 
 
Query: “Can you give me some links showing how to implement foreign keys in edit dialog templates? 
 
From your query we understand that you want to render dropdown list component in Dialog templates with foreign key behavior. We suggest you to achieve your requirement by rendering the DropDownList component with Text and Value pair inside the Grid edit dialog template.   
 
Refer the below code example.  
 
<SfGrid DataSource="@Orders" AllowPaging="true" Toolbar="@(new List<string>() { "Add""Edit""Delete""Cancel""Update" })" Height="315">    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="EditMode.Dialog">        <Template>            @{                var Order = (context as OrderDs);                <div>                    <div class="form-row">                        <div class="form-group col-md-6">                                                        <SfNumericTextBox ID="OrderID" @bind-Value="@(Order.OrderID)Enabled="@((Order.OrderID == null) ? true : false)"></SfNumericTextBox>                        </div>                        <div class="form-group col-md-6">                                                        <SfDropDownList ID="EmployeeID" TItem="EmployeeData" @bind-Value="@(Order.EmployeeID)" TValue="int?" DataSource="@Employees">                                <DropDownListFieldSettings Text="FirstName" Value="EmployeeID"></DropDownListFieldSettings>                            </SfDropDownList>                        </div>                    </div>                    <div class="form-row">                        <div class="form-group col-md-6">                                                        <SfNumericTextBox ID="Freight" @bind-Value="@(Order.Freight)" TValue="double?"></SfNumericTextBox>                        </div>                        <div class="form-group col-md-6">                                                        <SfDatePicker ID="OrderDate" @bind-Value="@(Order.OrderDate)"></SfDatePicker>                        </div>                    </div>                 </div>            }        </Template>    </GridEditSettings>    <GridColumns>        <GridColumn Field=@nameof(OrderDs.OrderID) HeaderText="Order ID" IsPrimaryKey="true" TextAlign="TextAlign.Right" Width="120"></GridColumn>        <GridForeignColumn Field=@nameof(OrderDs.EmployeeID) HeaderText="Employee Name" ForeignKeyValue="FirstName" ForeignDataSource="@Employees" Width="150"></GridForeignColumn>        <GridColumn Field=@nameof(OrderDs.OrderDate) HeaderText="Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn>        <GridColumn Field=@nameof(OrderDs.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn>    </GridColumns></SfGrid>
 
 
Refer our UG documentation for your reference 
 
 
Please get back to us if you have further queries.  
 
Regards, 
Vignesh Natarajan  


Marked as answer

MB Martin Brehm April 8, 2022 06:10 AM UTC

Hi,

I face the same problem in displaying the grid after updating my Blazor Server app from version 19.4.0.54 to version 20.1.0.47. Before the update, everything worked and looked fine. I just updated the Nuget Package and renewed the license key. CSS-link and script reference are (still) correct. But now it looks ugly. Did I miss something?

Thanks and Best Regards,

Martin



VN Vignesh Natarajan Syncfusion Team April 11, 2022 05:58 AM UTC

Hi Martin,


Thanks for contacting Syncfusion support.


Query: “CSS-link and script reference are (still) correct. But now it looks ugly. Did I miss something?


In our latest 2022 Volume 1 (20.1.0.47) release we have included some breaking changes for better performance. As a part of this, Syncfusion script reference needs to referred externally in Layout.cshtml (in .Net 6.0) or Host.cshtml (.NET 5 and below) or Index.html file. Refer the below release notes for your reference


https://blazor.syncfusion.com/documentation/release-notes/20.1.47?type=all#breaking-changes


Kindly ensure to refer the below Script reference and theme reference either using CDN links or Static web assets.


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

https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets


For your convenience we have attached the sample prepared using our latest version which can be referred from attachments.  


Please get back to us if you have further queries.  


Regards,

Vignesh Natarajan



Loader.
Up arrow icon