If in a grid columns are bound to integer values which shall be treated as enum values it can be done with the FieldType parameter.
Unfortunately the new FilterMenuType.CheckBoxList does not work as expected then.
With
<GridColumn Field="@(nameof(MyModel.MyPropertyId))"
FieldType="@(typeof(MyPropertyEnum))"
Title="MyProperty"
FilterMenuType="@FilterMenuType.CheckBoxList">
the filter shows Integers instead of Enum-Strings.
(With FilterMenuType.Menu the filter correctly treats the values as enums)
Regards,
René
Hover the mouse several times in a row at element c on the demo stand. OS Windows 10, Browsers: Chrome Version 87.0.4280.141 (Official Build) (64-bit) + Firefox Developer 85.0b9 (64-bit).
Tell me why the component periodically has 2 tooltips? This anomaly is also observed on your demo stand.
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
If I set a Min-Date like this:
<TelerikDatePicker @bind-Value="myDate"
Format="dd.MM.yyyy"
Min="@DateTime.Today.AddDays(1)">
</TelerikDatePicker>
clicking on the "Today" link in the calendar does not do anything!
If I don't set Min then a click on "Today" correctly sets the current date.
Regards,
René
Values of FilterMenu are not preserved in GridState.
If FilterRow is used instead of FilterMenu then the values are preserved in GridState.
(I believe that Filtering was preserved with FilterMenu as well in some previous version but I could be wrong.)
Regards,
René
I'm using the OnRead / OnCreate / OnUpdate / OnDelete events of the TelerikGrid. Most examples do not use OnRead to load data, instead using OnInitializedAsync().
When performing an update two events will fire, such as OnCreate and then OnRead to reload the grid data - which makes sense. The problem is OnRead is not awaited, so in effect the Read method can reload the data prior to data being updated on the server. This is especially the case if I have a JavaScript delete confirmation prompt.
What's my best way forward? Not use OnRead and use OnInitializedAsync instead? Somehow trigger OnRead again (which would effectively trigger it twice)?
Thanks,
Dave
Recently I used your DateRagePicker component
At that it is noticeable that the translation of its labels into German language went wrong.
Because "Start" - "End" is recognized as verb for the aim of translation.
Instead there should be used the nouns.
Better it would be translated follows: Start --> Von End --> Bis
Regards,
Özmen
I'm using a custom drawer item to handle toggling the drawer open and close. Every time I click on my custom toggle item I call Drawer.ToggleAsync() (which I trigger on the SelectedItemChanged event handler). If the drawer is expanded to begin with, it is correctly collapsed to the mini view. However, if I click the toggle item again, the drawer expands and then immediately re-collapses itself. I put a breakpoint on the code that calls Drawer.ToggleAsync(), and it's only getting hit once for each click. This is very strange behavior. Please help me work out what's going on.
P.S If there is a better way to handle the click on my custom toggle drawer item (rather than using SelectedItemChanged), please let me know.
Code
@inherits LayoutComponentBase
<TelerikRootComponent>
<div class="page">
<div class="drawer-container">
<TelerikDrawer
@ref="@Drawer"
Data="Data"
MiniMode="true"
Expanded="true"
Mode="@DrawerMode.Push"
SelectedItemChanged="((DrawerItem item) => SelectedItemChangedHandler(item))">
<Content>
<div class="main">
<div class="content px-4">
@Body
</div>
</div>
</Content>
</TelerikDrawer>
</div>
</div>
</TelerikRootComponent>
@code {
public TelerikDrawer<DrawerItem> Drawer { get; set; }
public DrawerItem SelectedItem { get; set; }
public IEnumerable<DrawerItem> Data { get; set; } =
new List<DrawerItem>
{
new DrawerItem { Text = "Item1", Icon = IconName.Inbox },
new DrawerItem { Text = "Item2", Icon = IconName.Information },
new DrawerItem { Text = "Item3", Icon = IconName.MarkerPin },
new DrawerItem { IsSeparator = true },
new DrawerItem { Text = "Item4", Icon = IconName.Inbox },
new DrawerItem { Text = "Item5", Icon = IconName.Inbox },
new DrawerItem { Text = "Toggle", Icon = IconName.ArrowChevronLeft, IsToggle = true },
};
protected override Task OnInitializedAsync()
{
SelectedItem = Data.First();
return base.OnInitializedAsync();
}
public class DrawerItem
{
public string Text { get; set; }
public string Icon { get; set; }
public bool IsSeparator { get; set; }
public bool IsToggle { get; set; }
}
private async Task SelectedItemChangedHandler(DrawerItem item)
{
SelectedItem = item;
if (item.IsToggle)
{
await Drawer.ToggleAsync();
if (Drawer.Expanded)
{
item.Icon = IconName.ArrowChevronRight;
}
else
{
item.Icon = IconName.ArrowChevronLeft;
}
}
}
}
When trying to create a treeview inside of another treeview template I get the following error
[2019-07-19T00:58:28.003Z] Error: System.InvalidOperationException: Object of type 'Telerik.Blazor.Components.TreeView.TelerikTreeView' does not have a property matching the name 'ChildContent'.
at Microsoft.AspNetCore.Components.ParameterCollectionExtensions.ThrowForUnknownIncomingParameterName(Type targetType, String parameterName)
at Microsoft.AspNetCore.Components.ParameterCollectionExtensions.SetParameterProperties(ParameterCollection& parameterCollection, Object target)
at Microsoft.AspNetCore.Components.ComponentBase.SetParametersAsync(ParameterCollection parameters)
at Telerik.Blazor.Components.TreeView.TelerikTreeViewBase.SetParametersAsync(ParameterCollection parameters)
at Microsoft.AspNetCore.Components.Rendering.ComponentState.SetDirectParameters(ParameterCollection parameters)
at Microsoft.AspNetCore.Components.Rende...
I use Guids to identify data in my application. It is a lot more reliable than using integers; however, it appears as if the TreeList does not support the use of Guids for the Id and ParentId fields when building the list's view.
---
ADMIN EDIT
This was not a bug, it was probably a configuration issue, as the scenario works, so this is marked as "declined". See the thread below for a sample.
---
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
The Chart Tooltip does not render correct values for the data points when the chart is bound to a model, has multiple series and Template is used. The DataItem does not seem to work as expected.
ADMIN EDIT:
If the Chart is bound with Independent Series Binding the FormattedValue will get the correct values.
If the Chart has no Template the correct values for the data points will be displayed
Hello,
When using grid command button edit with the onedit handler shown in this documentation https://docs.telerik.com/blazor-ui/components/grid/editing/inline
There is a bug that causes the grid to reset to the first page when editing the last item on any page that isn't the first. In other words we can edit the last item in the gird on the first page but not on the second, third, fourth...etc.
I have taken out all the logic in my edit handler as well and the problem still presents itself.
Below is the relevenat code sample and I have also zipped a short video demonstrating the behavior.
<TelerikGrid @ref="@GridNameHere"
Class="smallerFont"
Data="@DataHere"
Pageable="true"
Page="@Page"
PageSize="@PageSize"
TotalCount="@Total"
Sortable="@true"
Groupable="@false"
FilterMode="@GridFilterMode.FilterMenu"
Reorderable="@true"
OnEdit="@OnEdit"
OnUpdate="@OnUpdate"
OnCreate="@OnUpdate">
<GridToolBar>
<GridCommandButton Command="Add" Icon="add">Add</GridCommandButton>
</GridToolBar>
<GridColumns>
<GridCommandColumn Width="150px">
<GridCommandButton Command="Edit" Icon="edit">Edit</GridCommandButton>
<GridCommandButton Command="Save" Icon="save" ShowInEdit="true">Save</GridCommandButton>
<GridCommandButton Command="Cancel" Icon="cancel" ShowInEdit="true">Cancel</GridCommandButton>
</GridCommandColumn>
<GridColumn Field="@(nameof(ModelName.FieldName))" Title="Column Name" Width="100px" />
</GridColumns>
</TelerikGrid>
//Handler for edit
protected void OnEdit(GridCommandEventArgs args)
{
// no code in here and problem still presents itself but feel free to put anything I recommend using the sample from the documentation above
}
I hate to refer to this as a bug, as I'm sure there is something we are missing. Here's are the bullet points of the scenario:
In the OnLogInSucceeded section of our Authentication.razor, we are building the user specific menu from SQL tables, structuring it in a hierarchical DrawerItem list.
When I pass that back to the Data property of the TelerikDrawer, the display does not update. StateHasChanged doesn't have any impact. We have tried tying it to a "service" to listen for changes. We have even called an event that would manually make the update.
MAIN LAYOUT
@inherits LayoutComponentBase
@inject NavigationManager navigationManager
@inject PublicClient Http
@inject IMatToaster toast
@using G2_Field.Shared
@using Microsoft.AspNetCore.Authorization
@using Microsoft.AspNetCore.Components.WebAssembly.Authentication
@inject IAuthorizationService AuthorizationService
@inject Employee dbUSER
@attribute [Authorize]
<TelerikRootComponent>
<div>
<NavMenu @ref="nm" items="@Data" />
</div>
<div class="app-main">
<div class="app-bar">
<div style="float:left">
<TelerikButton OnClick="@ToggleDrawer" Icon="@Telerik.Blazor.IconName.Menu" Class="k-flat" />
</div>
<div style="float:right">
<LoginDisplay />
</div>
</div>
<div>
@Body
</div>
</div>
</TelerikRootComponent>
<MatToastContainer />
@code {
public TelerikDrawer<DrawerItem> Drawer { get; set; }
public DrawerItem SelectedItem { get; set; }
public bool Expanded { get; set; } = true;
NavMenu nm;
public List<DrawerItem> Data { get; set; } =
new List<DrawerItem>
{
new DrawerItem { Text = "HOME", Icon = Telerik.Blazor.IconName.Window, Description = "Home", URL="" }
};
public async Task ToggleDrawer()
{
await nm.ToggleDrawer();
}
public async Task OnSidebarChange(List<DrawerItem> di)
{
Data = di;
Console.WriteLine(di.Last().Children.Last().Text);
await nm.RefreshMenu(di);
}...
AUTHENTICATION
@page "/authentication/{Action}"
@using Microsoft.AspNetCore.Components.WebAssembly.Authentication
@using G2_Field.Shared
@using System.Security.Claims
@inject Employee dbUSER
@inject PublicClient Http
@using System.Threading.Tasks
<RemoteAuthenticatorView Action="@Action" OnLogInSucceeded=@OnLogInSucceeded>
<LoggingIn>
You are about to be redirected to https://login.microsoftonline.com.
</LoggingIn>
</RemoteAuthenticatorView>
@code{
[Parameter] public string Action { get; set; }
AppCategories[] iMenu = new AppCategories[0];
[CascadingParameter] private Task<AuthenticationState> authenticationStateTask { get; set; }
[CascadingParameter] public Task<AuthenticationState> AuthenticationState { get; set; }
[CascadingParameter] public List<DrawerItem> d { get; set; }
[CascadingParameter(Name = "theMainLayout")] public MainLayout ml { get; set; }
public async void OnLogInSucceeded()
{
var user = (await AuthenticationState).User;
var un = (await AuthenticationState).User.Claims.ToList();
var username = "";
if (user.Identity.IsAuthenticated)
{
// Do some stuff
Console.WriteLine("Log In Succeeded Event Fired");
foreach (Claim u in un)
{
//Console.WriteLine(u.Type + " = " + u.Value.ToString());
if (u.Type == "preferred_username") { username = u.Value.ToString(); }
}
dbUSER = await Http.Client.GetJsonAsync<Employee>("/api/Index/GetCurrentEmployee/" + username);
Console.WriteLine("EmpUserName=" + dbUSER.EmpUserName);
var gUserName = dbUSER.EmpUserName;
iMenu = await Http.Client.GetJsonAsync<AppCategories[]>("/api/Index/GetUserAppCategories/" + gUserName);
d = new List<DrawerItem>();
d.Add(new DrawerItem { Text = "HOME", Icon = "fa-home", Description = "Home", URL = "" });
foreach (var app in iMenu)
{
List<DrawerItem> y = new List<DrawerItem>();
foreach (var cat in app.ItemList)
{
DrawerItem z = new DrawerItem
{
Text = cat.MenuItemTitle,
Icon = cat.MenuItemIcon,
Description = cat.MenuItemDescription,
URL = cat.MenuItemURL
};
y.Add(z);
}
DrawerItem x = new DrawerItem {
Text = app.MenuCategoryTitle,
Icon = Telerik.Blazor.IconName.Menu,
Description = app.MenuCategoryTitle,
Children = y
};
d.Add(x);
}
StateHasChanged();
= new MainLayout();
ml.OnSidebarChange(d);
}
}...
NAVMENU
@inject NavigationManager navigationManager
@using Microsoft.AspNetCore.Components.Authorization
@using Microsoft.AspNetCore.Components.WebAssembly.Authentication
@using G2_Field.Shared
<TelerikDrawer @ref="@Drawer" Data="@items" MiniMode="false" Mode="@DrawerMode.Overlay" TItem="DrawerItem" SelectedItemChanged="@OnItemSelect" @bind-Expanded="@Expanded">
<Template Context="AuthDrawerContext">
<div class="k-drawer-items" role="menubar" aria-orientation="vertical">
<ul>
@foreach (var item in AuthDrawerContext)
{
var selectedClass = item == SelectedItem ? "k-state-selected" : string.Empty;
<li @onclick="@(() => OnItemSelect(item))" class="k-drawer-item @selectedClass">
<div class="k-level-@(item.Level)">
<TelerikIcon Icon="@item.Icon"></TelerikIcon>
<span class="k-item-text">@item.Text</span>
</div>
@if (item.Expanded && (item.Children?.Any() ?? false))
{
<span class="k-icon k-i-arrow-chevron-down" style="position:absolute; right:0; line-height: inherit; margin: 0 8px"></span>
}
else if (!item.Expanded && (item.Children?.Any() ?? false))
{
<span class="k-icon k-i-arrow-chevron-right" style="position:absolute; right:0; line-height: inherit; margin: 0 8px"></span>
}
</li>
}
</ul>
</div>
</Template>
</TelerikDrawer>
@code {
[Parameter] public List<DrawerItem> items { get; set; }
public TelerikDrawer<DrawerItem> Drawer { get; set; }
public DrawerItem SelectedItem { get; set; }
public bool Expanded { get; set; } = true;
public List<DrawerItem> Data { get; set; } = new List<DrawerItem> { new DrawerItem { Text = "HOME", Icon = Telerik.Blazor.IconName.Window, Description = "Home", URL = "" } };
public async Task ToggleDrawer() => await Drawer.ToggleAsync();
protected override void OnInitialized()
{
items = Data;
SelectedItem = items.First();
StateHasChanged();
}
public void OnHover()
{
}
public async Task RefreshMenu(List<DrawerItem> di)
{
items = di;
}
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 LayoutComponentBaseI am using the Telerik UI for Blazor 2.13. The export excel does not work with it. I am using the exact code snippet from docs as below on my test page:
@* You can sort, group, filter, page the grid, resize and reodrder its columns, and you can click the
Export button to save the current data *@
@page "/test"
@using Telerik.Blazor.Components
<TelerikGrid Data="@GridData" Pageable="true" Sortable="true" Resizable="true" Reorderable="true"
Groupable="true">
<GridToolBar>
<GridCommandButton Command="ExcelExport">Export to Excel</GridCommandButton>
<label><TelerikCheckBox @bind-Value="@ExportAllPages" />Export All Pages</label>
</GridToolBar>
<GridExport>
<GridExcelExport FileName="telerik-grid-export" AllPages="@ExportAllPages" />
</GridExport>
<GridColumns>
<GridColumn Field="@nameof(SampleData.ProductId)" Title="ID" Width="100px" />
<GridColumn Field="@nameof(SampleData.ProductName)" Title="Product Name" Width="300px" />
<GridColumn Field="@nameof(SampleData.UnitsInStock)" Title="In stock" Width="100px" />
<GridColumn Field="@nameof(SampleData.Price)" Title="Unit Price" Width="200px" />
<GridColumn Field="@nameof(SampleData.Discontinued)" Title="Discontinued" Width="100px" />
<GridColumn Field="@nameof(SampleData.FirstReleaseDate)" Title="Release Date" Width="300px" />
</GridColumns>
</TelerikGrid>
@code {
List<SampleData> GridData { get; set; }
bool ExportAllPages { get; set; }
protected override void OnInitialized()
{
GridData = Enumerable.Range(1, 100).Select(x => new SampleData
{
ProductId = x,
ProductName = $"Product {x}",
UnitsInStock = x * 2,
Price = 3.14159m * x,
Discontinued = x % 4 == 0,
FirstReleaseDate = DateTime.Now.AddDays(-x)
}).ToList();
}
public class SampleData
{
public int ProductId { get; set; }
public string ProductName { get; set; }
public int UnitsInStock { get; set; }
public decimal Price { get; set; }
public bool Discontinued { get; set; }
public DateTime FirstReleaseDate { get; set; }
}
}
Whenever I click on the export button. It simply does not respond. I do see lot of http requests though :
Please let me know if you need anymore details.
Dear team,
we use a BlazoredTypeahead control inside a TelerikWindow and have this problem.
When you open the result dropdown of BlazoredTypeahead and click on the scrollbar in the result dropdown, the result dropdown is closed suddenly.
This only happens when a BlazoredTypeahead control is inside a TelerikWindow. If I remove the Telerik Window everything works as expected.
Attached is a running example, which demonstrates the issue. In the example just click on the "New" button in the grid, this will open the TelerikWindow, which contains the BlazoredTypeahead control.
Thanks for your help.
<TelerikDropDownList Data="@myDdlData" TextField="MyTextField" ValueField="MyValueField" @bind-Value="@SelectedValue" Width="100%" />
public string SelectedValue { get; set; }
public class MyDdlModel
{
public int MyValueField { get; set; }
public string MyTextField { get; set; }
}
protected IEnumerable<MyDdlModel> myDdlData = Enumerable.Range(1, 20).Select(x => new MyDdlModel { MyTextField = "item " + x, MyValueField = x });
Grid OnRead .Clear() Issue
With the following component:
@page "/counter"
@using System.Collections.ObjectModel
General grid with its most common features
<TelerikGrid Data="@MyData" Pageable="true" @bind-Page="page" PageSize="5" TotalCount="30" OnRead="@ReadItems" >
<GridColumns>
<GridColumn Field="@(nameof(SampleData.Id))" Width="120px" />
<GridColumn Field="@(nameof(SampleData.Name))" Title="Employee Name" Groupable="false" />
<GridColumn Field="@(nameof(SampleData.Team))" Title="Team" />
<GridColumn Field="@(nameof(SampleData.HireDate))" Title="Hire Date" />
</GridColumns>
</TelerikGrid>
@code {
public List<SampleData> MyData { get; set; } = new List<SampleData>();
//public ObservableCollection<SampleData> MyData { get; set; } = new ObservableCollection<SampleData>();
private int page = 1;
private void ReadItems(GridReadEventArgs args)
{
//MyData = new List<SampleData>(); //OK!
//MyData = new ObservableCollection<SampleData>(); //OK!
MyData.Clear(); //List: No update. ObservableCollection: System.StackOverflowException!
Populate();
StateHasChanged();
}
private void Populate()
{
foreach (var data in Enumerable.Range((page - 1) * 5, 5).Select(x => new SampleData
{
Id = x,
Name = "name " + x,
Team = "team " + x % 5,
HireDate = DateTime.Now.AddDays(-x).Date
}))
{
MyData.Add(data);
}
}
public class SampleData
{
public int Id { get; set; }
public string Name { get; set; }
public string Team { get; set; }
public DateTime HireDate { get; set; }
}
}
I see the issues in the comment fields. Changing OnRead to async makes no difference.
The workaround is to assign a new List or ObservableCollection instead of using .Clear()