Hi Team,
We tried to use the TelerikLoader in Blazor WASM app, but the loader is not appearing on the page. We tried the basic example given in the Demo but did not work.
We are using latest Telerik Version (2.20.0).
@if (IsLoading)
{
<TelerikLoader />
}
else
{
@Data
}
We have below references in index.html
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>THOR.UI</title>
<base href="/" />
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
<link href="css/app.css" rel="stylesheet" />
<link href="css/toggle.css" rel="stylesheet" />
<link href="css/spinner.css" rel="stylesheet" />
<script src="_content/Telerik.UI.for.Blazor/js/telerik-blazor.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<link id="theme" rel="stylesheet" href="./css/thor-light-theme-material.css" />
<link href="_content/Blazored.Toast/blazored-toast.min.css" rel="stylesheet" />
<script src="./site.js"></script>
<script src="_content/BlazorInputFile/inputfile.js"></script>
<script src="_content/BlazorPro.BlazorSize/blazorSize.min.js"></script>
<script src="_content/Fluxor.Blazor.Web/scripts/index.js"></script>
<script src="./scripts/download.js"></script>
</head>
I tried to follow this below article and add the reference as below and CDN also but it did not work.
<!DOCTYPE html>
<html>
<head>
. . .
<link href="/css/kendo-themes/default/dist/all.css" rel="stylesheet"/>
<!-- Choose only one of the themes -->
<!-- <link href="/css/kendo-themes/bootstrap/dist/all.css" rel="stylesheet" />
<link href="/css/kendo-themes/material/dist/all.css" rel="stylesheet" /> -->
</head>
Please let us know what changes we have to make this to work.
Thanks
Chandra Vanama
In a Telerik Grid, we had just implemented the new Grid Footer Template. However, any built-in filtering (filterrow, filtermenu, searchbox) we use now will cause the grid/page to crash when the input we type does not exist for any row in the grid. If the input we type does exist, the filtering works correctly. For instance, if wanted to filter the name "John Smith" and a row exists with that name, then that row will be filtered. If we typed in "John Smithasdf", then the grid crashes and we receive the following message from the DevTools window:
blazor.server.js:19 [2020-09-21T16:58:12.070Z] Error: System.InvalidOperationException: Nullable object must have a value.
at System.Nullable`1.get_Value()
at BudgetPak.Pages.User.Budgeting.HeadcountReview.<>c__DisplayClass0_4.<BuildRenderTree>b__43(RenderTreeBuilder __builder4)
at Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder.AddContent(Int32 sequence, RenderFragment fragment)
at Telerik.Blazor.Components.Grid.GridFooterCell`1.BuildRenderTree(RenderTreeBuilder __builder)
at Microsoft.AspNetCore.Components.Rendering.ComponentState.RenderIntoBatch(RenderBatchBuilder batchBuilder, RenderFragment renderFragment)
at Microsoft.AspNetCore.Components.RenderTree.Renderer.RenderInExistingBatch(RenderQueueEntry renderQueueEntry)
at Microsoft.AspNetCore.Components.RenderTree.Renderer.ProcessRenderQueue()
From the highlighted text, we deduced the issue had to deal with the Grid Footer template. Not all of our columns are aggregated on the footer row, so we were thinking that's what the "Nullable object must have a value" message meant. When we removed the Grid Footer template, the filtering worked correctly. With one of our other grids, we added a temporary footer grid, and the same crash would occur.
Is there a work-around for this? The footer template otherwise is great, and we would like to use both that and filtering on our grids. Please let us know if you need any more info.
Thanks,
Steve
Hello,
im trying to render a treview but its not showing any item, im also print the results of my query on a table using a for loop and it shows the results ok , but the trevieww its not loading any data. Attached my code :
@inherits LayoutComponentBase@inject Blazored.LocalStorage.ILocalStorageService oLocalStorage
@using MAPCRUD.Model
@using MAP.Interfaces
@inject IMapTreeviewMenuService MapTreeviewMenuService
<TelerikRootComponent>
<div class="sidebar">
<NavMenu />
@if (MapMenuData == null)
{
<p><em>Loading...</em></p>
}
else
{
<TelerikTreeView Data="@MapMenuData">
<TreeViewBindings>
<TreeViewBinding ParentIdField="@(nameof(MapTreeviewMenu.ParentIdValue))" TextField="@(nameof(MapTreeviewMenu.Text))" UrlField="@(nameof(MapTreeviewMenu.Url))" IconField="@(nameof(MapTreeviewMenu.Icon))" ></TreeViewBinding>
</TreeViewBindings>
</TelerikTreeView>
<table>
<thead>
<tr>
<th>Text</th>
</tr>
</thead>
<tbody>
@foreach (var menuData in MapMenuData)
{
<tr>
<td style="color:#fff;">@menuData.Url</td>
</tr>
}
</tbody>
</table>
}
</div>
<div class="main">
<div class="top-row px-4">
<a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
</div>
<div class="content px-4">
@Body
</div>
</div>
</TelerikRootComponent>
@code {
private IEnumerable<MapTreeviewMenu> MapMenuData;
protected override async Task OnInitializedAsync()
{
await oLocalStorage.SetItemAsync("CollegeID", 1);
await oLocalStorage.SetItemAsync("ApplicationID", 1);
await oLocalStorage.SetItemAsync("RoleID", 2);
await oLocalStorage.SetItemAsync("UserID", 1);
int CollegeID = await oLocalStorage.GetItemAsync<int>("CollegeID");
int ApplicationID = await oLocalStorage.GetItemAsync<int>("ApplicationID");
int RoleID = await oLocalStorage.GetItemAsync<int>("RoleID");
int UserID = await oLocalStorage.GetItemAsync<int>("UserID");
MapMenuData = await MapTreeviewMenuService.GetMenuItems(CollegeID, ApplicationID, RoleID, UserID);
}
}
Hi!
I want to create a grid with multiselect options (controlled by checkboxes in the first column). I have used code from https://demos.telerik.com/blazor-ui/grid/selection but when i try this code in my project there are no checkboxes in the first column, just empty cells. Am i the only one with this problem?
Hi!
I'm trying out Marin Bratnov's code (from a Link - demonstration code). When i try to write a letter in a TelerikComboBox control it is automatically cleared out. I get the same behavior in my own project too. Filtering TelerikComboBox outside the grid works perfecly. Please check te video.
I have a TelerikComboBox in an EditorTemplate within a Grid. Code looks like this:
<TelerikComboBox Data="@CustomerPayCodes"
@bind-Value="@PayItemMapInEdit.ClientPayCode.UniqueId"
Placeholder="Select..."
Filterable="true"
TextField="PayCodeDisplayName"
ValueField="UniqueId"
@ref="_clientPayCodeComboBox"
Width="auto"
Enabled="@(string.IsNullOrEmpty(_payItemTextBoxRef?.Value))">
</TelerikComboBox>
Where reference prop looks like this:
private TelerikComboBox<PayCode, Guid> _clientPayCodeComboBox;
When adding a new row, the Placeholder text becomes the empty GUID, until I click in the box and then outside, upon it changes to correct "Select...". The GUID is never supposed to be showed at all in the box, that is only the binded value.
See attached pictures.
Please advice.
Br,
Sten
When I create multiple tabs and each tab has the same type of component, the OnInitialized is only running for the first one I click on.
Here is a simplified example to demonstrate:
MAIN PAGE:
@page "/tabtest"
@using Telerik.Blazor.Components
<div>Product XYZ</div>
<TelerikTabStrip TabPosition="Telerik.Blazor.TabPosition.Top" @ref="productTabStrip" @bind-ActiveTabIndex="@ActiveTabIndex">
<TabStripTab Title="Details">
<div class="container sms-tab-content">
GENERAL PRODUCT INTRO STUFF HERE
</div>
</TabStripTab>
@foreach (var item in listOfWidgets)
{
<TabStripTab Title="@item.WidgetName" Disabled="false">
<Widget WidgetID="@item.WidgetID" WidgetName="@item.WidgetName" />
</TabStripTab>
}
</TelerikTabStrip>
<div style="margin-top: 15px;">
<div><b>Below is a flat non-tab example of repeating widgets:</b></div>
@foreach (var item in listOfWidgets)
{
<Widget WidgetID="@item.WidgetID" WidgetName="@item.WidgetName" />
}
</div>
@code {
Telerik.Blazor.Components.TelerikTabStrip productTabStrip;
public int ActiveTabIndex { get; set; } = 0;
protected class Widget
{
public int WidgetID { get; set; }
public string WidgetName { get; set; }
}
private List<Widget> listOfWidgets = new List<Widget>();
protected void GetData()
{
listOfWidgets.Add(new Widget { WidgetID = 1, WidgetName = "Cog" });
listOfWidgets.Add(new Widget { WidgetID = 2, WidgetName = "Wheel" });
listOfWidgets.Add(new Widget { WidgetID = 3, WidgetName = "Bloof" });
}
protected override void OnInitialized()
{
GetData();
}
}
WIDGET COMPONENT:
@page "/widget/{WidgetID:int}/{WidgetName}"<div>
<div>@WidgetID</div>
<div>@WidgetName</div>
<div>@ExtraWidgetInfo</div>
</div>
@code {
[Parameter] public int WidgetID { get; set; } = 0;
[Parameter] public string WidgetName { get; set; } = "Nothing";
private string ExtraWidgetInfo { get; set; } = "Stuff";
protected override void OnInitialized()
{
if (WidgetName == "Cog")
ExtraWidgetInfo = "This is good info about cogs.";
if (WidgetName == "Wheel")
ExtraWidgetInfo = "This is good info about wheels.";
if (WidgetName == "Bloof")
ExtraWidgetInfo = "This is good info about bloofs.";
}
}
Microsoft.AspNetCore.Components.Server.Circuits.CircuitHost[111]
Unhandled exception in circuit '_2TiBAG0g2G9PCcWgKc-G4zmfFAGiDJEO7pd7Jbjxpk'.
System.IO.FileLoadException: Could not load file or assembly 'Telerik.DataSource, Version=1.2.0.0, Culture=neutral, PublicKeyToken=20b4b0547069c4f8'. The located assembly's manifest definition does not match the assembly reference. (0x80131040)
File name: 'Telerik.DataSource, Version=1.2.0.0, Culture=neutral, PublicKeyToken=20b4b0547069c4f8'
at System.Signature.GetSignature(Void* pCorSig, Int32 cCorSig, RuntimeFieldHandleInternal fieldHandle, IRuntimeMethodInfo methodHandle, RuntimeType declaringType)
Did I miss installing something.
Used the installer telerik.ui.for.blazor.2.1.0.commercial.msi
After upgrading from 1.1.1 to 1.2.0 I get following exception on app start when hosted on azure app service, locally it works fine.
I have tried using the "static assets" and "CDN" version for retrieving the .js file, both yield this error.
An error occurred while starting the application.
DirectoryNotFoundException: C:\Users\VssAdministrator\.nuget\packages\telerik.ui.for.blazor.trial\1.2.0\staticwebassets\
Microsoft.Extensions.FileProviders.PhysicalFileProvider..ctor(string root, ExclusionFilters filters)
DirectoryNotFoundException: C:\Users\VssAdministrator\.nuget\packages\telerik.ui.for.blazor.trial\1.2.0\staticwebassets\
Microsoft.Extensions.FileProviders.PhysicalFileProvider..ctor(string root, ExclusionFilters filters)
Microsoft.Extensions.FileProviders.PhysicalFileProvider..ctor(string root)
Microsoft.AspNetCore.StaticWebAssetsFileProvider..ctor(string pathPrefix, string contentRoot)
Microsoft.AspNetCore.StaticWebAssetsLoader+<>c.<UseStaticWebAssetsCore>b__2_0(ContentRootMapping cr)
System.Linq.Enumerable+SelectEnumerableIterator<TSource, TResult>.MoveNext()
System.Linq.Enumerable.OfTypeIterator<TResult>(IEnumerable source)+MoveNext()
System.Collections.Generic.List<T>..ctor(IEnumerable<T> collection)
System.Linq.Enumerable.ToList<TSource>(IEnumerable<TSource> source)
Microsoft.AspNetCore.StaticWebAssetsLoader.UseStaticWebAssetsCore(IWebHostEnvironment environment, Stream manifest)
Microsoft.AspNetCore.StaticWebAssetsLoader.UseStaticWebAssets(IWebHostEnvironment environment)
Microsoft.AspNetCore.WebHost+<>c.<ConfigureWebDefaults>b__9_0(WebHostBuilderContext ctx, IConfigurationBuilder cb)
Microsoft.AspNetCore.Hosting.Internal.GenericWebHostBuilder+<>c__DisplayClass8_0.<ConfigureAppConfiguration>b__0(HostBuilderContext context, IConfigurationBuilder builder)
Microsoft.Extensions.Hosting.HostBuilder.BuildAppConfiguration()
Microsoft.Extensions.Hosting.HostBuilder.Build()
*.Program.Main(string[] args) in Program.cs
System.IO.DirectoryNotFoundException: C:\Users\VssAdministrator\.nuget\packages\telerik.ui.for.blazor.trial\1.2.0\staticwebassets\
at Microsoft.Extensions.FileProviders.PhysicalFileProvider..ctor(String root, ExclusionFilters filters)
at Microsoft.Extensions.FileProviders.PhysicalFileProvider..ctor(String root)
at Microsoft.AspNetCore.StaticWebAssetsFileProvider..ctor(String pathPrefix, String contentRoot)
at Microsoft.AspNetCore.StaticWebAssetsLoader.<>c.<UseStaticWebAssetsCore>b__2_0(ContentRootMapping cr)
at System.Linq.Enumerable.SelectEnumerableIterator`2.MoveNext()
at System.Linq.Enumerable.OfTypeIterator[TResult](IEnumerable source)+MoveNext()
at System.Collections.Generic.List`1..ctor(IEnumerable`1 collection)
at System.Linq.Enumerable.ToList[TSource](IEnumerable`1 source)
at Microsoft.AspNetCore.StaticWebAssetsLoader.UseStaticWebAssetsCore(IWebHostEnvironment environment, Stream manifest)
at Microsoft.AspNetCore.StaticWebAssetsLoader.UseStaticWebAssets(IWebHostEnvironment environment)
at Microsoft.AspNetCore.WebHost.<>c.<ConfigureWebDefaults>b__9_0(WebHostBuilderContext ctx, IConfigurationBuilder cb)
at Microsoft.AspNetCore.Hosting.Internal.GenericWebHostBuilder.<>c__DisplayClass8_0.<ConfigureAppConfiguration>b__0(HostBuilderContext context, IConfigurationBuilder builder)
at Microsoft.Extensions.Hosting.HostBuilder.BuildAppConfiguration()
at Microsoft.Extensions.Hosting.HostBuilder.Build()
at *.Program.Main(String[] args) in d:\a\1\s\*\Program.cs:line 11
.NET Core 3.0.0-preview6-27804-01 X86 v4.0.0.0 | Microsoft.AspNetCore.Hosting version 3.0.0-preview6.19307.2 | Microsoft Windows 10.0.14393 | Need help?
When following the Blazor UI code examples for the Grid, the source for index.cshtml contains the following:
@page "/grid/index"
@using Telerik.Blazor.Components.Grid
@using TelerikBlazor.Shared
@inject HttpClient Http
Notice that the using directive for the Shared component doesn't have a . separating Telerik and Blazor. It should read:
@using Telerik.Blazor.Shared