1. Home
  2. Forum
  3. Blazor
  4. Autofit is not working

Autofit is not working

Can anyone help me understand why, in the attached solution on page /1, grid autofit is not working and column names are not visible ? 


Attachment: BlazorApp3_4d7bd431.zip

1 Reply
PS Prathap Senthil Syncfusion Team September 30, 2024 08:42 AM UTC

Hi Alex,

Based on the reported issue, it appears that the problem seems from the improper definition of script references in the App.razor file and Add the renderMode InteractiveServer option to your Razor pages to resolve the problem. We would like to suggest that you refer to the following script in your App.razor file in order to resolve the issue. We have attached a code snippet and modified sample for your reference, which should provide you with clear guidance on how to implement this solution. Kindly refer to the attached code snippet and sample for your reference.


  1. CDN
 
Scripts- https://blazor.syncfusion.com/documentation/common/adding-script-references#cdn-reference
Styles - https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference

 
  1. 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 you are using Syncfusion.Blazor single NuGet. If this is the case, we recommend referring to the attached code snippet and our documentation for further assistance.

Note:If you are  Syncfusion.Blazor single NuGet you don’t need to install the Syncfusion.Blazor.Themes  Nuegt.

App.Razor
<!DOCTYPE html>

<html lang="en">

 

<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="bootstrap/bootstrap.min.css" />

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

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

    <link rel="icon" type="image/png" rel='nofollow' href="favicon.png" />

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

    <HeadOutlet />

</head>

 

<body>

    <Routes />

 

    <script src="_framework/blazor.web.js"></script>

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

 

    <!--Use below script reference if you are using Syncfusion.Blazor Single NuGet-->

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

 

 

</body>

 

</html>

 


Documentation: Getting Started with Blazor DataGrid Component | Syncfusion

@page "/1"

@rendermode InteractiveServer

<PageTitle> Test Portal</PageTitle>

<h3>Master Asset Search</h3>

 

 


For more detailed insights, please visit the following blog and documentation.

Blog: https://www.syncfusion.com/blogs/post/blazor-ui-support-dotnet-8.aspx
UG: https://blazor.syncfusion.com/documentation/datagrid/getting-started-with-web-app

Documentation: https://learn.microsoft.com/en-us/aspnet/core/blazor /components/render-modes?view=aspnetcore-8.0|



Regards,
Prathap Senthil


Attachment: BlazorApp3_47f895ac.zip

Loader.
Up arrow icon