Questions on UI for Blazor Forum

0 answers

152 views

Add new record dialog is not closing after add

In my grid I use pop-up edit.

When I update a record the dialog closes, but not on add. Why?

private async Task LoadUsers()
    {
        var users = await UserService.GetUsers();
        Users = new ObservableCollection<User>(users);
    }
    
    private async Task CreateHandler(GridCommandEventArgs obj)
    {
        if (obj.Item is not User user) return;
        
        var newUser = await UserService.Create(user);
        await LoadUsers();
    }

    private async Task UpdateHandler(GridCommandEventArgs args)
    {
        if(args.Item is not User user) return;
        if(user.Id == 0) return;
        
        var success = await UserService.Update(user);
    }

<TelerikGrid
            Data="@Users"
            height="100%"
            @bind-SelectedItems="@SelectedUsers"
            SelectionMode="GridSelectionMode.Single"
            EnableLoaderContainer="true"
            Sortable="true"
            Resizable="true"
            ConfirmDelete="true"
            ShowColumnMenu="true"
            OnUpdate="@UpdateHandler"
            OnCreate="@CreateHandler"
            OnStateInit="@((GridStateEventArgs<User> args) => OnStateInitHandler(args))"
            EditMode="GridEditMode.Popup">
            <GridToolBarTemplate>
                <GridSearchBox DebounceDelay="200" Class="width-60percent"/>
                <GridCommandButton Command="Add" Icon="@SvgIcon.Plus" ThemeColor="@ThemeConstants.Button.ThemeColor.Primary">Add User</GridCommandButton>
            </GridToolBarTemplate>
            <GridSettings>
                <GridValidationSettings Enabled="true"/>
                <GridPopupEditSettings MinWidth="350px"/>
            </GridSettings>
            <GridColumns>
                <GridColumn Field="@nameof(User.Id)" Width="120px" Editable="false"/>
                <GridColumn Field="@nameof(User.Initials)" Width="135px"/>
                <GridColumn Field="@nameof(User.FirstName)"/>
                <GridColumn Field="@nameof(User.LastName)"/>
                <GridColumn Field="@nameof(User.WorkEmail)" Width="260px"/>
                <GridColumn Field="@nameof(User.ClientName)" Title="Client">
                    <EditorTemplate>
                        @{ var u = (User)context; }
                        <TelerikDropDownList
                            ValueField="@nameof(CboItem.Id)"
                            TextField="@nameof(CboItem.Name)"
                            Filterable="true"
                            FilterOperator="StringFilterOperator.Contains"
                            Title="Select a client"
                            DefaultText="Select a client"
                            @bind-Value="@u.ClientId"
                            Data="@TsClientCbos">
                            <DropDownListSettings>
                                <DropDownListPopupSettings Height="500px" Width="350px"/>
                            </DropDownListSettings>
                        </TelerikDropDownList>
                    </EditorTemplate>
                </GridColumn>
                <GridColumn Field="@nameof(User.Active)" Width="110px" ShowColumnMenu="true"/>
                <GridColumn Field="@nameof(User.IsBiEmployee)" Title="BI Employee" Width="120px" ShowColumnMenu="true"/>
                <GridColumn Field="@nameof(User.SyncToCloud)"  Width="130px" ShowColumnMenu="true" Editable="false"  />
                <GridCommandColumn Width="110px" >
                    <GridCommandButton Command="Save" Icon="@FontIcon.Save" Title="Update" ShowInEdit="true"/>
                    <GridCommandButton Command="Cancel" Icon="@FontIcon.Cancel" ShowInEdit="true"/>
                    <GridCommandButton Command="Edit" Icon="@FontIcon.Pencil" Title="Edit" Enabled="CanEdit"/>
                </GridCommandColumn>
            </GridColumns>
        </TelerikGrid>

Grid

asked on 27 Jun 2024

2 answers

184 views

How I Change the expended collapse icon from TelerikTreeView

HI:

How Can I change the expanded i/collapsed con from TelerikTreeView?

There is a demo in the documentation but is for the main icon, not for the collapse/expanded icon.

Thanks in advance.

TreeView

answered on 26 Jun 2024

1 answer

