Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
1255
Found the problem adding IgniteUI to a Blazor Project
posted

There is an upcoming problem that the development team should know about as is it related to new Microsoft Changes.

I created a new Microsoft Aspire Solution from their Visual Studio template.  It creates a Blazor project that does not have either an Index.html or a _layout.cshtml file.  They load the contents of those files in App.razor. 

They also dont use "var builder = WebAssemblyHostBuilder.CreateDefault(args);" ,  the new Blazor application uses"var builder = WebApplication.CreateBuilder(args);" instead to create the project.

The loading of "_content/IgniteUI.Blazor/app.bundle.js" now only partially works.  While some of the UI renders, some of it does not.  An Infragistic IgniuteUI List will show a list but onclick will not work.  The IgniteUI button will not respond to an onclick event and part of the UI doesnt render.

This is the new App.Razor file...

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="/" />
    <link rel="stylesheet" href="bootstrap/bootstrap.min.css" />
    <link rel="stylesheet" href="app.css" />
    <link rel="stylesheet" href="AspireOfm.Web.styles.css" />
    <link rel="icon" type="image/png" href="favicon.png" />

    <link href="_content/IgniteUI.Blazor/themes/light/material.css" rel="stylesheet" />
    <link href="_content/IgniteUI.Blazor/themes/grid/light/material.css" rel="stylesheet" />
    <link href="css/ig-theme.css" rel="stylesheet" />
    <link href="css/app.css" rel="stylesheet" />

    <link href="">fonts.googleapis.com/css rel="stylesheet">
    <link href="">fonts.googleapis.com/icon rel="stylesheet preload prefetch" as="style">

    <HeadOutlet />
</head>

<body>
    <Routes />

    <script src="_content/IgniteUI.Blazor/app.bundle.js"></script>
    <script src="_framework/blazor.web.js"></script>

</body>

</html>

Parents Reply
  • 29105
    Offline posted in reply to Richard Carlin

    BlazorHybrid (2).zip

    Sounds like you are using the new hybrid app. I attached a working demo, please make sure you use the following style for the IgbGrid.


    <link href="_content/IgniteUI.Blazor/themes/grid/light/bootstrap.css" rel="stylesheet" />

    or the following for everything else.

    <link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />

Children