Whenever I add TelerikGrid to a razer page my intellisense breaks and leaves everything white. I'm using Telerik UI for Blazor v4. The other Telerik components are fine but this one kills it.

Hi

Telerik Autocomplete does not have a ValueTemplate.

Mostly the Value is an Id, which in most examples does not make sense to be displayed to the User when selected.

 

Kind regards

Nicolas

 

The default `ButtonType` looks for any matching form and triggers validation and submission of the form.
This can very quickly lead to unintended behaviour.

The default should be a regular button that does not invoke any additional functions.

The Visible parameter removes the underlying render fragment when set to false.

Please expose APIs (maybe Show/Hide methods) to keep the DOM in tree but only modify visibility / display CSS attributes to hide/show the telerik window element. This would allow developer to retain content / state of the window which may need to be displayed very frequently.

Title: WCAG 4.1.2: Ensures elements with ARIA roles have all required ARIA attributes (.k-splitbar)
Tags: Accessibility, WCAG 4.1.2, aria-required-attr

Issue: Ensures elements with ARIA roles have all required ARIA attributes (aria-required-attr - https://accessibilityinsights.io/info-examples/web/aria-required-attr)

Target application: xxx

Element path: .k-splitbar

Snippet: <div tabindex="0" role="separator" class="k-splitbar k-splitbar-vertical k-splitbar-draggable-vertical">

How to fix: 
Fix any of the following:
  Required ARIA attribute not present: aria-valuenow

Environment: Microsoft Edge version 111.0.1661.41

====

This accessibility issue was found using Accessibility Insights for Web 2.37.3 (axe-core 4.6.3), a tool that helps find and fix accessibility issues. Get more information & download this tool at http://aka.ms/AccessibilityInsights.

 

=================== code ===============================

    <TelerikTabStrip TabPosition="Telerik.Blazor.TabPosition.Top" @ref="@TabStrip" Height="100%">
        @{
            foreach (var console in ViewModel.AvailableConsoles)
            {
                <TabStripTab Title="@console.Title" Disabled="@console.Disabled">
                    <div style="height:100%">
                        @RenderContent(console)
                    </div>
                 </TabStripTab>
            }
        }
    </TelerikTabStrip>

There is now a Visible parameter on TileLayoutItem but it's not included as part of the state which makes it inconvenient when saving/loading. Is there a technical reason for this or is visibility something that could be added to the state in a future update?

When I click on any item from the SplitButton dropdown list, it closes, until I release the key

Good Day,

I really like the ability to drag and drop between controls. I though feel very limited, by Telerik enforcing both controls to have the same underlying data model (or interface) as per this article.

How to Drag and Drop Different Models between Multiple Grids - Telerik UI for Blazor

What would really be great, if the "OnRowDrop" event could accept other data models. I have no particular view on how exactly this should be implemented. It should work for server and WASM environments.

An example could be, that the "dragged" row is of type object and not <TItem> and it is left to implementation code deal with different data models being dropped on the control.

        //Something like this

        private void OnRowDropHandler(GridRowDropEventArgs args)

        {
            if(args.Item is IParentSampleData)
            {
                GridData1.Remove((IParentSampleData)args.Item);
                InsertItem((IParentSampleData)args);
            }
            else if (args.Item is SomeOtherModel)
            { 
                 //Whatever is needed...
            }
        }

Kind regards,

Peter

 

If the Height parameter is not specified, in the Gantt tree list, every line after the number of lines of the initial display are not shown.

 

The steps are easy to reproduce:

Start from the official Gantt Demo in the REPL and simply remove the Height parameter from TelerikGantt.

If you do this, you will see that opening the children of the first and only element in the tree list will show everything correctly in the Timeline part (if no mistake) but doesn't show the children lines in the TreeList part.

 

Therefore, I believe, the Height parameter should become mandatory until we can allow the height of the Gantt to be dynamic without rendering issues.

Filter option switch back to default option (Contains) after entering value in the textbox. 

 

Example - 

- screenshot-1 - Select from filter option - Startswith ; Then, enter value in text box.

- screenshot -2 - After user enter first character , atomically filter option switch back to Contains (from startswith).  

 

 

I can't find a way to reliably set focus after a tab change.
In the sample below it first sets focus based on the OnAfterRenderAsync code, but switching to tab 2 and then going back I can't get it to set focus again.

I suspect its because there is no render type of event on a specific tab that I can hook into?
I have tried javascript and blazor and can't seem to figure a way around it.


@page "/test"

<TelerikTabStrip ActiveTabIndex="@TabActiveIndex" Height="87vh" Class="ct-tabstrip" ActiveTabIndexChanged="@TabIndexChanged">
<TabStripTab Title="Orders Search">
<input type="text" @ref=orderSearchTextBox id="test"/>
<br />
<input type="text" />
<br />
<input type="text" />
</TabStripTab>
<TabStripTab Title="Orders Updated Today">
<text>Tab 2</text>
</TabStripTab>
</TelerikTabStrip>

@code {
private ElementReference orderSearchTextBox;
private int TabActiveIndex;


protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
await orderSearchTextBox.FocusAsync();

}
}
public async Task TabIndexChanged(int NewIndex)
{
TabActiveIndex = NewIndex;
if (NewIndex == 0)
{
await orderSearchTextBox.FocusAsync();
}
}
}

