Questions on UI for Blazor Forum

1 answer

158 views

Alternating Grid Row Color when Using Small Grid Size Theme

My project's Theme Builder is set up to show an alternating color for the TelerikGrid rows. However, if I use a compact grid through Grid Sizing by setting Size="@ThemeConstants.Grid.Size.Small", the alternating row color disappears. How can I get the alternating rows when using the Small Grid Theme?

Grid

answered on 21 Mar 2024

1 answer

278 views

>.net 8 render modes Telerik Grid Blazor

Hello I have a grid which has a "Add" button which is defined in a GridBarToolBarTemplate which opens a pop up used for adding a new record displaying in the Grid.

With Blazor .Net 8 I am using Stream rendering to show the grid.

I now want to put the add button in a different component so I can use another "Interactive" rendering mode just for adding a new record

I have tried during this but it doesnt seem to work. Is this possible? and how do Iget it to work?

Thanks

Aj

Grid

answered on 21 Mar 2024

1 answer

359 views

Detect SHIFT key in ContextMenu

I'm using a "hierarchical" TelerikContextMenu (example below). I want to detect if the SHIFT key was depressed when an item (i.e., ItemA1 or ItemB2) is clicked (detecting the difference between click and SHIFT-click).

I can detect if the shift key is depressed in the @oncontextmenu event, but that is for the click invoking the context menu. I want a similar capability when selecting an item IN the context menu.

Any suggestions?

The context menu is structured like this:

ItemA
    ItemA1
    ItemA2
ItemB
    ItemB1
    ItemB2

ContextMenu

answered on 21 Mar 2024

1 answer

566 views

Maximum call stack size exceeded

I am getting this error when hosting on our application. It does not appear to happen locally.

We are using the new .Net 8 autorender functionality and this seems to happen only in a virtual environment. I can give more context if needed.

General Discussions

answered on 21 Mar 2024

0 answers

284 views

Cannot type in latest VS 2022 razor editor due to snippets

