I have a grid with inline-edit mode where the items have data annotations validation enabled.
When I click the grid command button "add", and then without typing in anything submit in some way, the validation jumps in as it should.
However, if I - without providing more input and still in the same item's edit mode - just click the "add" button again and then submit the item again, the incomplete item is submitted without any further validation.
This is fatal for my purpose, and I can even reproduce the issue here on the Telerik website's example repl: Blazor Grid Editing Inline Editing - Telerik UI for Blazor (after turning off the option "Confirm Cancel Commands").
I would very much appreciate any guidance on how to circumvent that bug while it ist being worked on, since I couldn't yet find a way how to do it.
(As implied above, the confirmation prompt does prevent the bug, however I don't want to use a prompt if possible.)
Here's a list with some cases concerning this bug:
- tap add, submit => validation
- tap add, tap add, submit => submitted!
- tap add, submit (=> validation), tap add, submit => submitted!
Greetings to the team!
Hello:
I am using column menu in a gantt component. In version 8.1.1 the selection of columns to display was working correctly, but when upgrading to version 9.0.0 I get an error using the same implementation. The error received is:
blazor.web.js:1 crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
Unhandled exception rendering component: Object reference not set to an instance of an object.
System.NullReferenceException: Object reference not set to an instance of an object.
at Telerik.Blazor.Components.Common.ColumnMenu.ColumnMenu`1.<OnColumnChooserColumnVisibilityChange>d__188[[BlazorRepl.UserComponents.__Main.FlatModel, BlazorRepl.UserComponents, Version=0.0.0.0, Culture=neutral, PublicKeyToken=null]].MoveNext()
at Telerik.Blazor.Components.Common.ColumnMenu.ColumnMenuChooser.OnApplyClick()
at Microsoft.AspNetCore.Components.ComponentBase.CallStateHasChangedOnAsyncCompletion(Task task)
at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)You can replicate the error from online examples just by adding or removing visible columns.
https://www.telerik.com/blazor-ui/documentation/components/gantt/gantt-tree/columns/menu
I need to use this functionality with Telerik® UI for Blazor version 9.0.0.
When is it planned to solve this error? Is there a workaround I can apply?
Regards.
They eventually typed it manually to fix, which is one way that I agree can be used to resolve. You can also select the wrong date, followed by the right date to get around, but that is a horrible workaround.
What I believe the experience should be is that when selecting the value in the date picker, regardless of what it thinks is in the field, it should fire the change event and update the text of the field to the date selected (and clear the validation message). That is what I'd like to see as a future change. Note that this happens on ValueChanged, but not OnChanged. OnChanged fires too late though, and doesn't work for most workflows.
We put in a hack solution in some operator UIs where it is very important to not have this happen, but it is a pain to do this for every picker, so most in the system are unhandled.
The solution was to have OnOpen and OnBlur both manually trigger ValueChanged (which ends up sending default - 1/1/1901) using a reference for the control. This helps us differentiate if it is these events vs an actual date change. When it is OnOpen/OnBlur, we then reupdate the value in the reference and refresh. Note that you end up having to do this twice to "trick" the telerik logic. So we change to default, refresh, and then change to the correct (or last good value - what is already bound) and refresh. Basically now when they leave the field or click the picker, if there is an invalid value and message, it clears and gets replaced with the last good date. If there is a valid date, it does nothing from the user perspective.
I my understanding, the simplest way to get a coding agent provide better assistance to a very specific product like telerik blazor, is by just providing the documentation.
My first experiments with the telerik mcp server are not succesful. I would think that linking the full documentation directly to the coding agent can seriously lead to better results.
AI Coding agents are doing a great job with more standard frontend framework like react, they seem to be common knowledge. We know that Blazor and in particular Telerik blazor is a niche product (not only niche, but also NICE), so coding agents needs to have clear instructions on everything.
Of course, i don't know how your documentation system works, and how easy it would be to generate .md files from this?
Thanks for looking into this matter
Don't hesitate to contact me directly for further questions or whatsoever.
warm regards
paul
I would like to have possibility to put sorting and filtering icons in second row or at least second line in TelerikGrid header. To follow our project design I need to have 1 header row with header titles, and second row with sorting and filtering. Or at least one table header row with sorting and filtering icons in 2 line. Is this somehow possible to achieve?
I have been trying to improve my Lighthouse score with Google and one of the items it is tagging is the "telerik-blazor.js" file. I have seen new practices where the JavaScript is imported as needed, see this article here from Microsoft.
Can you please consider this in the future?
===
Telerik edit: A possible workaround is to build the Telerik JavaScript file without some of the components that you don't need.
In the TelerikSignature control, the ExportScale property defaults to 2. This causes the image size to be doubled without realizing it. While it can be useful to scale the exported image, the default should be 1, because that is the expected default output.
<TelerikSignature @bind-Value="Medlog.Signature" Width="700px" Height="120px" Smooth="true" StrokeWidth="2" PopupScale="2" ExportScale="1">
</TelerikSignature>
Context
The website uses OAuth2 (AzureAd) & https with http version 1 :
"Kestrel": {
"EndpointDefaults": {
"Protocols": "Http1"
}
Glitch
Crash systematically reproduced when user opens website.
Workaround
The issue can be can be manually & individually (per user) fixed by:
- Executing the instruction: Navigation.NavigateTo($"MicrosoftIdentity/Account/SignOut", true);
- Closing Edge browser
- Opening back website
- Answering OAuth 2 challenge (MicrosoftIdentity/Account/SignIn)
Our client is pushing hard for us to find an automatic solution / patch (which doesn't involve making multiple actions for his users like in my workaround).
1) Run the following REPL: https://blazorrepl.telerik.com/wJEJlqvC26v5pK9R49
2) There are 2 TelerikDateInput components binded to the same variable, with a DateInputFormatPlaceholder different than the default "dd/MM/yyyy"
3) In the first TelerikDateInput enter a valid date value
4) Note that the second TelerikDateInput assumes the same value, which is correct
5) Enter an invalid value in the first TelerikDateInput by clearing the day part or the month part or the year part
6) The second TelerikDateInput component assumes the default placeholder, instead of the one specified in DateInputFormatPlaceholder
7) Click on the second TelerikDateInput component: it now assumes correctly the placeholder specified in DateInputFormatPlaceholder
The following gif showcases the scenario: https://i.gyazo.com/a9e1f2d3b87cdac19e4e6b71bdeccb38.mp4
This also affects all the Telerik components that have a <*Component*FormatPlaceholder> tag.
Here is a REPL link which contains many components that have a <*Component*FormatPlaceholder> tag: https://blazorrepl.telerik.com/QJaTlglC29a2s8Ys43
Telerik UI for Blazor requires unsafe-inline styles in order to render style attributes from the .NET runtime.
Please add support for strict CSS CSP without the need for unsafe inline styles.
===
TELERIK EDIT:
Due to the complexity and required effort to add strict CSS CSP support:
- The feature request must gather enough votes.
- We may implement it gradually. That's why, everyone who is interested, please specify the exact components and features that you need to be compliant sooner.
I'm looking for what you have in WPF as we migrate ourselves over to Blazor - https://www.telerik.com/products/wpf/conversational-ui.aspx
---
ADMIN EDIT
For the time being, you can consider using the Kendo Chat widget as described in this sample project.
---
Creating a new WebApp project template through the extension fails to build. This is caused by incorrect icon type in the MainLayout.razor file.
To make sure the app is correctly built, the Icon type should be FontIcon.
<TelerikButton Icon="@FontIcon.Menu"
FillMode="@ThemeConstants.Button.FillMode.Clear"
OnClick="@( () => DrawerExpanded = !DrawerExpanded )" />
It appears there are some issues with encoding special characters in the DataSourceExtensions.ToODataString extension method.
See snippet below.
var ds = new DataSourceRequest()
{
Filters = [new FilterDescriptor("FieldName", FilterOperator.IsEqualTo, "Route #")],
Sorts = []
};
{
Console.WriteLine(ds.ToODataString());
$count=true&$filter=(FieldName%20eq%20%27Route%20#%27)&$skip=0
This results in a malformed url as the last part of of the query is interpreted as a fragment due to this character not being encoded.
It stops working if you open it too fast. It goes into a state where no matter what you do (Rebind/changing data bound values etc.), it will not open and show items.
It can be reproduced easily by calling .Open() in OnInitializedAsync()
I have reproduced it without MS Playwright in REPL, so you can easily debug it.
https://blazorrepl.telerik.com/QIOUYoPc57iQKy6702
If you uncomment the await Task.Delay(3000); the code will work.
Expected behavior:
It is ok that Open() does nothing while the control is initializing. It is not ok that just because you called Open() once, then you are forever stuck without being able to open it later, no matter how long you wait or what you do with the items.
I do not want to insert random Delays in my code either as I expect the TelerikDropDownList to not malfunction just because I open it too early.
I hope you can prioritize this as right now the DropDownList is not usable for us.
I have a scenario in which we have user definable columns for a grid, including hundreds if not thousands that need to be ported from the old version of our product. This means these column keys would be strings that may contain spaces or even special characters - and as such cannot be a valid C# property name (which means using an ExpandoObject approach will not work)
It would be really beneficial if the TelerikGrid component could be given Data of an IEnumerable<Dictionary<string, object>> where the Field property of GridColumn (or a new property) would line up with a key in that dictionary rather than a field name for the component to then use reflection with.
A customer with multiple modules of our product installed may very well have columns with similar names, i.e "Some Key", "SomeKey", "Some_Key", "Some & Key" - so simply replacing spaces or special characters may not always still give unique keys.
Hi,
Are you planning to add a loader to the grid in the feature?
E.g as an isLoading attribute or exepnd the build-in one?
With method OnRead to fetch data, when grid is not yet loaded with data, it displays no records available.
Also when chenging data, loading is not starting, but there is an unsmooth transition after some time.
Thanks in advance for your time, Kacper
Hello,
We are looking to port an angularjs web application to Blazor and I didn't see the diagram component similar to the one found in Kendo UI. It would be nice to see a viso-like component in UI for Blazor.
Thank you.
We are using Telerik UI for Blazor (V6.2.0) grid. The first 3 columns (Delivery No, Spot Check, Spotcheck Status) of the grid are frozen/locked. While horizontal scrolling the header text gets overlapped. We have used custom CSS to change the header color.
<TelerikGrid @ref="@GridRef" Data="@dashboardData"
Reorderable="true"
SortMode="@SortMode.Single"
Pageable="true"
FilterMode="GridFilterMode.FilterRow"
PageSize="10"
EnableLoaderContainer="true"
Sortable="true" Context="inboundContext" OnRowRender="@OnRowRenderHandler" Width="1800px" Height="500px">
@foreach (var header in tableHeader)
{
@if (@header.id == "SpotCheck")
{
<GridColumn Field="@(nameof(@header.id))" Width="150px" Title="@header.headerName" Visible="@header.isVisible" Locked="true" Reorderable="false" Filterable="false">
<Template>
@{
var item = (Delivery)context;
var isVisible = (item.DeliveryType.Equals("IN") && !string.IsNullOrEmpty(item.EUDRRefAndVerificationId));
}
<div class="spot-check-btn">
<TelerikButton Class="custom-btn custom-btn-secondary" OnClick="()=>reDirectTo(item.Id)" Visible="isVisible">Spot Check</TelerikButton>
</div>
</Template>
</GridColumn>
}
else if (@header.id == "status")
{
<GridColumn Field="@(nameof(@header.id))" Title="@header.headerName" Visible="@header.isVisible" Width="150px">
<Template>
@{
var item = (Delivery)context;
<span class="status-data @item.Status.ToLower()">
<span class="dot"></span>@item.Status
</span>
}
</Template>
</GridColumn>
}
else if (@header.id == "SpotcheckStatus")
{
<GridColumn Field="@header.id" Title="@header.headerName" Width="150px"
OnCellRender="@((e) => OnCellRenderHandlerSpotcheckStatus(e))"
Visible="@header.isVisible" Locked="true" Reorderable="false">
</GridColumn>
}
else
{
<GridColumn Field="@header.id" Title="@header.headerName" Width="150px"
OnCellRender="@((x) => OnCellRenderHandler(x, @header.id))"
Visible="@header.isVisible" Locked="@header.Locked">
</GridColumn>
}
}
</GridColumns>
<NoDataTemplate>
<p><strong style="color: var(--kendo-color-primary);">No Data Available.</strong></p>
</NoDataTemplate>
</TelerikGrid>