258 views

Integrate default value in telerik multiselect instead of blank values

Hello,
I have implemented searching, multiselect using telerik multiselect for multiple values. And relationship between multiselect is maintained between multiple multiselect. Also, i have used getter setter to set "All" option when there is no value selected. While Searching, i have implemented an api call and get the desired output.

Issue: Whenever I select a value from multiselect and search for other value and immediately remove the values using backspace, blank is shown in the respective multiselect. But when i click outside "All" is retained in the multiselect.

I have managed to retrieve the search text from MultiSelectReadEventArgs args using OnRead, as shown below:

"dynamic item = args.Request.Filters.FirstOrDefault();
var searchText = (string)item.Value; "

Expected Result : Whenever I select a value from multiselect and search for other value and immediately remove the selected values and text using backspace, "All" should be shown in the respective multiselect. But when i click outside "All" is retained in the multiselect. Is there anyway that I could achieve it?

Here is an example of Getter setter implementation as :

@page "/multiselect/overview"

<HobbiesTemplate>
<TelerikMultiSelect Data="@Hobbies"
@bind-Value="@SelectedHobbyIds"
ValueField="@nameof(HobbiesDto.HobbyId)"
TextField="@nameof(HobbiesDto.HobbyName)"
Placeholder="Select your favourite sport..."
Id="products-multiselect" Width="100%">
</TelerikMultiSelect>
</HobbiesTemplate>

@code {
public List<int> SelectedHobbyIds { get{return SelectedHobbyIds;}
set {
// if nothing and 'All' option should be selected
if (value.Count == 0 || (value.Any(x => x == 0) && !SelectedHobbyIds.Any(x => x == 0)))
{
SelectedHobbyIds = new List<int>() { 0 };
}
else
{
// if other option selected then remove 'All' option
if (value.Count() > 1 && value.Any(x => x == 0))
{
SelectedHobbyIds = value.Where(x => x != 0).ToList();
}
else
{
SelectedHobbyIds = value;
}
}
}

}

public IEnumerable<HobbiesDto> Hobbies { get; set; } = new List<HobbiesDto>()
{
new HobbiesDto(0,"All"),
new HobbiesDto(1, "Basketball"),
new HobbiesDto(2, "Golf"),
new HobbiesDto(3, "Baseball"),
new HobbiesDto(4, "Table Tennis"),
new HobbiesDto(5, "Volleyball"),
new HobbiesDto(6, "Football"),
new HobbiesDto(7, "Boxing"),
new HobbiesDto(8, "Badminton"),
new HobbiesDto(9, "Cycling"),
new HobbiesDto(10, "Gymnastics"),
new HobbiesDto(11, "Swimming"),
new HobbiesDto(12, "Wrestling"),
new HobbiesDto(13, "Snooker"),
new HobbiesDto(14, "Skiing"),
new HobbiesDto(15, "Handball"),
};

public class HobbiesDto
{
public int HobbyId { get; set; }
public string HobbyName { get; set; }

public HobbiesDto() { }

public HobbiesDto(int id, string name)
{
HobbyId = id;
HobbyName = name;
}
}
}

this is my hobbiestemplate.razor page

<div class="demo-wrapper k-d-grid k-gap-8 k-flex-1 k-px-8 k-pt-7">
<div data-role="skeletoncontainer" class="side-container k-skeleton k-opacity-20 !k-d-flex k-flex-col k-align-items-center k-px-5 k-pt-7.5 k-rounded-tl-md k-rounded-tr-md" aria-live="polite" aria-label="Loading...">
<span class="k-skeleton k-opacity-80 k-skeleton-circle k-w-18 k-h-18 k-mb-5"></span>

<div class="k-d-flex k-flex-col k-align-items-center k-gap-1">
<span class="k-skeleton k-w-24 k-h-4 k-rounded-md"></span>
<span class="k-skeleton k-opacity-80 k-w-14 k-h-2.5 k-rounded-md"></span>
</div>

<div class="k-d-flex k-flex-col k-w-full k-mt-13 k-gap-4">
<div class="k-skeleton k-opacity-80 k-rounded-md k-h-2.5"></div>
<div class="k-skeleton k-opacity-80 k-rounded-md k-h-2.5"></div>
<div class="k-skeleton k-opacity-80 k-rounded-md k-h-2.5"></div>
</div>

