Hi, It is possible to have a component that enables the use of the camera and to be able to scan barcodes or QR (1D & 2D), for Blazor Web assembly and Blazor Server Side. Now this require JavaScript library like as QuaggaJS.
I think that having such a component is very useful and will allow you to build applications with advanced functionalities, other companies offer but only to generate barcodes or QR codes.
Example thanks aLorsSilvermort : https://github.com/LorsSilvermort/BlazorBarcodeReader
Best Rgards,
Victor Antelo
It would be great if the controls supported arbitrary attributes. Similar to how it is done in the native form editing controls in Blazor framework.
ASP.NET Core Blazor forms and validation
"All of the input components, including EditForm, support arbitrary attributes. Any attribute that doesn't match a component parameter is added to the rendered HTML element."
<input class="form-control" readonly="@(!EditMode)" type="text" @bind="@FormField.TextValue"/>
The CSS classes used by Blazor UI are not documented. (I haven't looked outside the Blazor area, so maybe it's somewhere else in the docs? My team has no need for other Telerik products.) On a similar note, the Themes page in the documentation explains how to reference alternate themes like Bootstrap, but it doesn't explain how to actually use the classes, or how it integrates with the real Bootstrap CSS, which have many various useful, well-known utilities like margin and padding settings, which don't seem to be part of the Telerik theme support. (I'm an architect at a very large corporation, we do have one of those includes-everything DevCraft licenses, I just can't log in with that account.)
For the Grid, is is possible to have a a SortField along with Field (that displays the data) in columns.
The SortField will be used instead of Field when sorting (if Grid is Sortable), like in WebForms: https://docs.microsoft.com/en-us/dotnet/api/system.web.ui.webcontrols.gridview.sortexpression?view=netframework-4.8.
Maybe you want to sort data based on other values instead of what is displayed.
This could be especially useful for dates that have been formatted for display in Field
but you don't want to use for sorting because date and string sorting is not the same.
Hi,
starting with version 6.0, dialogs used together with loading indicator are at wrong z-index order.
- None of hotfixes with "delay" helped.
- users are stucked and cant confirm anything
How to replicate
Click on "Show Confirm with loading indicator". Loading animation should be at BACK of confirm dialog(as at older versions, prior 6.0)
https://blazorrepl.telerik.com/GeOfQMkt56AMkdof43
All controls (such as TelerikGrid, TelerikDropDownList, etc) should have a "Visible" property. This bindeable boolean value controls whether the control is visible on the page or not:
<TelerikGrid Visible="@IsVisible" />
@functions {
protected bool IsVisible
}
This is a much better method than surrounding the entire control's markup in an @if(IsVisible) block, since that causes the control to get removed/added to the dom at runtime. This can cause many issues such as the control's constructors being fired multiple times, the dom getting "jiggled" about unecessarily.
I feel the "Visible" property is a cleaner way to hide controls.
in blazor ui version 2.24.1 I use this code in program.cs for globalization:
public static async Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app");
builder.Services.AddTransient(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
builder.Services.AddTelerikBlazor();
// register a custom localizer for the Telerik components, after registering the Telerik services
builder.Services.AddSingleton(typeof(ITelerikStringLocalizer), typeof(SampleResxLocalizer));
var host = builder.Build();
await SetCultureAsync(host);
await host.RunAsync();
}
private static async Task SetCultureAsync(WebAssemblyHost host)
{
var jsRuntime = host.Services.GetRequiredService<IJSRuntime>();
var cultureName =await jsRuntime.InvokeAsync<string>("blazorCulture.get");
if (cultureName != null)
{
var culture = new CultureInfo("fa-IR");
DateTimeFormatInfo info = culture.DateTimeFormat;
info.AbbreviatedDayNames = new string[] { "ی", "د", "س", "چ", "پ", "ج", "ش" };
info.DayNames = new string[] { "یکشنبه", "دوشنبه", "ﺳﻪشنبه", "چهارشنبه", "پنجشنبه", "جمعه", "شنبه" };
info.AbbreviatedMonthNames = new string[] { "فروردین", "ارديبهشت", "خرداد", "تير", "مرداد", "شهریور", "مهر", "آبان", "آذر", "دی", "بهمن", "اسفند", "" };
info.MonthNames = new string[] { "فروردین", "ارديبهشت", "خرداد", "تير", "مرداد", "شهریور", "مهر", "آبان", "آذر", "دی", "بهمن", "اسفند", "" };
info.AMDesignator = "ق.ظ";
info.PMDesignator = "ب.ظ";
info.ShortDatePattern = "yyyy/MM/dd";
info.FirstDayOfWeek = DayOfWeek.Saturday;
CultureInfo.DefaultThreadCurrentCulture = culture;
CultureInfo.DefaultThreadCurrentUICulture = culture;
}
}
when use TelerikDatePicker , id dosenot work properly. the code of my component in here:
<div class="demo-section k-form k-form-vertical">
<div class="k-form-field">
<label for="travel-date" class="k-label k-form-label">Travel Date</label>
<div class="k-form-field-wrap">
<TelerikDatePicker Min="@Min" Max="@Max" @bind-Value="@selectedDate" Id="travel-date"></TelerikDatePicker>
</div>
</div>
<div class="k-form-field">
<p>The selected travel date is: <strong>@selectedDate?.ToShortDateString()</strong></p>
<p>The selected travel date is: <strong>@selectedDate?.ToString()</strong></p>
<p>The selected travel date is: <strong>@selectedDate?.ToUniversalTime()</strong></p>
<p>The selected travel date is: <strong>@selectedDate?.ToLongDateString()</strong></p>
</div>
</div>
@code {
public DateTime Max = new DateTime(2050, 12, 31);
public DateTime Min = new DateTime(1950, 1, 1);
private DateTime? selectedDate=DateTime.Now;
}
when click the datepicker the date is not correct :
--- FOR FUTURE REQUEST ---
Could be very useful to scrolling tha grid to a specific item\row (in Normal Grd and also in Virtual Grid mode, both) programmatically. Whithout javascript.
For example after loading a grid that show 20 items, programmatically is it possible to go (and display in grid) not the first 20 rows but for example at row 100. So the vertical scrolling bar muso go dow sice arriving and show that row.
Best Regards
Paolo Leonesi
While using Safari browser, I am getting following exception message:
SyntaxError: Unexpected private name #a. Cannot parse class method with private name.
Hi,
It would be VERY helpful if you integrated "Prevent the Grid from wrapping text in multiple lines and show ellipsis" into grid as an option (so we would not have to write separate code and style).
I think this is one of the most needed features since grids almost always have data that wraps line.
BR, Smiljan
Hi.
Because https://feedback.telerik.com/kendo-jquery-ui/1360369-blazor-ooui is not closed I am now suggesting that you make controls for the Uno UI platform and Ooui.
Ooui and Uno are both known in context with Web Assembly and I think you should make controls for both.
You should also consider making controls for Ooui server side. If I could choose from all the worlds' options to build a web application, I would use Ooui server side, if it wasn't because of the lack of controls. The server side option is so simple to use and it was actually the reason Frank Krueger created it to begin with. He wanted a super simple way to display something on the web and he achieved that.
Flemming
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 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...
Reloading the page described down below cause memory leak. Commenting lines with telerik button prevents the problem.
@page "/"
<h3 style="position:absolute; top: 0; z-index: 1000; margin-top: 10px">Home</h3>
↓ commenting these lines prevents the memory leak
<div>
<TelerikButton OnClick="@SayHelloHandler" Primary="true">Say Hello</TelerikButton>
<div>@helloString</div>
</div>
↑ commenting these lines prevents the memory leak
@code {
List<string> strings = new List<string>();
MarkupString helloString;
protected override void OnInitialized()
{
// Attempt to clear memory with Garbage Collector
GC.Collect();
GC.WaitForPendingFinalizers();
for (int i = 0; i < 1000000; i++)
{
string a = "asdasdasdasdddddddddasasdasdasdasdddddddddasasdasdasdasdddddddddasasdasdasdasdddddddddasasda";
strings.Add(a + "b");
}
base.OnInitialized();
}
void SayHelloHandler()
{
string msg = string.Format("Hello from <strong>Telerik Blazor</strong> at {0}.<br /> Now you can use <b><u><i>C#</i></u></b> to write front-end!", DateTime.Now);
helloString = new MarkupString(msg);
}
}
MainLayout.razor:
@layout TelerikLayout
@inherits LayoutComponentBase
<style>
.navmenu .k-drawer-items {
margin-top: 3.5rem;
}
.navmenu .k-widget.k-drawer {
background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 100%);
}
.k-drawer-container {
height: 100vh;
}
.btn-margin, .btn-margin:hover {
width: 48px;
height: 56px;
color: #FFF;
}
.navmenu .k-drawer {
color: #ffffffd6;
}
.navmenu .k-drawer-item:hover, .navmenu .k-drawer-item.k-state-hover {
color: #ffffffd6;
background-color: #f0f0f012;
}
.navmenu .k-drawer-item:hover.k-state-selected {
color: #ffffff;
background-color: #7bafff94;
}
.navmenu .k-drawer-item:not(:hover).k-state-selected {
color: #ffffff;
background-color: #7bafffbd;
}
.navmenu .k-drawer:hover .k-drawer-wrapper {
width: 240px;
}
.navmenu .k-drawer .k-drawer-wrapper {
transition-duration: 300ms !important;
}
</style>
<TelerikDrawer Data="@NavigablePages" MiniMode="true" Mode="@DrawerMode.Push" SelectedItem="SelectedItem" Class="navmenu sidebar"
SelectedItemChanged="ChangeSelectedItem" TItem="DrawerItem">
<Content>
<div class="page">
<div class="main">
<div class="top-row px-4 auth">
</div>
<div class="content px-4">
@Body
</div>
</div>
</div>
</Content>
</TelerikDrawer>
@code {
List<DrawerItem> NavigablePages { get; set; } =
new List<DrawerItem>
{
new DrawerItem { Text = "Home", Url = "/", Icon = "home" }
};
public class DrawerItem
{
public string Text { get; set; }
public string Url { get; set; }
public string Icon { get; set; }
public bool IsSeparator { get; set; }
}
DrawerItem SelectedItem { get; set; }
private void ChangeSelectedItem(DrawerItem chosenItem)
{
SelectedItem = chosenItem;
}
}
This code is example. The main problem was with TelerikGrid. Usage of any telerik component caused the same memory leak.
After update to 3.0.0 TextArea autosize no longer works.
AutoSize is no longer one of the available properties.
Also Label is no longer an available property.
We are based in the US; but want to display values in a numeric text box based on the culture of the place where the data was entered.
So if the data was entered in the UK, we want the number to be formatted according to UK culture, etc. That way, it's easy to tell that number is representing pounds vs dollars, etc.
Can we please get the ability to set culture to specific controls? We don't want to change the current thread culture for everything on the page, just for one control.
thanks!
We're a paying customer for the Blazor software components under AVEVA.
We need to do a substantial amount of custom real-time drawing on top of a Blazor based map control using a layer rendered on top of the Tile Layer. The currently supported Map layers are somewhat specific to smaller map indicators and static overlays.
Our rendering subsystem doing this drawing will be using SkiaSharp/Skia on WebAssembly, drawing on a Skiasharp canvas in the browser (this already works). I'm assuming behind the scenes the Map is drawing with a standard HTML canvas.
I believe we need a solution which resembles the following:
- The Image is a layer rendered on top of the map viewport (as opposed to the entire map canvas)
- The Image layer can know the size of the ViewPort so it can create an identical size image (or perhaps this is handled automatically by the Map control)
- The Image layer can be re-rendered as often as the customer code desires (we're showing realtime data on top of maps, so we will want to re-render the Image layer say every 250ms.
- When the map viewport changes (pan, zoom, etc.), events are fired so the Image layer customer code can re-render the image based on the new viewport coordinates and zoom level.
- Click events are passed through the Image Layer for processing.
Since we're using a different rendering technology than the underlying map control, my assumption is the best way to keep this simple is our code draws to a SkiaSharp canvas then converts that to PNG/BMP/whatever so that can be injected into the Image layer for rendering.
It would be expected that every pan/zoom/viewport change causes an entire re-rendering of the Image layer.