Questions on UI for Blazor Forum

0 answers

125 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

77 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.

But when I am working with Visual Studio 2024 Community Version, I have this:

It is because things are completely different with Visual Studio Code?

Please advise.

General Discussions

answered on 20 Jun 2024

1 answer

98 views

Invoke javascript in interactive server mode

I am trying to create a ThemeSwitcher component based on the article How to Toggle Between Light and Dark Modes in Blazor

Can this be down in interactive server mode or only in wasm mode?
Has anyone had success with mixed mode using Telerik?

I am used to only create hosted WASM apps. Choosing between server and client render modes. I would choose client.

Getting Started with Blazor’s New Render Modes in .NET 8 (telerik.com)

Blazor RootComponent - Using with Per Page/Component Interactivity Location - Telerik UI for Blazor

General Discussions

answered on 19 Jun 2024

3 answers

181 views

Custom image as map

Hi Team,

is it possible to use a custom image inside the map control to place markers on?

Next to the world map, we would like to provide some detailed information for buildings and use the building layout to place markers inside rooms.

Thank you very much in advance!

Alex

Map

answered on 19 Jun 2024

1 answer

117 views

Connection Lines for Map component

Hi Team,

would it be possible to add Connection Lines between markers to the Map component?

The items we place on the map are network devices and it would be great, if we could add an array like double[][] to our items to automatically draw a line to this coordinates to show the connections of our network. It could either be an array of coordinates or a list of objects which are already part of the marker layers data.

Thank you very much in advance!

Best regards,

Alexander Schneider

Map

answered on 19 Jun 2024

1 answer

125 views

Drag&Drop for Map component

Hi Team,

would it be possible to add Drag and Drop to the Map component?

We have already a lot of items in our application that we want to place on the map and it would be way easier if we could just drag them from a grid or listview onto the map and then save the retreived coordinates in the items and add them to the marker layers data.

Thank you very much in advance!

Best regards,

Alexander Schneider

Map

answered on 19 Jun 2024

1 answer

147 views

TelerikPdfViewer set page from code

Hey,

I'm using the TelerikPdfViewer in blazor to display a PDF, however, I don't want to open the PDF on page 1 , I want to open the PDF to page 5.
Is there a way to set the page number from code, I have not found any documentation on setting the page number from code.

Kind regards
Dimitri

PDFViewer

answered on 18 Jun 2024

1 answer

63 views

Has anyone used the free version of Grammarly as in integration into the TelerikEditor?

Just checking if its been done on blazor or not? I did see some mention of it in the Ajax forums

Editor

answered on 18 Jun 2024

1 answer

205 views

TelerikDropDownList doesn't close after selection

I have a telerik dropdownlist that isn't closing after selection. I've looked at the answer posted here: Dropdownlist does not close after selection in UI for Blazor | Telerik Forums, but that doesn't solve my issue. My value fields match (I am using DateOnly), and the value is a Value type (struct).

<FormItem Field="@nameof(HpuDonation.HpuScheduledPickupDate)">
    <Template>
        <TelerikDropDownList Width="150px" ValueField="@nameof(PickupDateTargetCapacity.PickupDate)" Data="@PickupDates" @bind-Value="@Donation.HpuScheduledPickupDate">
            <ValueTemplate>
                @((context as PickupDateTargetCapacity).PickupDate.ToString("MMMM d"))
            </ValueTemplate>
            <ItemTemplate>
                @((context as PickupDateTargetCapacity).PickupDate.ToString("MMMM d"))
            </ItemTemplate>
        </TelerikDropDownList>
    </Template>
</FormItem>

@code {
    public IEnumerable<PickupDateTargetCapacity> PickupDates { get; set; } = new List<PickupDateTargetCapacityDto>();
    public HpuDonation Donation { get; set; }

    public class HpuDonation
    {
        public DateOnly HpuScheduledPickupDate { get; set; }
        // other fields
    }

    public class PickupDateTargetCapacity
    {
        public DateOnly PickupDate { get; set; }
        // other fields
    }
}

Where am I making the error?

DropDownList

answered on 18 Jun 2024

1 answer

259 views

Grid filtering without model properties

Hi,

I have a Grid component that is used for editing data in an arbitrary database table. The type of the grid is a class that doesn't have properties for each column, but rather simulates columns and row data based on the selected database table structure. The purpose of this is to enable the user to edit a certain database table without the need to define the exact data structure in the web application.

This works fine when displaying data and editing data. However, I need to implement filtering and things start to get tricky.

I have a snippet that simplifies the issue: https://blazorrepl.telerik.com/weYKFcvq2749nY9L57

Before trying to implement filtering, I had no Field attribute on my GridColumns and that worked fine. But when adding the FilterMode attribute to the TelerikGrid component the filter row isn't rendered at all (also not when using FilterCellTemplate). I've read other forum posts about the necessity of the Field attribute. When I add the Field attribute, the filter row is rendered but I get an exception stating "Value cannot be null. (Parameter 'nullableType')" with this stack trace:

at System.ArgumentNullException.Throw(String paramName)
at System.Nullable.GetUnderlyingType(Type nullableType)
at Telerik.Blazor.Common.Filter.FilterOperatorFactory.GetColumnDefaultFilterOperator(Type propType)

Is the component using reflection to determine the Type of the field? Or can I somehow tell the component dynamically what type to use, in the same way I can return the title or cell content dynamically?

I tried to use the filter template but I get stuck on the Field problem.

Filter

Grid

answered on 17 Jun 2024