Currently, the Splitbar of the TelerikSplitter is rather small.

It can be adjusted with CSS as shown here (https://blazorrepl.telerik.com/wnEfmyYp50ldIHsF13) but if the overall height of the page is large, the small arrow-icon that needs to be clicked in order to expand a collapsed SplitPane must be scrolled into view first.

It would be great to add alternative ways to expand a SplitPane, e.g. on a Double-Click on the Splitbar or maybe an additional Button.

https://demos.telerik.com/blazor-ui/form/templates

When you edit in Telerik Repl, you get a warning message:

What was weird though, is when I ran it from directly from the link in the documentation, I didn't get an error.  I made one small change to the code (swapped line 54 and 55 (just seeing if I could change the rendering order, which I can) and then I saw this warning.  But any change to the code generates the warning.

Peter

Please add the option for the Multiselect to filter the same way the DropDownList does. It's very odd & confusing for end users (and bad UX) in a UI toolkit for similar controls to do things in different ways. Can you please add the ability for the Multiselect control to filter items in the popup window the same way the DropDownList does with the nice filter text box.

My grid bind to ExpandoObjects, and I would like to implement a Group Header.

So I referenced these two documents
https://docs.telerik.com/blazor-ui/knowledge-base/grid-binding-to-expando-object

https://docs.telerik.com/blazor-ui/components/grid/columns/multi-column-headers

 

From the first document, it make sense to me that we need to set FieldType for each column that binds to ExpandoObject, but it seems this restriction also applies to the group header column, which does not make sense.

Foe example:

<TelerikGrid Data="@GridData"
             Pageable="true"
             Sortable="true"
             FilterMode="@GridFilterMode.FilterRow">
    <GridColumns>
        <GridColumn Title="Test Group Header">
            <Columns>
                <GridColumn Field="PropertyInt" Title="Int Column" FieldType="@typeof(int)" />
                <GridColumn Field="PropertyString" Title="String Column" FieldType="@typeof(string)" />
                <GridColumn Field="PropertyDate" Title="DateTime Column" FieldType="@typeof(DateTime)" />
            </Columns>
        </GridColumn>
    </GridColumns>
</TelerikGrid>

 

I get error:

 

I need to set FieldType on the "Test Group Header" column to an arbitrary value to get rid of this error.

 

I have been using Telerik Data Grid, When the total count of record in the grid is equals to the pagination options(5, 10, 20), the blank value is selected in the page size dropdown. I have total data record of 10, for the first time the page size is showing, when I select the 20 and again select 10 it disappears.

Repl demo link: https://blazorrepl.telerik.com/cROhmgvP088tMZDF58 

organizational Chart looking this feature in blazor 

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 don't understand the text in this yellow info box: "You can define a key for zooming only selection zooming is configured." Is there a word missing?

https://docs.telerik.com/blazor-ui/components/chart/pan-and-zoom/zoom#specifying-a-key-for-zooming

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?