</div>

<div class="main-container k-pb-8 k-d-flex k-flex-col">
<div class="k-d-flex k-gap-3 k-align-items-center k-mb-5">
<span class="avatar !k-d-none k-skeleton k-opacity-30 k-skeleton-circle k-w-12 k-h-12"></span>
<h4 class="k-h4 k-opacity-20 k-font-bold">Hobbies</h4>
</div>
<span class="k-d-inline-block">Favourite sport</span>
@ChildContent
<span class="hint k-font-size-sm k-font-italic k-mt-1.5">Add your favourite sport, if it is not in the list.</span>

<div class="k-d-flex k-flex-col k-gap-1 k-mt-5">
<span class="k-skeleton k-opacity-40 k-rounded-md k-w-24 k-px-3 k-h-4"></span>
<span class="k-skeleton k-opacity-30 k-rounded-md k-h-8"></span>
</div>

<div class="k-d-flex k-flex-col k-grow k-gap-1 k-mt-5">
<span class="k-skeleton k-opacity-40 k-rounded-md k-w-24 k-px-3 k-h-4"></span>
<span class="content-expanded k-grow k-skeleton k-opacity-30 k-rounded-md k-h-14"></span>
</div>
</div>
</div>

@code {
[Parameter]
public RenderFragment ChildContent { get; set; }
}

MultiSelect

updated answer on 26 Jun 2024

0 answers

225 views

Is there a way to programmatically trigger form validation on a grid pop-up edit form?

I have a need to trigger the form validation process when certain actions are performed on the Grid popup add/edit form. What would be the best way to trigger the validation from code?

 private async Task GetNameHandler()
    {
            var companyName = await AgentServices.GetAgentCompName(editedAgent.AgentNumber);
            if (!string.IsNullOrEmpty(companyName))
            {
                editedAgent.Name = await myServices.GetCompanyName(editedAgent.AgentNumber);
            }
            else
            {
                editedAgent.Name = null;
//           Trigger form validation here
            }
    }

Submitting the form triggers the validation I want but I would like to make it trigger on a field OnBlur event that calls GetNameHandler()

Form

Grid

ValidationMessage

updated question on 25 Jun 2024

0 answers

79 views

Blazor N numbers of TelerikGrid Columns alligned Vertically having 30 columns each

My requirement is to align every grids columns at same postion.

Which component to use so that horizontal scrolbars aligned every columns of each grid at same vertical position.

Grid

asked on 24 Jun 2024

0 answers

145 views

How to make Draggable Window not have positional offset while page scrolls?

I have a basic Telerik Window that is draggable and the window is a child of a main section of a page. When I scroll [in that page section], the Window will stay perfectly in position in the viewport. I can drag the window, release it, then scroll and it is still fine. The issue arises when I attempt to drag the window in any direction while scrolling on the page. The cursor will separate from the window header but still continues to drag in parallel of the offset created by the scroll.

How can I prevent this offset while scrolling and dragging at the same time so that the window will always stay in the viewport?

I have attempted to utilize the ContainmentSelector property by creating an invisible overlay (high up in the component tree) that is fit to the viewport but this did not seem to work.

Window

updated question on 21 Jun 2024

3 answers

150 views

The chart SVG or canvas suddenly disappears.

Issue: The chart SVG or canvas suddenly disappears.

Reproduction of the Problem

Use the Blazor UI from Telerik trial version.
Perform actions such as hiding the chart line or adding values.

Current Behavior

At seemingly random intervals, the chart SVG or canvas disappears. This occurs when performing actions like hiding the chart line or adding values. The issue does not occur consistently or under obvious conditions.

Expected/Desired Behavior

The chart should behave as expected and not disappear unexpectedly.

Environment

Telerik UI for Blazor version: 5.1.1 (Trial)
Browser: All
App Type: Server

Video: https://www.veed.io/view/7782882d-6522-4fa6-a9df-8413695486ed?panel=share

