Horizontal scrolling in the grid works when its width is set to a fixed value (px, rem, etc.). But the h scroll disappear when a percentage is assigned to the width of the grid.
This seems to be a known 'feature' to Telerik:
A sensible behaviour is to have the horizontal scrolling enabled and at the same time being able to set the grid to percentage width.
When trying to use autocomplete, it falls short of what I would like to have. I presumed this to be on feature parity with MudBlazor offerings.
What I used before with mudautocomplete: label, value, style, reset value on empty text, coerce text, to string func, search func, required, required error, value changed, virtualize, max items. The way I use autocomplete box, is that user searches against a list of hundreds of thousands of elements, component querys against method, get's filtered reply that is displayed. When chosen, it binds the guid value, not the string. User also cannot submit their own option, only one from provided list.
Telerik autocomplete box does not provide those features, what other workarounds are there besides running with Mudblazor for time being?
How can I set the tooltip to show/hide programmatically? right not it only supports hover or click show action.
---
ADMIN EDIT
You can Follow a way to hide the tooltip programmatically here: https://feedback.telerik.com/blazor/1476364-close-tooltip-via-method.
You can find a way to hack the show event by triggering a JS click in this KB article: https://docs.telerik.com/blazor-ui/knowledge-base/common-validation-error-in-tooltip.
Here is an example that shows how you can trigger the tooltip to show for a particular target:
@inject IJSRuntime _js
<script suppress-error="BL9992">
function triggerTooltip(index, selector, showOnClick) {
var targets = document.querySelectorAll(selector);
if (targets && targets.length >= index) {
var desiredTarget = targets[index];//feel free to get the desired target in any other way
setTimeout(function () {
var evt = document.createEvent('MouseEvent');
var evtToSimulate = showOnClick ? "click" : "mouseenter";
evt.initEvent(evtToSimulate, true, false);
desiredTarget.dispatchEvent(evt);
}, 20);
}
}
</script>
<TelerikButton OnClick="@( async () => await TriggerTooltip(0) )">Trigger tooltip for the first target</TelerikButton>
<TelerikButton OnClick="@( async () => await TriggerTooltip(1) )">Trigger tooltip for the SECOND target</TelerikButton>
<TelerikTooltip TargetSelector="@ttipTargetSelector" ShowOn="@ShowOnSetting">
</TelerikTooltip>
<p id="my-targets">
<strong title="what is 'lorem ipsum'?">lorem</strong>
ipsum dolor
<strong title="is this a real word?">sit</strong>
amet.
</p>
@code{
string ttipTargetSelector = "p#my-targets [title]";
TooltipShowEvent ShowOnSetting { get; set; } = TooltipShowEvent.Click;
async Task TriggerTooltip(int targetIndex)
{
await _js.InvokeVoidAsync("triggerTooltip",
targetIndex,
ttipTargetSelector,
ShowOnSetting == TooltipShowEvent.Click ? true : false
);
}
}---
--- 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
The OnRowClick event of the TelerikGrid is only triggered when clicking the row with the left mouse button as discussed on the following forum post:
https://www.telerik.com/forums/grid-onrowclick-event-for-middle-mouse-button-click
Please add support to the OnRowClick event to trigger it for a middle mouse button click (and pass the mouse button clicked in the eventargs) or add a separate OnRowClick event that is triggered on middle mouse button click.
I would like to be able to stack series on a range chart. Currently the best hack recommended by Telerik is to show two charts on top of one another, with no interactivity or legends, https://blazorrepl.telerik.com/wHPclTFm28WuoSOp57.
Source: Is it possible to 'stack' series in a Range Column Chart? in UI for Blazor | Telerik Forums
Thank you
Hi,
I have a page (a billing page) that has a wizard on it, the wizard contains multiple steps, and each step contains a custom component. Each component has a validation mechanism. When I open an invoice, I want to provide the user with a message to let them know if the invoice can be processed. To do this, I need to invoke the validation mechanism of all the steps, which is not possible without opening them all to have an existing instance.
Regard
Al
When I paste a table from Word or Excel in the Editor, some of the formatting is lost. The Kendo React Editor supports most of the formatting and I would like to see the same behavior for Blazor.
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
Looking through the examples I can't find one with SelectionMode="GridSelectionMode.Multiple" and using a RowTemplate.
ADMIN EDIT: This is not a bug in the component, an example of how this can be implemented by the app is available in the comments.
I'm not sure what I should be binding my checkbox to so it accurately reflects selection state.
From the RowTemplate Example adding SelectionMode:
<TelerikGrid Data=@GridData
@bind-SelectedItems="@SelectedItems"
SelectionMode="GridSelectionMode.Multiple" Height="@Height">
<RowTemplate Context="product"> @*Trying to inspect what is generated in the examples I came up with this, but not sure what to bind to checked*@
<td role="gridcell" colspan=0 data-col-index="0">
<span>
<input class="k-checkbox k-grid-checkbox telerik-blazor" type="checkbox" />
</span>
</td><td> <img class="rounded-circle" src="@($"images/{product.ProductId}.jpg")" alt="Alternate Text" /> @product.ProductName </td> <td> @(String.Format("{0:C2}", product.UnitPrice)) </td> </RowTemplate> <GridColumns> <GridColumn Field=@nameof(Product.ProductName) Title="Product Name" /> <GridColumn Field=@nameof(Product.UnitPrice) Title="Unit Price" /> </GridColumns> </TelerikGrid>
Is it possible to allow the adding of aria-label, aria-labelledby, and aria-describedby to the TelerikForm element?
I noticed that aria-labelledby and aria-describedby were added to input elements here: https://feedback.telerik.com/blazor/1531788-allow-setting-aria-labelledby-and-aria-describedby-attributes-to-the-telerik-inputs - so I assume they could be added to TelerikForm too?
Currently, there doesn't seem to be a way to add those attributes, whereas with the default EditForm we can, and so we're unable to leverage the TelerikForm if we want to provide better descriptive information to non-sighted users with a label and description of the form.
Ideally, we should be able to render any HTML element with global attributes: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes , which would include any of the aria-* tags.
I understand there's a desire to have a locked-down API for components and not allow arbitrary attributes, but I think certain attributes core to accessibility the users of the library should have some ability to manipulate.
If you want to validate a form using FluentValidation right now you must rely on a third party validator like the ones suggested in the FluentValidation documentation.
We have noticed most of these libraries have not been updated in a long while despite issues being opened and pull requests pending:
- Blazored.FluentValidation - Last release: Dec 31, 2022
- Blazor-Validation - Last release: Jun 30, 2023
- Accelist.FluentValidation.Blazor - Last release: Nov 17, 2020
- vNext.BlazorComponents.FluentValidation - Last release: Sep 9, 2022
Also, we noticed that these libraries don't fully implement all the features that FluentValidation has to offer.
Ex: We wanted to use the Rulesets to validate fields partially when the input has changed (like maximum lenght or regexes) and then validate the more complex rules like "unique in DB" after the "submit" button of the form has been pressed but it seemed like it would run all validations ignoring the rulesets.
Other components libraries have already implemented FluentValidation natively, could Telerik consider implementing this aswell so we can stop relying on third party libraries and have a better implementation of the FluentValidation?
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
Hi,
I do not think this is a feature yet I am adding it here, so won't put pressure on developers. The problem is that when I add a TelerikGrid inside a TelerikTabStrip it does not adjust well to changes of browser resizing. I have made different ways, like making the siez 100% or dynamic sizing and changing CSS, but each of them may break something. It would be crucial for us if the grid would change well to changes in TelerikTabStrip when its width property is 100%.
Thank you
Hi!
Would it be possible to expose a focus in/out (or similar) functionality for the Treeview? We currently use the component for eyebrow navigation menus, and it would be nice to have the ability to close trees when the user clicks somewhere else. We've tried doing an onclick for the body of the site, which works but also interferes with other clicks on the page. Thanks!
It seems to me on a greenfield app where someone wants the ability to switch themes, 99% of the time they would want it site wide, not just on your components. I'd venture a guess that most of us c# .Net devs moving to Blazor, don't have Ed C and your organization's sass skills. If that were built into a template used by your Visual Studio Extension Create Project Wizard it would allow us to focus more on the business logic and probably increase adoption of Theme Builder Pro
Thanks,
Kurt
Hi,
I'm in the process of implementing a form in a Window component and would like the content to remain present in the DOM between hiding and showing of the window. I noticed that there's a line in the documentation where it states that PersistContent will allow the content of the window to remain in the DOM whenever the window is minimized. I recommend this be extended to the Visibility of the form, not just minimizing, as to create a more coherent approach.
I did come across this post here where it gives a description of how the above is achieved. This is a very inelegant approach as the consumer of the framework has to manually implement stuff which should be provided by the framework. The suggested approach also prevents the developer from opening multiple windows at once, which might be an issue in some cases.
The DropDownList component is too basic to be used in complex environments. In the real world, no one is binding DropDownLists to List<string>, they are binding to complex datatypes, and the ability to do so has been present in MVC apps for a long time.
Given the following code, it is possible to bind to a List<object>, and two-way bind to the object that was selected.
<select @onchange="@OnChangedAsync">
<option></option>
@if (DataSource != null)
{
@foreach (var item in DataSource)
{
<option @key="item" value="@optionValueFunc(item)" selected="@(item.Equals(SelectedItem))">@optionTextFunc(item)</option>
}
}
</select> #region Private Members
private Func<TSource, object> optionTextFunc;
private Func<TSource, object> optionValueFunc;
private TSource selectedItem = default(TSource);
#endregion
#region Public Parameters
/// <summary>
/// A List of objects to bind against.
/// </summary>
[Parameter]
public IList<TSource> DataSource { get; set; } = new List<TSource>();
/// <summary>
/// A lambda expression referencing the property containing the text to display to the end user. Example: @(c => c.DisplayName)
/// </summary>
[Parameter]
public Expression<Func<TSource, object>> OptionText { get; set; }
/// <summary>
/// A lambda expression referencing the property containing the value for this object, usually an identifier. Example: @(c => c.Id)
/// </summary>
[Parameter]
public Expression<Func<TSource, object>> OptionValue { get; set; }
/// <summary>
/// The item from the <see cref="DataSource" /> that has been selected.
/// </summary>
[Parameter]
public TSource SelectedItem { get; set; }
/// <summary>
/// The callback event required for two-way binding.
/// </summary>
[Parameter]
public EventCallback<TSource> SelectedItemChanged { get; set; }
#endregion
private async Task OnChangedAsync(ChangeEventArgs changeEventArgs)
{
await UpdateSelection(DataSource.FirstOrDefault(c => optionValueFunc(c).ToString() == changeEventArgs.Value.ToString()));
}
private async Task UpdateSelection(TSource item)
{
selectedItem = item;
await SelectedItemChanged.InvokeAsync(selectedItem);
}
protected override async Task OnInitializedAsync()
{
if (optionTextFunc == null && OptionText != null)
{
optionTextFunc = OptionText.Compile();
}
if (optionValueFunc == null && OptionText != null)
{
optionValueFunc = OptionValue.Compile();
}
await Task.CompletedTask;
}Would really appreciate it if you would consider adding this to the next release.
I'm finding it hard to follow what month is what when using multi month views. It would be better if the month appeared above each month view. Where can I put a feature request in for this?