Questions on UI for Blazor Forum

1 answer

200 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

236 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

162 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

190 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

300 views

[Solved] 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

208 views

[Solved] 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

219 views

[Solved] 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

216 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

113 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

333 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