I find with the latest Telerik extension enabled, I cannot type anything ( even plain text, with no html tags ) in the non-code section of a razor component ( .razor file ) due to excessive snippet activations ( they don't just list, they insert when spacing to the next word ). I have played with the VS Options for both csharp and razor editor advanced settings and nothing seems to work. There are several new settings related to snippets, but the Telerik extension doesn't seem to honor them. For example, there is one that requires a double tab to select a snippet. Instead, tab, space, etc select the first one in the list, meaning I am constantly fighting to remove the inserted snippet on literally every other word. Snippets behave as expected if I disable the Telerik extension and restart VS. And it does it in both the latest Preview and non-Preview versions of Visual Studio ( installed side by side on same machine ).

I feel like this may be more related to recent .net 8 era razor editor changes in VS, some of which is experimental, as well as a "new" razor editor. ( i have not tested in the legacy razor editor because i don't want to use the legacy razor editor in general ). I've searched in various ways here and haven't found anyone reporting the same issue, so I'm not sure if it's just me, or if I'm the first to report it. I don't have any other code helpers or extensions installed.

Thank you for your time and consideration. I'm happy to jump on a teams call with anyone who might want to see it happening, although it should be easy to replicate on latest VS 2022.

General Discussions

updated question on 20 Mar 2024

1 answer

237 views

[Solved] Don't show marker on Line Chart data point hover

I have a chart with two line series, one showing current values, and the other as a reference line.

On the reference line I don't want any adornment or interaction, so I have made the markers invisible.

However, the data points still appear if you hover over where they would be.

Is there a property to prevent that?

At the moment I'm just setting their size to zero to make them as least noticeable as possible

Charts

Styling

answered on 20 Mar 2024

4 answers

7.9K+ views

How do I right-align a GridColumn content?

How do I right-align grid column values? I tried the Template with a span but it does not seem to work and it also adds another element.

This does not work:

                <GridColumn Field="Amount">
                    <Template>
                        <span style="text-align:right">
                            @((context as BO).Amount.ToString("C"))
                        </span>
                    </Template>
                </GridColumn>

Thanks.

Joel

Grid

updated answer on 19 Mar 2024

0 answers

165 views

Can I use AutoFitAllColumnsAsync() on Grid on and razor.cs that has this structure

I implemented the AutoFitAllColumnsAsync() on the CustomGrid, but the column don't resize

Please see structure below

<CustomGrid @ref="@Grid"
             OnRead="@OnGridRead"
             TItem="@Product"
             Pageable="true"
             Sortable="true"
             Resizable="true"
             FilterMode="GridFilterMode.FilterRow">
    <GridColumns>
<CascadingValue Value="grid.GetDistinctColumnFilterValues">

        <CustomGridColumn Field="@nameof(Product.Name)" Title="Product Name" />
        <CustomGridColumn Field="@nameof(Product.Price)" />
        <CustomGridColumn Field="@nameof(Product.ReleaseDate)" Title="Release Date" />
        <CustomGridColumn Field="@nameof(Product.Active)" />
    
<CascadingValue>
</GridColumns>

</CustomGrid>

Grid

asked on 19 Mar 2024

2 answers

296 views

[Solved] Grid, using OnRead with Filter raises exception Serverside in ToDataSourceResult(request)

The exception is only raised when applying a filter , sorting up and down works ok. Using "contains" filter.

If I remember correctly, this worked before and I did not change my code AFAIK.

Controller side looks like this:

        [HttpPost]
        [SwaggerResponse(StatusCodes.Status200OK)]
        [SwaggerResponse(StatusCodes.Status404NotFound)]
        [Route(ApiUrlConstants.DataSourceRequestSubUrl)]
        public IActionResult DataSourceRequest(string projectIdentifier, [FromBody] DataSourceRequest request)
        {
            if (!TryGetProject(projectIdentifier, out var project))
                return this.NotFoundResult(nameof(projectIdentifier), projectIdentifier);
            var collection = GetCollection(project).Select(MapItemTypeToDto);
            var resultData = collection.ToDataSourceResult(request);
            return Ok(resultData);
        }

WebUI/Client side OnRead event looks like this (the request is sent to server without any further changes):

        private async Task ReadItems(GridReadEventArgs args)
        {
            var dataSourceResult = CollectionClient?.HasValidPath ?? false
                ? await CollectionClient.DataSourceRequestAsync(args.Request)
                : new();
            args.Data = dataSourceResult?.Data;
            args.Total = dataSourceResult?.Total ?? 0;
        }

which raises an exception in my API server , log looking like this:

fail: Microsoft.AspNetCore.Diagnostics.DeveloperExceptionPageMiddleware[1]
      An unhandled exception has occurred while executing the request.
      System.ArgumentException: Provided expression should have string type (Parameter 'stringExpression')
         at Telerik.DataSource.Expressions.ExpressionFactory.LiftStringExpressionToEmpty(Expression stringExpression)
         at Telerik.DataSource.Expressions.FilterOperatorExtensions.GenerateToLowerCall(Expression stringExpression, Boolean liftMemberAccess)
         at Telerik.DataSource.Expressions.FilterOperatorExtensions.GenerateCaseInsensitiveStringMethodCall(MethodInfo methodInfo, Expression left, Expression right, Boolean liftMemberAccess)
         at Telerik.DataSource.Expressions.FilterOperatorExtensions.GenerateContains(Expression left, Expression right, Boolean liftMemberAccess)
         at Telerik.DataSource.Expressions.FilterOperatorExtensions.CreateExpression(FilterOperator filterOperator, Expression left, Expression right, Boolean liftMemberAccess)
         at Telerik.DataSource.Expressions.FilterDescriptorExpressionBuilder.CreateBodyExpression()
         at Telerik.DataSource.FilterDescriptor.CreateFilterExpression(ParameterExpression parameterExpression)
         at Telerik.DataSource.FilterDescriptorBase.CreateFilterExpression(Expression instance)
         at Telerik.DataSource.Expressions.FilterDescriptorCollectionExpressionBuilder.CreateBodyExpression()
         at Telerik.DataSource.CompositeFilterDescriptor.CreateFilterExpression(ParameterExpression parameterExpression)
         at Telerik.DataSource.FilterDescriptorBase.CreateFilterExpression(Expression instance)
         at Telerik.DataSource.Expressions.FilterDescriptorCollectionExpressionBuilder.CreateBodyExpression()
         at Telerik.DataSource.Expressions.FilterExpressionBuilder.CreateFilterExpression()
         at Telerik.DataSource.Extensions.QueryableExtensions.Where(IQueryable source, IEnumerable`1 filterDescriptors)
         at Telerik.DataSource.Extensions.QueryableExtensions.CreateDataSourceResult[TModel,TResult](IQueryable queryable, DataSourceRequest request, Func`2 selector)
         at Telerik.DataSource.Extensions.QueryableExtensions.ToDataSourceResult(IQueryable queryable, DataSourceRequest request)
         at Telerik.DataSource.Extensions.QueryableExtensions.ToDataSourceResult(IEnumerable enumerable, DataSourceRequest request)
         at SNG.LccNion.API.Controllers.ProjectSubCollectionBaseController`2.DataSourceRequest(String projectIdentifier, DataSourceRequest request) in S:\Sources\LCCNion\Source\SNG.LccNion.API\Controllers\ProjectSubCollectionBaseController.cs:line 85
         at lambda_method21(Closure, Object, Object[])
         at Microsoft.AspNetCore.Mvc.Infrastructure.ControllerActionInvoker.InvokeActionMethodAsync()
         at Microsoft.AspNetCore.Mvc.Infrastructure.ControllerActionInvoker.Next(State& next, Scope& scope, Object& state, Boolean& isCompleted)
         at Microsoft.AspNetCore.Mvc.Infrastructure.ControllerActionInvoker.InvokeNextActionFilterAsync()
      --- End of stack trace from previous location ---
         at Microsoft.AspNetCore.Mvc.Infrastructure.ControllerActionInvoker.Rethrow(ActionExecutedContextSealed context)
         at Microsoft.AspNetCore.Mvc.Infrastructure.ControllerActionInvoker.Next(State& next, Scope& scope, Object& state, Boolean& isCompleted)
         at Microsoft.AspNetCore.Mvc.Infrastructure.ControllerActionInvoker.InvokeInnerFilterAsync()
      --- End of stack trace from previous location ---
         at Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.<InvokeNextResourceFilter>g__Awaited|25_0(ResourceInvoker invoker, Task lastTask, State next, Scope scope, Object state, Boolean isCompleted)
         at Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.Rethrow(ResourceExecutedContextSealed context)
         at Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.Next(State& next, Scope& scope, Object& state, Boolean& isCompleted)
         at Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.InvokeFilterPipelineAsync()
      --- End of stack trace from previous location ---
         at Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.<InvokeAsync>g__Logged|17_1(ResourceInvoker invoker)
         at Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.<InvokeAsync>g__Logged|17_1(ResourceInvoker invoker)
         at Microsoft.AspNetCore.Routing.EndpointMiddleware.<Invoke>g__AwaitRequestTask|7_0(Endpoint endpoint, Task requestTask, ILogger logger)
         at SNG.LccNion.API.JWTAuth.JwtMiddleware.Invoke(HttpContext context, IEnumerable`1 authenticationServices) in S:\Sources\LCCNion\Source\SNG.LccNion.API\StartupConfigs\JWTAuth\JWTMiddleware.cs:line 60
         at Microsoft.AspNetCore.Authorization.AuthorizationMiddleware.Invoke(HttpContext context)
         at Microsoft.AspNetCore.Authentication.AuthenticationMiddleware.Invoke(HttpContext context)
         at Microsoft.AspNetCore.Session.SessionMiddleware.Invoke(HttpContext context)
         at Microsoft.AspNetCore.Session.SessionMiddleware.Invoke(HttpContext context)
         at Microsoft.AspNetCore.Localization.RequestLocalizationMiddleware.Invoke(HttpContext context)
         at Microsoft.AspNetCore.Diagnostics.DeveloperExceptionPageMiddlewareImpl.Invoke(HttpContext context)

Wich does not really help finding out was the problem is. Sorting on any column works ok. It just seems filtering is broken somehow.

Also tried other filter options: "Equals" (no results, no error, even though it should match something), "StartsWith" same error

Pretty sure I am doing something wrong, - but what? BTW I have the same trouble using a dropdownlistbox with an OnRead handlerevent.

Some version info:

Telerik.DataSource v3.0.1
Telerik.UI.for.Blazor 5.1.1
VS 2022, .NET8

TIA,

Hans

DropDownList

Grid

answered on 19 Mar 2024

1 answer

253 views

[Solved] Localization on all Telerik component with Blazor

I implemented the Localization on my project, and I got almost all of them. But the Column Menus and some drop downs aren't translating.

How can I achieve that?

Implementation

Program.cs

            // register a custom localizer for the Telerik components, after registering the Telerik services
            builder.Services.AddSingleton<ITelerikStringLocalizer, TelerikLocalizer>();
            builder.Services.AddLocalization();

TelerikLocalizer.cs

public class TelerikLocalizer : ITelerikStringLocalizer
{
    private readonly IStringLocalizer<Resources> globalLocalizer;

    public TelerikLocalizer(IStringLocalizer<Resources> globalLocalizer)
    {
        this.globalLocalizer = globalLocalizer;
    }

    public string this[string name] => GetStringFromResource(name);

    public string GetStringFromResource(string key)
    {
        var localString = Resources.ResourceManager.GetString(key, Resources.Culture);
        if (string.IsNullOrWhiteSpace(localString))
        {
            return globalLocalizer.GetString(key);
        }
        return localString;
    }
}

I have a list of about 19 languages

Source: https://github.com/telerik/blazor-ui/tree/master/common/localization

Grid

answered on 19 Mar 2024