1. Home
  2. Forum
  3. Blazor
  4. Grid Component Data Appears and then disappears

Grid Component Data Appears and then disappears

We have a bunch of .razor components and associated services running correctly in a Blazor Server app. We decide to upgrade to the Blazor Web App template and thus moved everything over. The components running correctly displaying all of the data but then after 2-3 second the data area goes blank and says Not Found. We've been trying to figure this out for days now and feel we must be missing something simple. What do think could be causing this. The test Weather component from the template works fine.


Thank you in advance,


5 Replies
PS Prathap Senthil Syncfusion Team August 26, 2024 02:31 PM UTC

Hi Shawn Davis,

Based on the reported problem, it seems you are experiencing an issue with your .NET 8 project. If so, please try the suggested changes below, Add the RenderMode.InteractiveServer option to your Razor pages to resolve the problem.

[GridComponet.Razor]
@page "/grid"

 

@rendermode InteractiveServer

 


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|

If the issue still persists, we need further details to proceed. To help us address the reported problem, please share a reproducible simple sample or your attempt to replicate the issue using the attached simple sample. This will help us check the reported issue and provide a prompt update.


Regards,
Prathap Senthil


SD Shawn Davis August 26, 2024 03:00 PM UTC

We've tried that already. It doesn't matter which RenderMode we use though I have confirmed that if I turn off RenderMode in the App.razor file the behavior stops but of course so does the ineteractivity.


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='nofollow' href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
    <link rel="stylesheet" rel='nofollow' href="bootstrap/bootstrap.min.css" />
    <link rel="stylesheet" rel='nofollow' href="app.css" />
    <link rel="stylesheet" rel='nofollow' href="LongbowWebAppV1.styles.css" />
    <link rel="icon" type="image/png" rel='nofollow' href="favicon.png" />
    <HeadOutlet @rendermode="RenderModeForPage" />
</head>


<body>
    <Routes @rendermode="RenderModeForPage" />
    <script src="_framework/blazor.web.js"></script>
    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>


</body>


</html>


@code {
    [CascadingParameter]
    private HttpContext HttpContext { get; set; } = default!;


    private IComponentRenderMode? RenderModeForPage => HttpContext.Request.Path.StartsWithSegments("/Account")
        ? null
        : InteractiveAuto;
}

If we set both choices to null it stops.


SD Shawn Davis August 26, 2024 03:02 PM UTC

Here's an example Razor component:


@page "/cases"

@* desired render mode define here *@
@rendermode InteractiveServer
@using LongbowWebAppV1.Models.LongbowAppDB
@using LongbowWebAppV1.Services.Contracts
@using Syncfusion.Blazor.Grids
@using Syncfusion.Blazor.Buttons
@using Syncfusion.Blazor.DropDowns
@using Syncfusion.Blazor.Navigations
@using Syncfusion.Blazor.Spinner




@inject ICaseListPageService CaseListService
@inject NavigationManager NavigationManager




<SfGrid DataSource="cases" Toolbar="@(new List<string>() { "Search" })" AllowGrouping="true"
        AllowFiltering="true" AllowSorting="true" AllowTextWrap="true" AllowPaging="true"
        Height="100%" Width="100%">
    <GridPageSettings PageSize="100"></GridPageSettings>
    <GridTextWrapSettings WrapMode="WrapMode.Both"></GridTextWrapSettings>
    <GridFilterSettings Type="Syncfusion.Blazor.Grids.FilterType.CheckBox"></GridFilterSettings>
    <GridEvents OnRecordDoubleClick="RecordDoubleClickHandler" TValue="ContactCase"></GridEvents>
    <GridSortSettings>
        <GridSortColumns>
            <GridSortColumn Field="CaseName" Direction="SortDirection.Ascending"></GridSortColumn>
        </GridSortColumns>
    </GridSortSettings>
    <GridColumns>
        <GridColumn Field="@nameof(ContactCase.CaseId)" HeaderText="Case Id" Width="100px"></GridColumn>
        <GridColumn Field="@nameof(ContactCase.FileNumber)" HeaderText="File Number" Width="120px"></GridColumn>
        <GridColumn Field="@nameof(ContactCase.CaseName)" HeaderText="Case Name" Width="500px"></GridColumn>
        <GridColumn Field="@nameof(ContactCase.CourtDocketNumber)" HeaderText="Docket Number" Width="150px"></GridColumn>
        <GridColumn Field="@nameof(ContactCase.CaseType)" HeaderText="Case Type" Width="150px"></GridColumn>
        <GridColumn Field="@nameof(ContactCase.CaseStatus)" HeaderText="Case Status" Width="100px"></GridColumn>
        <GridColumn Field="@nameof(ContactCase.CaseOpened)" HeaderText="Case Opened" Width="200px"></GridColumn>
    </GridColumns>
</SfGrid>






@code {
    private List<ContactCase> cases;


    private SfGrid<ContactCase> SfCasesGrid { get; set; }


    // This method is called when the component is being initialized.
    // It retrieves the cases from the CaseService asynchronously and assigns them to the 'cases' variable.
    protected override async Task OnInitializedAsync()
    {
        cases = await CaseListService.GetCases();
    }


    // This method is called when a record in the grid is double-clicked.
    // It retrieves the caseId from the double-clicked row data and navigates to the corresponding case data form.
    public void RecordDoubleClickHandler(RecordDoubleClickEventArgs<ContactCase> args)
    {
        var caseId = args.RowData.CaseId;
        NavigationManager.NavigateTo($"/case-data-form/{caseId}");
    }

}

SD Shawn Davis August 26, 2024 11:43 PM UTC

We fixed it. We made the following modification to the App.razor file.


code {
    [CascadingParameter]
    private HttpContext HttpContext { get; set; } = default!;

    private readonly Endpoint endpoint;

    private IComponentRenderMode? RenderModeForPage => endpoint?.Metadata.GetMetadata<RenderModeAttribute>()?.Mode;

    // private IComponentRenderMode? RenderModeForPage => HttpContext.Request.Path.StartsWithSegments("/Account")
    //     ? null
    //     : InteractiveAuto;
}

PS Prathap Senthil Syncfusion Team August 27, 2024 11:38 AM UTC

Thanks for the update,

We are happy to hear that the reported issue has been resolved on your end. We will now be closing this thread.


Loader.
Up arrow icon