(https://docs.telerik.com/devtools/wpf/controls/radgridview/filtering/basic)
(https://docs.telerik.com/devtools/winui/controls/raddatagrid/filtering/datagrid-overview)
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 )" />
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:
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.
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.
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
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
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.
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
Add support for DateOnly and TimeOnly properties to the ToODataString() method in the DataSourceExtensions namespace.
===
TELERIK NOTE
@Steven I forked this thread from the already complete feature request Provide support for DateOnly and TimeOnly structs for the respective pickers
Currently DateOnly and TimeOnly types are not supported by the ToODataString() method. As a result, they are serialized with the default ToString() method. Please use DateTime instead or implement a custom serialization method. Downloading our source code and using the built-in method as a base is also an option.
===
ORIGINAL POST
Would you have any updates regarding this support for early 2024?My main issue regarding this at the moment is:
- My Backend returns DTOs with DateOnly properties.
- I wish to use these properties in a grid
- So far... So good... We can see the items etc... But then...
- We want to filter these properties...
- When we get the OData query... Our DateOnly is not in the correct ISO format... As there's no support for those in DataSourceExtensions.cs
I already tried solving this by creating my own GridColumn type, but I'm afraid there's nothing I can do about the OData serialization without just writing our own DataSourceExtensions... At which point we're just making it confusing for other developers needing to include this...
public class DateOnlyGridColumn : GridColumn
{
private DateOnly? _filterValue;
public DateOnly? FilterValue
{
get => _filterValue;
set
{
if (_filterValue != value)
{
_filterValue = value;
StateHasChanged();
}
}
}
public DateOnlyGridColumn()
{
DisplayFormat = "{0:dd/M/yyyy}";
FilterMenuTemplate = FilterMenu;
FilterMenuButtonsTemplate = FilterButtons;
}
private RenderFragment<FilterMenuTemplateContext> FilterMenu => (context) => (builder) =>
{
builder.OpenComponent<TelerikDatePicker<DateOnly?>>(0);
builder.AddAttribute(0, "Value", FilterValue);
builder.AddAttribute(2, "ValueChanged", EventCallback.Factory.Create<DateOnly?>(this, (value) => FilterValue = value));
builder.CloseComponent();
};
private RenderFragment<FilterMenuTemplateContext> FilterButtons => (context) => (builder) =>
{
// Filter button
builder.OpenComponent<TelerikButton>(0);
builder.AddAttribute(1, "OnClick", EventCallback.Factory.Create<MouseEventArgs>(this, async () => await ApplyFilter(context)));
builder.AddAttribute(2, "ThemeColor", ThemeConstants.Button.ThemeColor.Primary);
builder.AddAttribute(3, "ChildContent", (RenderFragment)(childBuilder =>
childBuilder.AddContent(0, "Filter")));
builder.CloseComponent();
// Clear button
builder.OpenComponent<TelerikButton>(4);
builder.AddAttribute(5, "OnClick", EventCallback.Factory.Create<MouseEventArgs>(this, async () =>
{
FilterValue = null;
await context.ClearFilterAsync();
}));
builder.AddAttribute(6, "ChildContent", (RenderFragment)(childBuilder =>
childBuilder.AddContent(0, "Clear")));
builder.CloseComponent();
};
private async Task ApplyFilter(FilterMenuTemplateContext filterContext)
{
if (filterContext == null || string.IsNullOrEmpty(Field) || !FilterValue.HasValue)
return;
var filter = new FilterDescriptor
{
Member = Field,
MemberType = typeof(DateOnly),
Operator = FilterOperator.IsEqualTo,
Value = FilterValue.Value, //.ToString("o") Convert to ISO-8601 format
};
filterContext.FilterDescriptor.FilterDescriptors.Clear();
filterContext.FilterDescriptor.FilterDescriptors.Add(filter);
await filterContext.FilterAsync();
}
}
We need a formal, Accordion component. This is missing like a sore thumb !
The Accordion should be the first component in the component list.
Using the panel bar is not the same as the functionality of Accordion. So, do not mark this request as a duplicate of a panel bar enhancement request.
This is a simple component and I request you to prioritize and release it urgently in the next release.
Thanks.
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
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.
Hello together,
we are running into a problem with TelerikPdfViewer. When clicking the download button, download starts and performs properly.
BUT: the downloaded PDF file does not match the PDF that was provided via Data="@PdfData". On download something internally prepends some text to the PDF:
–€À³JS.ReceiveByteArray’Æ ‘¢%PDF-1.7 %úûüý 3 0 obj <</ca 1.00000 /AIS false >> endobj 5 0 obj
The original PDF file starts at "%PDF-1.7" (end of first line). That part before (including that "JS.ReceiveByteArray") was somehow added during the download workflow by Telerik. We ensured that the PDF data we provided to the viewer (via Data="@PdfData") ist valid. We did so by inspecting the byte[]-Array manually in the debugger as well as downloading it via a JS function to the client.
This is how we are using the TelerikPdfViewer. But the error occurs no matter if we are handling the OnDownload-Event (setting the filename) or not handlign that event at all (i.e. eliminating the OnDownload="@OnPdfDownload" completely)
<TelerikPdfViewer Data="@PdfData" Width="100%" Height="100%" Zoom="1m" OnDownload="@OnPdfDownload">
<PdfViewerToolBar>
<PdfViewerToolBarPagerTool />
<PdfViewerToolBarSpacer />
<PdfViewerToolBarZoomTool />
<PdfViewerToolBarSelectionTool />
<PdfViewerToolBarSearchTool />
<PdfViewerToolBarSpacer />
<PdfViewerToolBarDownloadTool />
<PdfViewerToolBarPrintTool />
</PdfViewerToolBar>
</TelerikPdfViewer>We use Telerik.UI.for.Blazor (6.2.0).
Thanks for your feedback on this issue and best regards!
Sebastian
After reading your documentation, it appears that the Pager Position enum only allows for the grid pager to be at the top OR the bottom of the grid.
It would be most excellent to allow it to be BOTH. For very large grids, it would be convenient for the user to see the grid at the very top, but if they do happen to need to scroll to the very bottom of the grid, seeing the pager component there would also be convenient for the user.
This is in regard to this page:
https://www.telerik.com/blazor-ui/documentation/components/grid/paging
Please add a .Both option to the PagerPosition enum that allows both Top and Bottom at the same time.
Thanks! :)
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!
=== EDITED BY TELERIK ===
When using nullable enums, their DisplayNameAttrute doesn't show in the Grid.
https://blazorrepl.telerik.com/QTOlwiaM456Yh9Xp33
The bug is related to Enum DisplayName attributes are ignored in view mode of the Grid
=== ORIGINAL POST CONTENT ===
Sample Code to reproduce the error:
https://blazorrepl.telerik.com/QzYPGLFj11s0rZwp47
If you change line 44 to a non-nullable field type, it crashes the grid with an error message in the CSS file. I have included the error message I get in my blazor app with the same code above, console then sources:
Within the grids, be able to filter and group using And & Or statements. The following is our design.
When a user hits the ENTER key at the end of their typing and expects the full text to be submitted, they potentially have partial text being submitted (depending on how quickly ENTER is hit). We know the general accepted solution is to set the DebounceDelay to zero, but we are using two-way binding with state management that results in a very laggy/delayed experience while typing is this is done.
Please allow pressing Enter or blurring the input to short-circuit the debouncing.
===
ADMIN EDIT
===
This request applies to all inputs - NumericTextBox, TextBox, TextArea, etc.