<div style="width: 1100px; height: 500px;" class="graphBorder shadow">
    <TelerikChart Height="95%" Transitions="false">   
        <ChartSeriesItems>
            @foreach(var item in ChartData)
            {
                <ChartSeries
                    Visible="@item.ShowLine"
                    Style="ChartSeriesStyle.Smooth"
                    Type="ChartSeriesType.ScatterLine"
                    Name="@item.LineName" Data="@item.Data"
                    Color="@item.Color"
                    XField="@nameof(Data.X)" YField="@nameof(Data.Y)">
                    <ChartSeriesMarkers Size="0"/>
                    <ChartSeriesTooltip Visible="true"/>
                </ChartSeries>
            }
        </ChartSeriesItems>

        <ChartTitle Text="TestChart"></ChartTitle>

        <ChartXAxes>
            <ChartXAxis Type="date"
                        BaseUnit="minutes"
                        MajorUnit="30"
                        Min="@(new TimeOnly(0,0,0))"
                        Max="@(new TimeOnly(3,0,0))">
                <ChartXAxisTitle Text="TestChart"></ChartXAxisTitle>
                <ChartXAxisLabels Format="{0:HH:mm}"></ChartXAxisLabels>
            </ChartXAxis>
        </ChartXAxes>

        <ChartYAxes >
            <ChartYAxis Max="@(100 + 5)" Min="0" MajorUnit="10">
                <ChartYAxisLabels/>
                <ChartYAxisTitle Text="TestChart"></ChartYAxisTitle>
            </ChartYAxis>
        </ChartYAxes>

        <ChartLegend Visible="false"/>

    </TelerikChart>
     <div class="Legend d-flex justify-content-sm-around flex-row">
            @foreach(var item in ChartData)
            {
                <div>
                    <TelerikCheckBox Id="myCheckBox" @bind-Value="@item.ShowLine"/>
                    <label for="myCheckBox">@item.LineName</label>
                </div>
            }
        </div>
</div>

@code {
    public List<GraphData> ChartData = new()
    {
        new GraphData
        {
            LineName = "Stroom 1",
            ShowLine = true,
            Color = "green",
            MinDate = new TimeOnly(0, 0),
            TimeBetweenMinAndMax = new TimeSpan(4, 0, 0),
            Data = new List<Data>
            {
                new() { X = new TimeOnly(0, 0), Y = 10 },
                new() { X = new TimeOnly(0, 15), Y = 20 },
                new() { X = new TimeOnly(0, 30), Y = 12 },
                new() { X = new TimeOnly(0, 45), Y = 3 },
                new() { X = new TimeOnly(1, 0), Y = 10 },
                new() { X = new TimeOnly(1, 15), Y = 12 },
                new() { X = new TimeOnly(1, 30), Y = 14 },
                new() { X = new TimeOnly(1, 45), Y = 15 },
                new() { X = new TimeOnly(2, 0), Y = 16 },
                new() { X = new TimeOnly(2, 15), Y = 40 }
            }
        }
    };
}

Charts

answered on 21 Jun 2024

1 answer

163 views

TelerikTreeView prevent selection from changing

I am using a TelerikTreeView in my component. When I click on a node (an expanded child node), I check whether the form for the currently selected node is dirty. If the form is dirty, I show a prompt asking the user to continue or not. When the user selects no/cancel, the clicked node should not be selected.

I am using the event below.

protected async Task OnItemClickedAsync(TreeViewItemClickEventArgs args)

I can't find a way to cancel this event or to prevent the newly clicked item to be selected. Is there any way to prevent a clicked item to be selected? I have been experimenting with @bind-SelectedItems to no avail. I haven't been able to find a solution for this problem.

Any help is appreciated.

TreeView

answered on 21 Jun 2024

0 answers

201 views

't.name is not a function' Issue When Opening Telerik Spreadsheet

Hello everyone,

After upgrading to the newest Telerik Blazor UI version (6.0.2), which includes the new spreadsheet component, I've been experiencing issues when trying to open and use the spreadsheet.

I've been working for quite some time now to fix this issue, but it also doesn't seem that other people have mentioned my specific problem. So, I am posting here in hopes that it might help somebody in the future when encountering the same problem.

