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?
Greetings,
When using single selection mode, a row can be selected either by clicking the checkbox or by clicking on the rest of the row. There is no difference at all. Now, let's say I have a grid with multiple selection mode enabled, e.g.:
<TelerikGrid Data="listOfFoos" SelectionMode="GridSelectionMode.Multiple">
<GridColumns>
<GridCheckboxColumn SelectAll="true" SelectAllMode="GridSelectAllMode.All" />
<GridColumn Field="@nameof(Foo.Name)" Title="Name" />
</GridColumns>
</TelerikGrid>
public class Foo {
public string Name { get; set; }
}
public List<Foo> listOfFoos = [ new Foo{Name="First"}, new Foo{Name="Second"}, new Foo{Name="Third"} ];
When we click an unselected row, the behavior varies depending on where we click exactly:
This notably makes multiple selection impossible if we click on the row but not on the checkbox and gives the impression we are using single selection mode. It is especially strange if we consider the existence of the CheckBoxOnlySelection parameter of <GridCheckboxColumn> whose name suggests we can select using the rest of the row by default.
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
Greetings,
I find input adornments very useful. However I noticed that when I click them, the control doesn't get the focus. E.g., with this code:
<TelerikTextBox>
<TextBoxPrefixTemplate>
First name
</TextBoxPrefixTemplate>
</TelerikTextBox>
Clicking on First name doesn't do anything. I would expect the control to be focused when I do that.
You will find an image in attachment showing a green area that, when clicked, brings focus on the textbox. Input adornment is in dark gray. I'm using it as a label for the control but even if it was simply an icon, it would be strange to not be able to focus on the control when clicking it.
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>
Hi Support Team,
in our project we are using Telerik Chart and has required to update theme of chart from dark to light and light to dark.
telerik chart in child razor page and dark/light button in mainlayout.razor file but telerik chart updating theme when click on button exist telerik chart razor page. as below link it is an existing issue.
please advice how to resolve the issue.
Hi,
This kind of behavior causes duplicate OnRead calls for the same range. If the OnRead method invokes a request to the API it will result in duplicate requests with the same range.
Hi,
During grid initialization I have duplicate OnReadMethod call. I dynmaically set LoadGroupsOnDemand parameter. When LoadGroupsOnDemand is false and when I skip the second call (I shouldn't do any extra logic to calculate the call number anyway) it works fine. If LoadGroupsOnDemand is true I have to call it twice. With early ending of first call, second OnRender call won't be done. If I do "return" at the begining of second call it returns me an empty grid.
Similar issue to this one: https://feedback.telerik.com/blazor/1442276-onread-called-twice-on-initialization
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:
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