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; }
}
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
}
}
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.
Issue: The chart SVG or canvas suddenly disappears.
Use the Blazor UI from Telerik trial version.
Perform actions such as hiding the chart line or adding values.
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.
The chart should behave as expected and not disappear unexpectedly.
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 }
}
}
};
}
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.
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:
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.
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
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