The error is triggered whenever the spreadsheet is opened. In my case, I use it within a TabStrip:

<TabStripTab Title="Spreadsheet">
  <h4>Spreadsheet</h4>
  <TelerikSpreadsheet Data="@SpreadsheetData"></TelerikSpreadsheet>
</TabStripTab>

To test if the issue occurs because the spreadsheet might not be initialized with its parameters correctly, I chose to simply use the SpreadsheetData from the template provided by Telerik:

private const string SampleExcelFile = "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";

 protected override async Task OnInitializedAsync()
 {
     SpreadsheetData = Convert.FromBase64String(SampleExcelFile);
     await base.OnInitializedAsync();
 }

The error I'm getting is the following one after opening the TabStrip, referencing blazor.server.js

t.name is not a function
TypeError: t.name is not a function
    at gh.sheetIndex (https://localhost:7106/_content/Telerik.UI.for.Blazor/js/telerik-blazor.js:1:1665769)
    at gh.sheetByName (https://localhost:7106/_content/Telerik.UI.for.Blazor/js/telerik-blazor.js:1:1665656)
    at s (https://localhost:7106/_content/Telerik.UI.for.Blazor/js/telerik-blazor.js:1:1664169)
    at gh.insertSheet (https://localhost:7106/_content/Telerik.UI.for.Blazor/js/telerik-blazor.js:1:1664271)
    at new gh (https://localhost:7106/_content/Telerik.UI.for.Blazor/js/telerik-blazor.js:1:1661036)
    at new vh (https://localhost:7106/_content/Telerik.UI.for.Blazor/js/telerik-blazor.js:1:1673280)
    at g.initWidget (https://localhost:7106/_content/Telerik.UI.for.Blazor/js/telerik-blazor.js:50:1408753)
    at new g (https://localhost:7106/_content/Telerik.UI.for.Blazor/js/telerik-blazor.js:50:1407423)
    at e.initComponent (https://localhost:7106/_content/Telerik.UI.for.Blazor/js/telerik-blazor.js:50:1111978)
    at e.initSpreadsheet (https://localhost:7106/_content/Telerik.UI.for.Blazor/js/telerik-blazor.js:50:1404519)
StackTrace:    at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, Object[] args)
   at Microsoft.JSInterop.JSRuntimeExtensions.InvokeVoidAsync(IJSRuntime jsRuntime, String identifier, Object[] args)
   at Telerik.Blazor.Components.TelerikSpreadsheet.InitJsComponentAsync()
   at Telerik.Blazor.Components.TelerikSpreadsheet.OnAfterRenderAsync(Boolean firstRender)
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)

Since the application can't find the method under _framework/blazor.server.js, I tried to see if the issue is created from the _Layout.cshtml file, where blazor.server.js is referenced:

@using Microsoft.AspNetCore.Components.Web
@namespace EnnovatisPortal.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

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

    <component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />
    <link href="@Url.Content("lib/blazor-ui/swatches/bootstrap-urban.css")" rel="stylesheet" type="text/css" />
    <link href="_content/Telerik.UI.for.Blazor/css/kendo-theme-bootstrap/all.css" rel="stylesheet" type="text/css" />
    <link href="css/site.css" rel="stylesheet"  />
    <link href="EnnovatisPortal.styles.css" rel="stylesheet"  />
    <link href="_content/BlazorColorPicker/colorpicker.css" rel="stylesheet" />
    <link href="_content/Blazor.ContextMenu/blazorContextMenu.min.css" rel="stylesheet" />
    <link href="_content/KristofferStrube.Blazor.SVGEditor/kristofferStrubeBlazorSVGEditor.css" rel="stylesheet" />
    <link href="KristofferStrube.Blazor.SVGEditor.WasmExample.styles.css" rel="stylesheet" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="_content/Telerik.UI.for.Blazor/js/telerik-blazor.js"></script>
    <script src="_content/Blazor.ContextMenu/blazorContextMenu.min.js"></script>
    <script src="/api/reports/resources/js/telerikReportViewer"></script>
</head>
<body>
    @RenderBody()
    <div id="blazor-error-ui">
        <environment include="Staging,Production">
            An error has occurred. This application may no longer respond until reloaded.

        </environment>
        <environment include="Development">
            An unhandled exception has occurred. See browser dev tools for details.

        </environment>
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>
    <script src="_framework/blazor.server.js"></script> 
    <script src="_content/telerik.reportviewer.blazor/interop.js" defer></script>
    <script src="_content/CurrieTechnologies.Razor.SweetAlert2/sweetAlert2.min.js"></script>
</body>
</html>

Here is some other information that might be important to consider:

.NET SDK:
 Version:           8.0.204

<TargetFramework>net7.0</TargetFramework>
 <ItemGroup>
   <PackageReference Include="blazor-dragdrop" Version="2.4.0" />
   <PackageReference Include="Blazored.SessionStorage" Version="2.4.0" />
   <PackageReference Include="CurrieTechnologies.Razor.SweetAlert2" Version="5.6.0" />
   <PackageReference Include="Dapper" Version="2.1.35" />
   <PackageReference Include="Microsoft.AspNetCore.Components.Analyzers" Version="8.0.6" />
   <PackageReference Include="Microsoft.AspNetCore.Diagnostics.EntityFrameworkCore" Version="7.0.20" />
   <PackageReference Include="Microsoft.AspNetCore.Identity.EntityFrameworkCore" Version="7.0.20" />
   <PackageReference Include="Microsoft.AspNetCore.Identity.UI" Version="7.0.20" />
   <PackageReference Include="Microsoft.EntityFrameworkCore.SqlServer" Version="7.0.20" />
   <PackageReference Include="Microsoft.EntityFrameworkCore.Tools" Version="7.0.20">
     <PrivateAssets>all</PrivateAssets>
     <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
   </PackageReference>
   <PackageReference Include="Microsoft.VisualStudio.Web.CodeGeneration.Design" Version="7.0.12" />
  <PackageReference Include="Telerik.Documents.Spreadsheet" Version="2024.2.426" />
  <PackageReference Include="Telerik.Documents.Spreadsheet.FormatProviders.Xls" Version="2024.2.426" />
   <PackageReference Include="Telerik.Reporting.Services.AspNetCore" Version="18.1.24.514" />
<PackageReference Include="Telerik.Zip" Version="2024.2.426" />
   <PackageReference Include="Telerik.ReportViewer.Blazor" Version="18.1.24.514" />
   <PackageReference Include="Telerik.UI.for.AspNet.Core" Version="2024.2.514" />
   <PackageReference Include="Telerik.UI.for.Blazor">
     <Version>6.0.2</Version>
   </PackageReference>
  <PackageReference Include="Microsoft.CodeAnalysis" Version="4.10.0" />
  <PackageReference Include="Microsoft.CodeAnalysis.Common" Version="4.10.0" />
  <PackageReference Include="Microsoft.CodeAnalysis.CSharp" Version="4.10.0" />
  <PackageReference Include="Microsoft.CodeAnalysis.CSharp.Features" Version="4.10.0" />
  <PackageReference Include="Microsoft.CodeAnalysis.CSharp.Workspaces" Version="4.10.0" />
  <PackageReference Include="Microsoft.CodeAnalysis.Features" Version="4.10.0" />
  <PackageReference Include="Microsoft.CodeAnalysis.Scripting.Common" Version="4.10.0" />
  <PackageReference Include="Microsoft.CodeAnalysis.Workspaces.Common" Version="4.10.0" />
  <PackageReference Include="Microsoft.CodeAnalysis.VisualBasic" Version="4.10.0" />
 </ItemGroup>

Things that i've already tried to solve the issue:

Updated all packages to the newest compatible .NET 7 version.
Upgraded the software to .NET 8 Version, including packages.
Tried to reorder the initialization of the scripts in _Layout.cshtml to check if there would be an influence.

Any insights or suggestions would be greatly appreciated.

Spreadsheet

updated question on 20 Jun 2024

1 answer

129 views

I just started learning Blazor and I hit a speed bump right out of the gate.

I just started learning Blazor and I hit a speed bump right out of the gate.

I am trying to come up to speed on Blazor. I am following a tutorial on youtube. The tutorial has this image.