I've been looking at your Keyboard Navigation page:
https://demos.telerik.com/blazor-ui/grid/keyboard-navigation
If you are navigating in the Grid and arrow over to the "+" sign and press ENTER it expands the Details. Then you can press TAB to access the button within the details. Great. Your demo works fine.
However, on my grid, I have another grid in my Details section. I would like to be able to expand the Details section and then TAB into those details so I can access the link in the header of the grid, and also be able to use arrow keys to navigate around this sub grid. Well, honestly MOSTLY I just wanted to be able to tab to the "View Checkout History" link within the Details grid. See attached screenshot.
However, pressing TAB after expanding the details simply moves the focus to the first button in the next column of that row. It doesn't go into the Details section like your web demo does for a button.
Please expand your Keyboard Navigation capabilities to allow more navigation into the Details section other than just a button like your demo shows. I'll bet a lot of people probably have sub-grids within their details section.
Thanks!
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.
This seems to be a regression in this version. I cannot find an open issue on it. I think it's the same as this issue.
Here is a REPL link with the issue recreated. The bug happens the second time you open the dialog. You can see on the first close of the dialog that the parent window z-index is increased by 2. Then the second time you open the dialog the z-index is less than it's "parent" component.
Please link me to the current issue if there is an open duplicate.
Kind regards,
Linda
Dear all,
Please, Can you send the source code for this template with Arabic language https://demos.telerik.com/blazor-coffee/
Please add Arabic translate from right to left automatic when select Arabic language
Hello,
after uprading fron 7.1.0 to version 8.0.0
on IOS v 16.2, or any version before 17, telerik ui stopped working with this error after navigating between pages:
Microsoft.JSInterop.JSException: Could not find 'TelerikBlazor.initMediaQuery' ('TelerikBlazor' was undefined).
even, when mediaquery is not present at the 2 pages between navigating occurs.(login->landing page)
what iam tried on NEW clean device(so no caching troubles):
- changing order of scripts in app.razor
- adding defer
- addin autostart=false + DOM event
https://www.telerik.com/blazor-ui/documentation/getting-started/what-you-need#javascript-file
- any kind of browsers(on ios everything is webkit-safari)
- independent test on external emulator ip12 ios 16.2
https://appetize.io/app/standalone_lahzvlutkzrno7sqs36cqlj5wy?device=iphone12&osVersion=16.2
attached examples are for comparing of descriped attemps to get it work - both failed. But on v7.1.0, works ok - both.
Is there any breaking changes, which must be modified to get it working?
Thanks
Hello,
i am trying to add a Clear Button inside the DropDownList-Component.
I tried to follow the instructions provided here: How do I add a Clear button to a DropDownList? in UI for Blazor | Telerik Forums respectiveley here: Telerik REPL for Blazor - The best place to play, experiment, share & learn using Blazor.
But unfortunateley, the button is never inside the component. It's always next to it or under the component.
In your example provided above, the button is inside the component.
I would love to have any solution for this one. A clear button is needed quite often.
I also have attached our custom component, where we use the Telerik DropDownList Component.
Thank you
I noticed that when the ReadTimeout property of the FileSelect's FileInfoStream is read, the code seem to block completely.
You will find a Blazor Web App project attached to this ticket showcasing the issue.
So the user would have something like: 'Cupcakes (12 count), Mozzarella Cheese - Kraft, ...'
So the autocomplete would filter the string to find the part after the last comma and use that to search, but when the user finds their item and selects it, it needs to append to the string (and add a comma) and not overwrite it. Then continue the cycle.
Attempting to use OnChange does not allow for this to happen. On selection of a dropdown item, it will overwrite the string entirely.
While working on how to connect the filters together, I noticed that the clear button can gets the later part of the CompositeFilterDescriptor stuck in the grid.
Reproducible example: https://blazorrepl.telerik.com/wzuRPRvB00Vlj1Ac28
With the current configuration of the repl, filtering using only the TelerikCheckBoxListFilter and clicking filter will filter the column as expected, and clicking clear will blank out the checklist but won't reset the grid's filtering from those checkboxes until after ticking a checkbox and clicking filter, then unticking all checkboxes and clicking filter again. If the checkbox gets used then the clear button gets clicked, clicking the filter button after using the TelerikFilter without any checkboxes checked will filter based on the checkboxes the grid remembers ANDed with the new values from the TelerikFilter, again until the checkbox gets used and then manually emptied without using the clear button.
If the order of _textFilterValueInternal and _checkFilterValueInternal in the FilterDescriptors list get reversed, then the grid's filter memory issue gets transferred to the TelerikFilter meaning the issue is presumably with the grid itself. Also, if you use one or more values in both filters, then the clear button works as intended if there weren't already filters stuck inside the grid.
The clear button works as expected if filtering with both the filter and the checklist before clearing the filter.
Example images:
Start:
Check some boxes:
Filtered:
Open filter menu and click "Clear":
Re-open the filter menu:
New filter:
Click "Filter":
Re-open filter menu:
Click "Clear" button again:
can you provide a initial File click event handler attribute?
I want the user to be able to click on an initial file to download the file.
Hi there,
I have a TelerikGrid with a DateTime column. I use a custom FilterEditorFormat which is localizable depending on the user settings, e.g. "dd/MM/yyy HH:mm:ss". Unfortunately, any '/' in the date component is always replaced by the current culture's DateSeparator. Using any other separator works, e.g. '-'.
Expectation: Use the FilterEditorFormat without modification, unless it's a standard format string like "g" or "D".
I already traced it down to Telerik's FormatHelper class and it seems like a quick fix.
Steps to reproduce:
- Create a TelerikGrid with a DateTime column and a FilterEditorFormat as shown above.
- If required, change the DateSeparator to anything else but '/'.
- Run and open the filter dialog
Please let me know if you need any additional information.
Best regards
Andreas
Grids honor the [DisplayFormat(DataFormatString ... )] annotation for column content, but the FilterMenuType.CheckBoxList filter menu and the TelerikCheckBoxListFilter component don't. This is particularly noteworthy for formatting that truncates the contents such as DateTime which frequently tracks data smaller than user's care about, which can generate many visually identical checkboxes. To go along with the requested change, it would be nice if the filter matched off of the DisplayFormat string considering that is what the user sees and would therefore be referencing, since again, many DataFormatStrings can truncate data.
Because the TelerikCheckBoxListFilter component requires the field to match the data type of the grid's field, there isn't a way for the programmer to choose to show the filter menu with a checklist that matches the displayed values without building a fully custom FilterMenuTemplate with their own foreach loop and then figuring out a way to construct a CompositeFilterDescriptor filled with bracketing FilterDescriptors to account for the range of matching values. This is doubly troublesome since using the structure of CompositeFilterDescriptors needed to do that is not supported in the FilterMenuTemplate without also having to override the FilterMenuButtonsTemplate.
Generally speaking, it would make more sense to the users if the default options in the filter logically and visually matched with the default displayed values.
Reference material:
Grid column contents: https://www.telerik.com/blazor-ui/documentation/components/grid/columns/display-format
Checkbox List: https://www.telerik.com/blazor-ui/documentation/components/grid/filter/checkboxlist
Alternate FilterDescriptor shapes not supported: https://feedback.telerik.com/blazor/1681745-clear-button-in-grid-filtermenu-not-properly-clearing-custom-filter
Example Repl: https://blazorrepl.telerik.com/mJOSuxQw117zM1h321
Hello,
I am currently reworking an old webapp with server-side Blazor and Telerik UI for Blazor. I noticed that TelerikDialogs kind of break the rerendering of child components if the TelerikDialog and all of its content are placed inside their own component:
<PageTitle>Home</PageTitle>
<EditWithDialog @ref="EditDialogInside"></EditWithDialog>Where EditWithDialog is (basically) defined as follows:
<TelerikDialog @ref="Dialog" @bind-Visible="@Visible">
<DialogTitle>
Edit ID
</DialogTitle>
<DialogContent>
<div>
<div>TelerikDialog inside of component</div>
<TelerikTextBox Value="@AppState.CustomerString" OnChange="@SetID" Width="300px"></TelerikTextBox>
<TelerikButton OnClick="@GenerateID">Generate ID</TelerikButton>
</div>
</DialogContent>
<DialogButtons>
<TelerikButton OnClick="@ToggleVisible">Close</TelerikButton>
</DialogButtons>
</TelerikDialog>
However, if the TelerikDialog is placed on a page and its content is placed inside of its own component, everything works as expected:
<PageTitle>Home</PageTitle>
<TelerikDialog @bind-Visible="@Visible">
<DialogTitle>
Edit ID
</DialogTitle>
<DialogContent>
<div>
<div>TelerikDialog outside of component</div>
<EditWithoutDialog @ref="EditDialogOutside"></EditWithoutDialog>
</div>
</DialogContent>
<DialogButtons>
<TelerikButton OnClick="@ToggleEditOutside">Close</TelerikButton>
</DialogButtons>
</TelerikDialog>EditWithoutDialog.razor:
<TelerikTextBox Value="@AppState.CustomerString" OnChange="@SetID" Width="300px"></TelerikTextBox>
<TelerikButton OnClick="@GenerateID">Generate ID</TelerikButton>I am using the state-container approach described here, but the problem persists when using two-way binding via parameters.
In this scenario, putting the dialog directly on the page is not a problem, but with larger applications where there's possibly multiple dialogs and a lot more content on one page, this can become very unwieldy and confusing. Considering Blazors emphasis on making components reusable, this also prevents proper use of a customized dialog component that uses the TelerikDialog as a base.
I have attached a small project that implements both versions on a single page for you to test. I have tested using both Edge and Firefox.
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>
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
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
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).
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>