Questions on UI for Blazor Forum

0 answers

6 views

Info about DataSourceRequest.Page and DataSourceRequest.Skip attributes

Hi, i need to design a class to handle pagination in my api endpoints, so i have a question about 2 properties of DataSourceRequest.

Page: I assume it's used only in pagination to set the page number.

Skip: I assume it's used only on virtual pagination to define the records to skip.

I think this 2 properties as mutual exclusive (if used Page, Skip is ignored, if used Skip, Page is ignored).

Is this true or there are situations where are both used?

and if one exclude the other... why you have not handled the pagination only with Skip / Take properties (assumed who Take correspond to PageSize in classic pagination, Page can be calculated as (Skip / Take) + 1)?

i need this answers because if this properties are multual exclusive i assume i can design my pagination class with only 2 properties (Skip / Take) instead of 3 (Page / PageSize / Skip) as done in DataSourceRequest object.

Thanks

General Discussions

Grid

Pager

updated question on 17 May 2024

1 answer

7 views

Using Microsoft's Auto generated OData Connected Service -vs- Calling OData endpoints directly. Which is preferred? (Blazor &.Net 8)

I have a dozen OData Endpoints that provide all my data access. I am currently using the autogenerated OData Connected Service that uses the Microsoft OData Client to access the endpoints from services in my Blazor ServerSide app.

The Telerik Blazor components seem to be geared around using Telerik.DataSource & Telerik.DataSource.Extensions to access the OData Endpoints directly.

Is there a best practice or method for accessing OData Endpoints with Telerik components?

Thanks

General Discussions

Grid

answered on 14 May 2024

1 answer

12 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

68 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

1 answer

44 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

0 answers

30 views

Difficulty Ensuring Command Column Positioning in Telerik Blazor DataGrid with Dynamic Columns and Shared Component

Issue Description: I'm encountering challenges with dynamically positioning the command column within the Telerik Blazor DataGrid while using a single grid component for two pages. Each page utilizes the same grid component but may have different sets of columns generated dynamically. Despite this setup, I'm unable to ensure that the command column consistently appears at the last position in the grid on both pages.

Background: In my application, I've implemented Telerik Blazor's DataGrid component to display tabular data across multiple pages. To streamline development and improve code maintainability, I've opted to use a single grid component shared between two pages. Each page may have a different set of columns generated dynamically based on the specific requirements of the page. Additionally, the data source for the grid is an ExpandoObject, and I'm using a loop to dynamically generate columns.

Current Approach: My current approach involves dynamically generating columns using a loop for each page's specific requirements. However, due to the shared nature of the grid component and the dynamic nature of the data source, I'm experiencing difficulties in ensuring that the command column, which contains actions like edit, delete, etc., is consistently positioned at the last column on both pages.

Expected Behavior: I expect to have precise control over the position of the command column within the DataGrid, even when using a single grid component shared between two pages and dynamically generating columns with ExpandoObject as the data source. Regardless of the page being accessed, the command column should always appear at the last position in the grid, providing users with a consistent interface for interacting with the data.

Request for Assistance: I'm seeking assistance from the Telerik community for guidance, insights, or potential workarounds on how to achieve the desired behavior of positioning the command column as the last column in the DataGrid consistently across two pages, even when utilizing a shared grid component and dynamically generating columns with ExpandoObject as the data source.

Any assistance or suggestions would be highly appreciated. Thank you for your support!

asked on 24 Feb 2024

1 answer

116 views

Microsoft.JSInterop.JSException: Maximum call stack size execeeded ( .NET8 + Telerik Blazor UI 5.0.1)

Hi,

Recently, I just updated my Blazor project to .NET8 and facing the following issue every time rendering Telerik Components.

This issue doesn't appear when using .NET7 and Telerik Blazor UI 5.0.1.

Please let me know if you have been facing this issue before.

My current packages:

<ItemGroup>
<PackageReference Include="Microsoft.AspNetCore.Diagnostics.EntityFrameworkCore" Version="8.0.1" />
<PackageReference Include="Microsoft.AspNetCore.Identity.EntityFrameworkCore" Version="8.0.1" />
<PackageReference Include="Microsoft.AspNetCore.Identity.UI" Version="8.0.1" />
<PackageReference Include="Microsoft.CodeAnalysis" Version="4.8.0" />
<PackageReference Include="Microsoft.EntityFrameworkCore.SqlServer" Version="8.0.1" />
<PackageReference Include="Microsoft.EntityFrameworkCore.Tools" Version="8.0.1">
<PrivateAssets>all</PrivateAssets>
<IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
</PackageReference>
<PackageReference Include="Newtonsoft.Json" Version="13.0.3" />
<PackageReference Include="Telerik.DataSource" Version="3.0.0" />
<PackageReference Include="Telerik.Documents.Core" Version="2023.3.1106" />
<PackageReference Include="Telerik.Documents.SpreadsheetStreaming" Version="2023.3.1106" />
<PackageReference Include="Telerik.Recurrence" Version="0.2.1" />
<PackageReference Include="Telerik.UI.for.AspNet.Core" Version="2023.2.718" />
<PackageReference Include="Telerik.UI.for.Blazor" Version="5.0.1" />
<PackageReference Include="Telerik.Zip" Version="2023.3.1106" />
</ItemGroup>

Charts

General Discussions

Grid

answered on 02 Feb 2024

0 answers

29 views

Telerik Grid Grouping

I'm using telerik grid blazor and datatable as datasource properties like filtering,sorting are working but when i enable grouping it loads and does not provide me a grouping data.

Is there any solution for this?

General Discussions

Grid

GridLayout

asked on 11 Dec 2023

1 answer

32 views

DataGrid row removal causes re-initialization of cell controls

Hi,

I am trying to setup the ability for users to delete a row in a <TelerikGrid>

<TelerikGrid 
                Data="@(Results)"
                EnableLoaderContainer="true"
                Pageable="true"
                Sortable="true"
                Resizable="true"
                FilterMode="GridFilterMode.FilterMenu"
                PageSize="15"
                SelectionMode="GridSelectionMode.Multiple"
                SortMode="@SortMode.Single"
                Height="70vh"
                @ref="@GridRef"
            >

<GridColumn Title="Delete" Width="5vh">
                        <Template>
                            @if (context is MyModel model)
                            {
                            <div @key="@model.UniqueId">
                                <div class="icon-container" @onclick="@(() => HandleDeleteClicked(model))">
                                    <i class="far fa-trash font-icon-large"></i>
                                </div>
                            </div>
                            }
                        </Template>
                    </GridColumn>

private async Task HandleDeleteClicked(MyModel model)
    {
            Results.Remove(model);
    }

This part all works fine, it removes the row, and since 'Results' is an 'ObservableCollection<MyModel>' it updates the UI, perfect.

The problem is I can't seem to get it so that every cell is not re-rendering/re-created when the delete happens.

I have a column that has a sub-component inside it...

<GridColumn Title="MyCustomColumn" Field="@nameof(MyModel.MyField)">
                        <Template>
                            @{
                                @if (context is MyModel result)
                                {
                                    <div @key="@result.UniqueId">
                                        @{
                                                    <MyCustomComponent></MyCustomComponent>
                                            }
                                    </div>
                                }
                            }
                        </Template>
                    </GridColumn>

'MyCustomComponent' has an expensive API call in the 'OnParametersSetAsync' lifecycle method. Even though I have the @key attribute setup it seems to re-create the 'MyCustomComponent' for every row anytime a single row is deleted.

This gets called for every row:

// MyCustomComponent.razor.cs    
private Guid? ComponentInstanceId { get; set; } 

    protected override Task OnInitializedAsync()
    {
        ComponentInstanceId = Guid.NewGuid();
        return base.OnInitializedAsync();
    }

The Id I am using for the key I can confirm is not changing.

Is there a better way to help the grid know when it needs to re-create the cells?

Thanks!

General Discussions

Grid