Questions on UI for Blazor Forum

1 answer

4 views

What is a recommended implementation for syntax highlighting

I need to format and highlight xml and json in a view. I can not find a component within Blazor components. In other packages like WinForm there are solutions for displaying code. Any way I'm able to do this without clientside javascript solutions (like PrismJS)?

In case there is no component in the Telerik family I can use in Blazor, does anyone have a recommended setup to implement the functionality. A requirement is support for dark/light theming.

Thanks for any insights.

General Discussions

answered on 26 Apr 2024

1 answer

9 views

Export to excel performance from grid - Blazor Wasm

Hi

Are there any plans on improving the performance on the default export to excel from a Telerik grid using Blazor Wasm?

As seen in this example:

https://docs.telerik.com/blazor-ui/components/grid/export/excel#basics


<TelerikGrid Data="@GridData" Pageable="true" Sortable="true" Resizable="true" Reorderable="true"
             FilterMode="@GridFilterMode.FilterRow" Groupable="true" >

    <GridToolBarTemplate>
        <GridCommandButton Command="ExcelExport" Icon="@SvgIcon.FileExcel">Export to Excel</GridCommandButton>
        <label class="k-checkbox-label"><TelerikCheckBox @bind-Value="@ExportAllPages" />Export All Pages</label>
    </GridToolBarTemplate>

    <GridExport>
        <GridExcelExport FileName="telerik-grid-export" AllPages="@ExportAllPages" />
    </GridExport>

    <GridColumns>
        Columns..
    </GridColumns>
</TelerikGrid>

At the moment we have about 150 columns and 4000 rows that needs to be exported which takes quite a while.

If not what are your recommendations in speeding up the excel export?

General Discussions

Grid

answered on 18 Apr 2024

1 answer

58 views

How to create a generic reusable grid in blazor

I attempted to develop a versatile grid component for Blazor to facilitate reusability.

@typeparam TItem
    <TelerikGrid  Data="Data" SelectionMode="GridSelectionMode.Multiple"
                 Pageable="true" PageSize="3" Page="1"
                 Sortable="true" SortMode="@SortMode.Multiple"
                 FilterMode="GridFilterMode.FilterMenu"
                 EditMode="@GridEditMode.Popup"
                 Resizable="true" Reorderable="true" ConfirmDelete="true">

        <GridSettings>

            <GridValidationSettings Enabled="true"></GridValidationSettings>

            <GridPopupEditSettings MaxWidth="600px"
                                   MaxHeight="300px"
                                   Class="custom-popup"
                                   Title="Update Details">
            </GridPopupEditSettings>
            <GridPopupEditFormSettings Orientation="@FormOrientation.Horizontal"
                                       ButtonsLayout="FormButtonsLayout.Center"
                                       Columns="3">

            </GridPopupEditFormSettings>
        </GridSettings>


        <GridToolBarTemplate>
            <GridCommandButton Command="ExcelExport" Icon="@SvgIcon.FileCsv">Export to Excel</GridCommandButton>
            <GridCommandButton Command="Add" Icon="@SvgIcon.Plus">Add Employee</GridCommandButton>
        </GridToolBarTemplate>

        <GridExport>
            <GridExcelExport FileName="EmployeeDetails Sheet" AllPages="true" />
        </GridExport>

        <GridColumns>
    
            @GridCols
        
            <GridCommandColumn>
                <GridCommandButton Command="Save" Icon="@SvgIcon.Save" ShowInEdit="true">Update</GridCommandButton>
                <GridCommandButton Command="Edit" Icon="@SvgIcon.Pencil">Edit</GridCommandButton>
                <GridCommandButton Command="Delete" Icon="@SvgIcon.Trash">Delete</GridCommandButton>
                <GridCommandButton Command="Cancel" Icon="@SvgIcon.Cancel" ShowInEdit="true">Cancel</GridCommandButton>
            </GridCommandColumn>
        </GridColumns>
    </TelerikGrid>



@code
{
    [Parameter]
     public IEnumerable<TItem>? Data{get; set;}

    [Parameter]
    public RenderFragment<TItem>? GridCols { get; set; }

}

This is the code for the reusable generic grid component.

@page "/emp"
@inject HttpClient Http
@using System.Text.Json;

<h1>Employee Details</h1>

