I can't find a way to customize the GridCheckboxColumn element.

GridColumn have a Template element but seem not applicable to GridCheckboxColumn.

My goal is to add a clickable icon next to selection check in the header.

How to solve?

Thanks

Hi, i use a TelerikGrid component and i would like to change the UI on grid selection change, so i have:

<TelerikGrid @ref="Grid" ... />

...

@if (Grid?.SelectedItems.Count() > 0)

{

<span>There are items selected!</span>

}

but the message is never displayed even when i select rows on grid.

I noted who if i bind the event SelectedItemsChanged then the SelectedItems property is updated correctly, and the message is diplayed:

<TelerikGrid @ref="Grid" SelectedItemsChanged="@OnSelectedItemsChanged" ... />

...

@if (Grid?.SelectedItems.Count() > 0)

{

<span>There are items selected!</span>

}

Why i need to bind SelectedItemsChanged event even if don't use it?

Thanks

Is there a way to add some delay to the TelerikTooltip component show event? I would like to force the user to hover in the element for a couple of seconds before he can see the tooltip.

Thanks,

Hi,

I have a WPF app that uses Telerik controls and Telerik charting.  This WPF app is now being re-written using Blazor WebAssembly using Telerik Blazor controls and Telerik Blazor charting.  Some of the existing WPF charts have custom context menus that allow users to toggle between displaying the charts with values or displaying the values as percentages.

It seems that the WPF RadChart control supports different format expressions:

https://docs.telerik.com/devtools/wpf/controls/radchart/features/format-expressions

The toggling is achieved by changing the series item label formats e.g.

    Private Sub PercentagesContextItem_Checked(sender As System.Object, e As System.Windows.RoutedEventArgs)
        For Each objMapping In RadChart1.SeriesMappings
            objMapping.SeriesDefinition.ItemLabelFormat = "#STPERCENT{P0}"
        Next
    End Sub

    Private Sub PercentagesContextItem_Unchecked(sender As System.Object, e As System.Windows.RoutedEventArgs)
        Dim strCurrencyMajorSymbol As String = WebContext.Current.User.CurrencyMajorSymbol
        For Each objMapping In RadChart1.SeriesMappings
            objMapping.SeriesDefinition.ItemLabelFormat = strCurrencyMajorSymbol & "#DATAITEM.ValueY{###,###,##0.00}"
        Next
    End Sub

Is it possible to achieve this in Blazor WebAssembly using the Telerik Blazor charting controls and if so, how?

Hi

When the user filters the grid component , I need an event to read new data (base on filter data) from web Api

thank you

Hi, what is the reason when TelerikTextArea with Autosize=true gets height 0px? I have component containing TelerikTextArea with autosize=true. Using this component directly in Page, TelerikTextArea appears OK (height in style gets correct px value) but using within another component it gets 0px. TelerikTextArea is disabled in this case but when enabled, the same issue (however, after any change/keypress, height gets correct).

Best regards

Konrad

Hi,

I have a grid and sometimes at random intervals I get an error "System.InvalidOperationException: TelerikValidationComponent requires a cascading parameter of type EditContext. You can use Telerik.Blazor.Components.TelerikValidationTooltip`1[System.Object] inside a EditForm or TelerikForm".

This is during an edit/update of values.

I use blazor server side
net5.0
telerik ui for blazor 2.27

Is there a way that I can change attributes on the rendered elements of the Menu and PanelBar components?  I am testing them out of the box with NVDA and JAWS screen readers, and running into issues with how they are read.  I believe part of the issue is how the aria-attributes are being rendered on the controls.

I've been looking at the aria best practices for Menubars (menu equivalent) and TreeViews (PanelBar equivalent), and their recommended approaches for implementation differ from the Telerik component implementations.  For example, on the menu, the the menuitem role is added to an <a> within the <li> tags, and the role of the <li> tags is is set to none.  This seems to work a lot better with NVDA interpreting the component.

The same thing can be said with the PanelBar, setting the <li> role to none when the node contains the <a> element, and the <a> gets a role of treeitem.

Here are the 2 best practices examples I'm referring to:

https://www.w3.org/TR/wai-aria-practices-1.1/examples/treeview/treeview-2/treeview-2a.html

