Hello,
I need help with horizontal scroll issue. The column headers have a delay of position while scrolling.
Could you please help me with that? 🙏🙏
***EXAMPLE***
VIDEO:
https://streamable.com/l37xri
CODE:
<app-grid-adapter [contextMenuItems]="contextMenuItems"
(contextMenuItemSelect)="onContextMenuSelect($event)">
<app-shared-loading *ngIf="loading$ | async"
[height]="height"></app-shared-loading>
<kendo-grid #grid
[excelExportName]="name"
[kendoGridBinding]="gridData$ | async"
[gridDataRef]="gridData$"
kendoGridSelectBy="tradeId"
[selectable]="{mode: 'multiple'}"
[aggregates]="aggregates"
[height]="height"
[columnMenu]="true"
[groupable]="groupable$ | async"
[filterable]="filterable$ | async"
[selectedKeys]="gridSelection"
(selectedItemsChange)="onSelectedItemsChange($event)"
(selectionChange)="onSelectedItemChangedCustom($event)">
<ng-template kendoGridColumnMenuTemplate
let-service="service">
<app-column-menu-template [service]="service"
[grid]="grid"
[filterable$]="filterable$"
[groupable$]="groupable$"
(exportCsv)="exportCsv()"
(toggleGrouping)="toggleGrouping($event)"
(switchFilterRows)="switchFilterRows($event)">
</app-column-menu-template>
</ng-template>
<kendo-grid-excel fileName="Kniha portfoliových obchodů.xlsx"
[fetchData]="exportExcel.bind(this)"></kendo-grid-excel>
<basic-string-column title="Číslo obchodu"
field="tradeNumber"
width="134">
</basic-string-column>
<basic-string-column title="Směr"
field="tradeDirectionName"
width="137">
</basic-string-column>
<basic-string-column title="ISIN"
field="portfolioInstrumentName"
width="89">
</basic-string-column>
<basic-string-column title="RČ/IČO klienta"
field="clientIdentNumber"
class="text-right"
width="135">
</basic-string-column>
<basic-string-column title="CUID"
field="cmdId"
class="text-right"
width="135">
</basic-string-column>
<basic-string-column title="RČ/IČO protistrany"
field="counterPartyIdentNumber"
class="text-right"
width="159">
</basic-string-column>
<basic-string-column title="Nominee Account"
field="nomAccountName"
width="107">
</basic-string-column>
<basic-string-column title="Produkt"
field="productName"
width="107">
</basic-string-column>
<basic-string-column title="Měna"
field="currencyCode"
width="85">
</basic-string-column>
<basic-string-column title="Název emise"
field="portfolioInstrumentNameExt"
width="375">
</basic-string-column>
<basic-string-column title="Jméno klienta"
field="clientName"
width="136">
</basic-string-column>
<basic-string-column title="Jméno protistrany"
field="counterPartyName"
width="155">
</basic-string-column>
<basic-string-column title="Trh"
field="marketCode"
width="90">
</basic-string-column>
<basic-string-column title="Vypořádací centrum"
field="settlementMarketCode"
width="167">
</basic-string-column>
<basic-string-column title="Pár"
field="twinTradeId"
width="71">
</basic-string-column>
<basic-string-column title="Portfolio"
field="portfolioName"
width="201">
</basic-string-column>
<basic-string-column title="Provize"
field="commissionValue"
format="{0:n4}"
editor="numeric"
filter="numeric"
class="text-right"
[thousands]="[4, 4]">
</basic-string-column>
<basic-number-column title="Poplatek trh"
field="feeMarketValue"
format="{0:n4}"
editor="numeric"
filter="numeric"
class="text-right"
[thousands]="[4, 4]">
</basic-number-column>
<basic-number-column title="Poplatek obchodu"
field="feeMerchantValue"
format="{0:n4}"
editor="numeric"
filter="numeric"
class="text-right"
[thousands]="[4, 4]">
</basic-number-column>
<basic-string-column title="Registr"
field="clientCSDPCode"
class="text-right"
width="92">
</basic-string-column>
<basic-string-column title="Uživatel"
field="brokerName"
width="128">
</basic-string-column>
<basic-number-column title="Kusy"
field="quantity"
format="{0:n4}"
editor="numeric"
filter="numeric"
class="text-right"
width="88"
[thousands]="[4, 4]">
</basic-number-column>
<basic-number-column title="Cena"
field="price"
format="{0:n6}"
editor="numeric"
filter="numeric"
class="text-right"
[width]="85">
</basic-number-column>
<basic-number-column title="Objem"
field="volume"
format="{0:n4}"
editor="numeric"
filter="numeric"
class="text-right"
width="100"
[thousands]="[4, 4]">
</basic-number-column>
<basic-number-column title="AUV"
field="accruedInterest"
format="{0:n6}"
editor="numeric"
filter="numeric"
class="text-right"
width="100">
</basic-number-column>
<basic-string-column title="Stav obchodu"
field="statusName"
width="131">
</basic-string-column>
<!-- <kendo-grid-column title="Popis"
field=""
width="150"></kendo-grid-column> -->
<basic-date-column title="Datum přijetí"
field="creationDate"
width="127"
filter="date"
format="{0:d}"
[dateFormat]="'dd.MM.yyyy HH:mm:ss'">
</basic-date-column>
<basic-date-column title="Datum obchodu"
field="tradeDate"
width="146"
filter="date"
format="{0:d}">
</basic-date-column>
<basic-date-column title="Datum vypořádání"
field="settlementDate"
width="159"
filter="date"
format="{0:d}">
</basic-date-column>
<basic-date-column title="Datum účetní"
field="accountingDate"
width="130"
filter="date"
format="{0:d}">
</basic-date-column>
<basic-date-column title="Datum nabytí"
field="acquisitionDate"
width="130"
filter="date"
format="{0:d}">
</basic-date-column>
<basic-string-column title="Druh portfolia"
field="portfolioTypeName"
width="133">
</basic-string-column>
<basic-string-column title="Interní pozice"
field="internalPositionName"
width="151">
</basic-string-column>
<basic-string-column title="Správce"
field="managerName"
width="97">
</basic-string-column>
<basic-string-column title="Účel držení"
field="holdingPurposeName"
width="116">
</basic-string-column>
<basic-string-column title="Cílový klient"
field="lastClientName"
width="130">
</basic-string-column>
<basic-string-column title="Cílový klient IČO"
field="lastClientIdentNumber"
width="130">
</basic-string-column>
<basic-string-column title="Poznámka"
field="note"
width="355">
</basic-string-column>
<basic-string-column title="Id"
field="tradeId"
[hidden]="true"
width="150">
</basic-string-column>
</kendo-grid>
</app-grid-adapter>
<ng-template #confirmDialogAction>
<button class="btn-ok"
style="border-radius: 0.25rem;"
(click)="okConfirmDialog(true)">OK
</button>
<button class="btn-cancel"
style="border-radius: 0.25rem;"
(click)="cancelConfirmDialog(false)">Zrušit
</button>
</ng-template>
Hello,
Thank you very much for the detailed information provided.
I have checked the provided screen recording and indeed noticed the reported delay with the Grid's header when the component is horizontally scrolled. However, another observation that I made is that there is a substantial number of both Grid records and columns.
Generally speaking, the worsened performance and the delay in the Grid's header scrolling can be caused by the number of rendered DOM elements. Basically, the more HTML elements that have to be rendered by the Angular framework, the worse the performance will be and this is valid for all browsers.
Furthermore, the performance and the time needed to load a substantial number of records depend on various factors like internet connection, machine performance, browser limits and so on which are indeed outside of our control. Using the virtual columns and paging or virtual scrolling are recommended optimization techniques when the Grid needs to load thousands of records:
https://www.telerik.com/kendo-angular-ui-develop/components/grid/browser-performance/
In this particular case, I would suggest checking out our designated Virtual Columns article that might prove to be useful for resolving the delay in the scrolling of the Grid's header:
https://www.telerik.com/kendo-angular-ui/components/grid/columns/virtual/
In case none of the provided information helped you resolve the delay, I would ask you to provide more detailed information about the specifics of the implementation or ideally a small runnable example demonstrating it. This would allow me to gain a better understanding of the exact scenario and thus come up with a more case-specific suggestion.
Let me know how it goes.
Regards,Georgi
Progress Telerik