@if (employees == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <GenericGrid TItem="EmpDetails" Data="@employees">
      <GridCols>
            <GridColumn Field="@nameof(EmpDetails.Name)" Title="Employee Name" /> 
            <GridColumn Field="@nameof(EmpDetails.Age)" Title="Age" />
            <GridColumn Field="@nameof(EmpDetails.Place)" Title="Place" />
      </GridCols>
    </GenericGrid>

}

When utilizing the Generic component, the column fields are not being generated as expected. Could someone assist in resolving this issue?

General Discussions

Grid

answered on 16 Apr 2024

0 answers

41 views

Blazor 8 - Error: Microsoft.JSInterop.JSException: Could not find 'TelerikBlazor.initMediaQuery'

Hello,

I have followed the Blazor 8 Getting started instructions but am getting the error Error: Microsoft.JSInterop.JSException: Could not find 'TelerikBlazor.initMediaQuery'.

I have double checked that the <script src="_content/Telerik.UI.for.Blazor/js/telerik-blazor.js"></script> is in the <head> of the app.razor

i have double checked that the builder.Services.AddTelerikBlazor(); is in the program.cs

and I have the

in the root layout component MainLayout.razor.

This error causes my stylesheets not to load. Occasionally the page will load with the stylesheets, but if a clear the cache or do a CTRL-SHIFT-R, I will get the error and my styles will unload.

HALP!

General Discussions

asked on 12 Apr 2024

1 answer

63 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

29 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

2 answers

372 views

[Feature Request] Org Chart

Is there any plan to add a Org Chart as control ?

The Org Chart should display the reports to / is manager of relation (1:0,m) between employees and/or managers

graphically.

It would be great, if this feature request can be added in the near future...

Thanks,

Christian

General Discussions

answered on 18 Mar 2024

1 answer

37 views

Using 'ToDataSourceResultAsync' on a projected model

Hi,

I'm attempting to do something that is probably dumb/unsupported. We have a paginated grid in our UI that we want to include a joined model in.

Example:

public class Item
{
   [Key]
   public Guid ItemId{ get; set; } = Guid.NewGuid();
   public Guid? LatestLogId { get; set; }
}

public class ItemLog
{
   [Key] 
   public Guid ItemLogId{ get; set; }
   
   public Guid ItemId{ get; set; }
   [ForeignKey("ItemId")]
   public Item? Item { get; set; }

   [MaxLength(250)] public string Message { get; set; } = null!;
}

We use 'LatestLogId' in order to know what ItemLog to 'include' in the results in the UI

I'm trying to project it into a Dto that includes both the Item and the LatestLog but running into some trouble calling 'ToDataSourceResultAsync' with that IQueryable<Dto>

 public async Task<DataSourceResult> GetItemReportPage(DataSourceRequest pageRequest, Guid staffId,
        bool includeAll = false)
    {
            var baseQuery = _appContext.Items
                .AsQueryable();
            if (!includeAll)
            {
                baseQuery = baseQuery.Where(x => x.CreatedBy== staffId);
            }
                var query= baseQuery.Select(item => new ItemWithLatestLogDto
                    {
                        LatestLog = _appContext.ItemLogs.FirstOrDefault(x => x.ItemLogId== request.LatestLogId) 
                    })
                    .AsNoTracking();


        var dataSourceResult = await query.ToDataSourceResultAsync(pageRequest);
        return dataSourceResult;
    }

When calling that I get an error that is something like this:

System.InvalidOperationException: The LINQ expression 'DbSet<Item>()
    .Where(n => n.CreatedById== __staffId_0)
    .OrderByDescending(n => new ItemWithLatestLogDto{ LatestLog = DbSet<ItemLog>()
            .Where(r => (Guid?)r.ItemLogId== n.LatestLogId)
            .FirstOrDefault() }
    .CreatedDateTimeUtc)' could not be translated. Either rewrite the query in a form that can be translated, or switch to client evaluation explicitly by inserting a call to 'AsEnumerable', 'AsAsyncEnumerable', 'ToList', or 'ToListAsync'. See https://go.microsoft.com/fwlink/?linkid=2101038 for more information.
   at Microsoft.EntityFrameworkCore.Query.QueryableMethodTranslatingExpressionVisitor.<VisitMethodCall>g__CheckTranslated|15_0(ShapedQueryExpression translated, <>c__DisplayClass15_0&)
   at Microsoft.EntityFrameworkCore.Query.QueryableMethodTranslatingExpressionVisitor.VisitMethodCall(MethodCallExpression methodCallExpression)
   at Microsoft.EntityFrameworkCore.Query.RelationalQueryableMethodTranslatingExpressionVisitor.VisitMethodCall(MethodCallExpression methodCallExpression)
   at Microsoft.EntityFrameworkCore.Query.QueryableMethodTranslatingExpressionVisitor.VisitMethodCall(MethodCallExpression methodCallExpression)
   at Microsoft.EntityFrameworkCore.Query.RelationalQueryableMethodTranslatingExpressionVisitor.VisitMethodCall(MethodCallExpression methodCallExpression)
   at Microsoft.EntityFrameworkCore.Query.QueryableMethodTranslatingExpressionVisitor.VisitMethodCall(MethodCallExpression methodCallExpression)
   at Microsoft.EntityFrameworkCore.Query.RelationalQueryableMethodTranslatingExpressionVisitor.VisitMethodCall(MethodCallExpression methodCallExpression)
   at Microsoft.EntityFrameworkCore.Query.QueryableMethodTranslatingExpressionVisitor.VisitMethodCall(MethodCallExpression methodCallExpression)
   at Microsoft.EntityFrameworkCore.Query.RelationalQueryableMethodTranslatingExpressionVisitor.VisitMethodCall(MethodCallExpression methodCallExpression)
   at Microsoft.EntityFrameworkCore.Query.QueryCompilationContext.CreateQueryExecutor[TResult](Expression query)
   at Microsoft.EntityFrameworkCore.Storage.Database.CompileQuery[TResult](Expression query, Boolean async)
   at Microsoft.EntityFrameworkCore.Query.Internal.QueryCompiler.CompileQueryCore[TResult](IDatabase database, Expression query, IModel model, Boolean async)
   at Microsoft.EntityFrameworkCore.Query.Internal.QueryCompiler.<>c__DisplayClass9_0`1.<Execute>b__0()
   at Microsoft.EntityFrameworkCore.Query.Internal.CompiledQueryCache.GetOrAddQuery[TResult](Object cacheKey, Func`1 compiler)
   at Microsoft.EntityFrameworkCore.Query.Internal.QueryCompiler.Execute[TResult](Expression query)
   at Microsoft.EntityFrameworkCore.Query.Internal.EntityQueryProvider.Execute[TResult](Expression expression)
   at Microsoft.EntityFrameworkCore.Query.Internal.EntityQueryable`1.System.Collections.IEnumerable.GetEnumerator()
   at Telerik.DataSource.Extensions.QueryableExtensions.Execute[TModel,TResult](IQueryable source, Func`2 selector)
   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)

The Dto looks like this:

public class ItemWithLatestLogDto: Item
{
    public ItemLog? LatestLog { get; set; } 
 
    public NewFileRequestWithLatestLogDto()
    {
    }
}

Is this a use-case supported by the method or do I need to find a different way of accomplishing this?

Thanks!

General Discussions

Grid

answered on 11 Mar 2024

1 answer

22 views

How you have solved filtering a grid on property that is a collection

My scenario is that I have a grid of User.
a User has Roles.

I have a column that I have used the <Template> to display a chip of each Role a User has.

The FilterTemplate does not have a solution to filter this collection out of the box.
Have you solved this or similar? Please share any helpful feedback here as I am blocked on this task.

I would prefer not to filter on a concatenated string of the users roles, as if I click the filter checkbox 'Admin' it would show results for any role that had Admin in it's name.

If you used the OnRead event, when did you apply your filter and how?

Thanks so much for your feedback on how you've solved this for your use case.

Filter

General Discussions

Grid

answered on 01 Mar 2024

1 answer

32 views

NET MAUI Blazor Hybrid App on Android < v32 in .net 8

As long as I use an API version > 31, everything works. But older versions won't start. Any ideas?

Once I use <TelerikRootComponent> in the layout, the application stops working.

Could not find TelerikBlazor.getLocationHost ('TelerikBlazor' was undefined). Error: Could not find 'TelerikBlazor.getLocationHost' ('TelerikBlazor' was undefined). at https://0.0.0.0/_framework/blazor.webview.js:1:540...

General Discussions