Telerik Forums
UI for Blazor Forum
1 answer
108 views
so if you have several options to select from in pager & selected non default one (100 - default, 200 - selected) than filter or sort grid, the value in pager will be reset to default 
Dimo
Telerik team
 answered on 29 Sep 2021
1 answer
161 views

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?

 

 

 

Marin Bratanov
Telerik team
 answered on 28 Sep 2021
1 answer
115 views

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

Marin Bratanov
Telerik team
 answered on 28 Sep 2021
1 answer
656 views

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

 

Marin Bratanov
Telerik team
 answered on 28 Sep 2021
1 answer
434 views

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

 

Hristian Stefanov
Telerik team
 answered on 28 Sep 2021
2 answers
266 views

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?

Hristian Stefanov
Telerik team
 answered on 28 Sep 2021
1 answer
558 views

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?

Nadezhda Tacheva
Telerik team
 answered on 28 Sep 2021
2 answers
320 views

I have built my own component, GenericGrid, which under the hood uses a TelerikGrid. The GenericGrid takes TItem as typeparam which gets passed onto a generic HTTP method that retrieves records from an OData API based on the TItem that gets passed on.

GenericGridTest.razor:

@page "/GenericGrid" @using IndiciaStage.Domain.Entities <GenericGrid TItem="Employee"></GenericGrid> @code { }

 

GenericGrid.razor:

@using Indicia.Grid.Services
@using System.Collections.ObjectModel
@using IndiciaStage.Domain.Entities

@inject LocalStorageService _localStorage
@inject GenericHttpEntityService _entityService

@typeparam TItem

<TelerikGrid @ref="@Grid"
             AutoGenerateColumns="true"
             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>
        <GridAutoGeneratedColumns />
    </GridColumns>
</TelerikGrid>


@code {
    // Grid data
    private List<TItem> GridData { get; set; } = new();
    private int Total { get; set; }
    
    // Parameters
    [Parameter]
    public TItem Entity { get; set; }

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

        GridData = data.Records;
        Total = data.Total;

        StateHasChanged();
    }

 

EntityListResponse.cs (based on the OData Grid sample on GitHub, made generic):

    public class EntityListResponse<T>
    {
        [System.Text.Json.Serialization.JsonPropertyName("value")]
        public List<T> Records { get; set; }
        
        [System.Text.Json.Serialization.JsonPropertyName("@odata.count")]
        public int Total { get; set; }
    }

 

GetAll method in GenericHttpEntityService.cs:

        public async Task<EntityListResponse<T>> GetAll<T>(DataSourceRequest request)
        {
            var name = typeof(T).Name;
            var baseUrl = $"{name}s?";

            var requestUrl = $"{baseUrl}{request.ToODataString()}";

            var requestMessage = new HttpRequestMessage(HttpMethod.Get, requestUrl);
            requestMessage.Headers.Add("Accept", "application/json");
            var client = HttpClient.CreateClient("IndiciaStageApi");
            var response = await client.SendAsync(requestMessage);

            if (response.IsSuccessStatusCode)
            {
                var body = await response.Content.ReadAsStringAsync();

                var options = new JsonSerializerOptions();
                options.Converters.Add(new JsonStringEnumConverter());
                var oDataResponse = JsonSerializer.Deserialize<EntityListResponse<T>>(body, options);

                return oDataResponse;
            }
            else
            {
                throw new HttpRequestException(
                    "Request failed. I need better error handling, e.g. returning empty data.");
            }
        }

 

What I want to achieve is for the grid columns to be generated automatically based on the object type, Employee in this case, and the retrieved data to be bound to the grid. Sadly, this doesn't seem to work

As you can see, the JSON is deserialized correctly into an EntityListResponse of type Employee. However, I don't know how to bind the data to the grid and autogenerate its corresponding columns. I tried adding Data="@GridData" to the TelerikGrid, but that returns an error because the type of GridData is List<TItem>.

Is there any way to implement what I'm trying to achieve?

Radko
Telerik team
 answered on 28 Sep 2021
1 answer
1.4K+ views

Hi,

I was wondering what is the best approach to strip out the HTML of a text field that is displayed in a Blazor Datagrid.

I tried using the Template feature along with MarkupString as shown below but it just returns the name of the field rather than the contents of it.

<TelerikGrid Data="Model.CurrentPageData" TotalCount="Model.TotalItemCount" OnRead="ReadItems" Pageable="true" PageSize="10" Groupable="true" Sortable="false">
    <GridColumns>
        <GridColumn Field="@(nameof(Escalation.EscalationId))" Title="Escalation ID" Width="120px" />
        <GridColumn Field="@(nameof(Escalation.CaseType))" Title="Type" Width="120px" />
        <GridColumn Field="@(nameof(Escalation.SummaryOfRequest))" Title="Request Summary" Width="120px" />
            <Template>
                    @((MarkupString)(nameof(Escalation.SummaryOfRequest)))               
            </Template>
        </GridColumn>
        <GridColumn Field="@(nameof(Escalation.PrimaryBu))" Title="Primary BU" Width="120px" />
        <GridColumn Field="@(nameof(Escalation.CreatedDate))" Title="Created" DisplayFormat="{0:dddd, dd MMM yyyy}" Width="120px" />
    </GridColumns>
</TelerikGrid>


Matthias
Top achievements
Rank 5
Bronze
Bronze
Iron
 answered on 28 Sep 2021
2 answers
1.2K+ views

 

Currently, I am using Listview for binding, Whereas I couldn't able to bind the selected Value in the list.

Hence, I need Dual ListBox for moving data from one listbox to another one.

Could you please on this.

 

 

Thanks

Vishnu

Nadezhda Tacheva
Telerik team
 answered on 27 Sep 2021
Narrow your results
Selected tags
Tags
+? more
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?