Questions on UI for Blazor Forum

We have recently upgraded to v5.1.1 and noticed on one of our Grids that when you have the page size set to 100 and start paging through the grid, when you reach page 6, the browser locks up and you get the chrome prompt of "wait/close tab". We reverted back to 4.5.0 and the issue seems to disappear. We are using the OnRead event to get the data for the grid. I tried replicate the issue with a simple object (fewer properties) and smaller data set and I was not able to do so so it seems it's only happening with larger data sets

Grid

answered on 02 May 2024

1 answer

8 views

How could I format TelerikGrid's paging numbers?

I have a TelerikGrid with paging enabled. The pager on the left hand side displays the page numbers as buttons, and on the right hand side displays the current items being displayed and the total number of items. The problem is that the right-hand side '1 - 1000 of 440000000' does not format the numbers, and for a grid with millions of possible rows reading the exact numbers is difficult.

So I wrote a little javascript to manipulate the dom and format these numbers. In particular I query the document for 'span.k-pager-info' and manipulate the innerText property. This works fine until I filter my grid, at which point it re-fetches data from the db BUT does NOT update that span with the new filtered innerText. In fact, any manipulation with javascript of the 'span.k-page-info' element causes that element to no longer be updated upon filtering data. Why? Is there any other way to format the numbers in the pager so that they display more clearly (ie. 44,000,000)?

Much thanks to all.

Grid

Pager

answered on 29 Apr 2024

1 answer

12 views

I want to be able to group by date and sort by date/time

Here is my sample.

https://blazorrepl.telerik.com/wIYIwokW39rcHMFE31

Can you help please?

Grid

updated answer on 25 Apr 2024

1 answer

21 views

Does the TelerikGrid provide a way to specify a row's @key attribute for faster blazor refresh

I think I may have posted this question perhaps incorrectly in Technical Support, but let's try here anyways.

I have data I display in a grid that get's re-fetched from the server every second. In Microsoft's QuickGrid, there is an ItemKey attribute that lets you specify a row entries Key so that Blazor can perform it's diff operation more effectively:

<QuickGrid Items="@_Items" ItemKey="(item) => item.Guid" Theme="">

I'm now wanting to switch the QuickGrid out with Telerik's Grid, but can't seem to find any mention of this feature. Does Telerik provide the ability to specify a row's key (so as to improve blazor's diffing algorithm) and if not what is recommended for scenarios where the grid's data is to be re-fetched every second?

Much thanks

Marcin

Grid

answered on 24 Apr 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

0 answers

18 views

Trouble with Event Propagation in Blazor using Telerikeditor in a Telerikgrid with Incell editing

Hello everyone,

I am experiencing an issue with my Blazor application and am seeking advice or solutions from anyone who might have had the same issue.

When interacting with the Telerik Editor within a Telerik Grid, clicking inside the editor unexpectedly exits the edit mode. This seems to be linked to event propagation issues, where clicking the editor triggers a propagation that causes the grid to exit edit mode.

Error Messages:

When my issue triggers, I also see the following error in the console:

Uncaught TypeError: Cannot read properties of null (reading 'state')
This occurs within the telerik-blazor.js script and seems related to handling state changes or events.

I already looked trough Troubleshooting but removing all "StateHasChanged" didn't solve the issue.

What I've Tried:

Implemented JavaScript to stop event propagation using event.stopPropagation() within various event handlers (click, mousedown, etc.).
Checked that the event handlers are correctly assigned and that the JavaScript is initialized at the correct life cycle phase in Blazor (OnAfterRenderAsync).
Removed any redundant StateHasChanged() calls as per Telerik's recommendations to prevent unnecessary re-rendering and potential race conditions.

Code:

The Telerikgrid with the Telerikeditor:

<TelerikGrid Data="ProzessSubPosListe"
             EditMode="@GridEditMode.Incell"
             OnUpdate="@UpdateHandlerProzessPos"
             OnDelete="@DeleteHanlderProzessPos"
             Size="@ThemeConstants.Grid.Size.Small"
             PageSize="100"
             Sortable="true"
             Pageable="false"
             Resizable="true"
             >
    <GridColumns>
        <GridColumn Field="@nameof(ProzessPosClass.Nr)" Title="Nr" Width="10%"></GridColumn>
        <GridColumn Field="@nameof(ProzessPosClass.Title)" Title="Thema" Width="20%"></GridColumn>
        <GridColumn Field="@nameof(ProzessPosClass.ProzessContent)" Title="Beschreibung" Width="20%">
            <EditorTemplate Context="dataItem">
                <div @onclick:stopPropagation="true" @onclick:preventDefault="true">
                @{
                    var item = dataItem as ProzessPosClass;
                    <TelerikEditor @bind-Value="@item.ProzessContent" Width="650px" Height="400px" ></TelerikEditor>
                }
                </div>
            </EditorTemplate>
        </GridColumn>
        <GridCommandColumn Context="Journal" Width="100px">
            <GridCommandButton Command="Save" Icon="@("save")" ShowInEdit="true"></GridCommandButton>
            <GridCommandButton Command="Delete" Icon="@("trash")"></GridCommandButton>
            <GridCommandButton Command="Cancel" Icon="@("cancel")" ShowInEdit="true"></GridCommandButton>
        </GridCommandColumn>
    </GridColumns>
    <NoDataTemplate>
        <strong>Kein Prozessschritt vorhanden</strong>
    </NoDataTemplate>
</TelerikGrid>

OnAfterRenderAsync Method to call the Javascript function.

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        await JSRuntime.InvokeVoidAsync("setupEditorEventHandling");
    }
}

My Javascript inside of _Layout.cshtml trying to resolve the issue:

 <script>
     function setupEditorEventHandling() {
         console.log("Setup editor event handling");
         document.addEventListener('click', function (event) {
             try {
                 var editor = event.target.closest('.k-editor.telerik-blazor');
                 if (editor) {
                     event.stopPropagation();
                 }
             } catch (error) {
                 console.error('Error handling editor click:', error);
             }
         }, true);
     }
 </script>