https://www.w3.org/TR/wai-aria-practices-1.1/examples/menubar/menubar-1/menubar-1.html

All that being said, is there some way for me to change these attributes on the component when rendering? I know that there are templates, for me to handle the individual items, and that would take care of the <a>, but I don't see a way to adjust the <ul> and <li> elements rendered automatically by the control.

Also, all of the demos for keyboard support use an ALT-W hotkey.  I can't see where that is set up in the demos, so I could change to a different key if I would like to.  How would I do that?

I've created a generic TelerikGrid component that can handle any model is pass onto it. However, because of this, I cannot enable AutoGenerateColumns, since the model is not specified when the grid is being initialized. Instead, I have to manually define the columns using a variation of the example provided here: https://github.com/telerik/blazor-ui/blob/master/grid/binding-to-expando-object/BindingToExpandoObject/Pages/AutoGeneratedColumns.razor

@inject LocalStorageService _localStorage
@inject GenericHttpEntityService _entityService

@typeparam TItem

<div style="position: relative; width: 100%; min-height: 400px;">
    <TelerikLoaderContainer OverlayThemeColor="light" Visible="@(!IsDoneLoading)"
                            Text="@null" Class="initial-data-loader">
        <Template>
            <TelerikLoader Type="LoaderType.Pulsing" Size="LoaderSize.Large"></TelerikLoader>
        </Template>
    </TelerikLoaderContainer>

    <TelerikGrid Data="@GridData"
                 @ref="@Grid"
                 Height="460px"
                 RowHeight="60"
                 PageSize="10"
                 Pageable="true"
                 Sortable="true"
                 Resizable="true"
                 FilterMode="GridFilterMode.FilterMenu"
                 EditMode="GridEditMode.Popup"
                 OnRead="@ReadEntity"
                 OnStateInit="@((GridStateEventArgs<object> args) => OnStateInitHandler(args))"
                 OnStateChanged="@((GridStateEventArgs<object> args) => OnStateChangedHandler(args))">
        <GridColumns>
            @if (GridData != null && GridData.Any())
            {
                var firstItem = GridData.First();
                var dictionary = firstItem.GetType().GetProperties().ToDictionary(prop => prop.Name, prop => prop.GetValue(firstItem, null));

                foreach (var (key, value) in dictionary)
                {
                    if (value == null)
                    {
                        continue;
                    }

                    <GridColumn Field="@key" FieldType="@value.GetType()"></GridColumn>
                }
            }
        </GridColumns>
    </TelerikGrid>
</div>


@code {
    // Grid data
    private List<object> GridData { get; set; } = new();
    private int Total { get; set; }

    // Loading
    bool IsDoneLoading { get; set; }

    // Grid state
    TelerikGrid<object> Grid { get; set; }
    string StorageKey { get; set; }

    // Parameters
    [Parameter]
    public bool MaintainState { get; set; }
    [Parameter]
    public TItem Entity { get; set; }

    protected override void OnInitialized()
    {
        StorageKey = $"{typeof(TItem).Name}GridState";
    }

    private async Task ReadEntity(GridReadEventArgs args)
    {
        var data = await _entityService.GetAll<TItem>(args.Request);

        GridData = data.Records.Cast<object>().ToList();
        Total = data.Total;

        IsDoneLoading = true;
    }

    async Task OnStateInitHandler(GridStateEventArgs<object> args)
    {
        if (!MaintainState) return;

        try
        {
            var state = await _localStorage.GetItem<GridState<object>>(StorageKey);
            if (state != null)
            {
                args.GridState = state;
            }
        }
        catch (InvalidOperationException)
        {
    // The JS Interop for the local storage cannot be used during pre-rendering
    // so the code above will throw. Once the app initializes, it will work fine.
        }
    }

    async void OnStateChangedHandler(GridStateEventArgs<object> args)
    {
        if (!MaintainState) return;

        await _localStorage.SetItem(StorageKey, args.GridState);
    }
}

The problem with this is that the visibility of the columns can't be defined in the model with annotations like [Display(AutoGenerated = false)]. Is there any way to do what I want to achieve here?