Preventing data binding in an Angular 2 Kendo grid

Looking for a solution to improve performance on a page with a Kendo grid that contains a high number of rows. Each row has complex logic for showing/hiding elements based on column values, which is causing performance issues when dealing with 100 or more rows. Additionally, there are edit popups on the page to change certain data that is not directly related to the grid content. This is causing further slowdowns - slow popup opening and sluggish keyboard input when editing names. One potential workaround could involve delaying the rendering and loading of the grid until triggered by a specific command (e.g. starting a function to load grid data). By implementing this approach, the grid would only be processed when necessary, improving overall performance. Any suggestions on how to achieve this?

Answer №1

When dealing with a large amount of data in the kendo grid, performance becomes an issue. To address this, experts recommend implementing paging. For more information on optimizing grid performance, check out this resource. Personally, I found that moving the data to another object, such as using an HTML table with ngFor, significantly improved loading speeds compared to using the kendo grid.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

When is the appropriate time to provide arguments to the constructor of a TypeScript service?

I am grappling with the concept of when to pass arguments to a service's constructor versus passing them in the execution of the service. For instance, I have a service that filters rows from an Excel sheet: @Injectable() export class FilterRowsServi ...

Choosing Angular.json setups while executing a Docker multi-stage construction

I am currently in the process of developing an Angular6 application with a Docker multistage build. The default angular.json file generated by angular.cli includes a build section containing various configurations. To choose a specific configuration, I can ...

Trouble with Ionic 2 and Angular 2: Why isn't my view reflecting variable changes?

Having recently started using Angular 2, I may not fully grasp what's going wrong. In my code, I have an *ngIf statement that is intended to display a button if a certain variable is false and hide the button if the variable is true. However, even af ...

Setting a Fixed Default Value in an Angular Dropdown Menu

Within my code, there is a specific column where users have the ability to insert an element and choose its priority type while doing so. I am currently attempting to assign a default value to the dropdown selection (row.PriorityType.Id ==1). Although I at ...

I'm receiving an error message stating "mongoose.connect is not a function" while attempting to establish a connection with mongoose. Can you help me troub

I'm a beginner in Node.js and I'm currently working on creating a node/express/mongoose server app using TypeScript. Below is my app.ts file: // lib/app.ts import express from 'express'; import * as bodyParser from 'body-parser&a ...

Tips for retrieving the most recent UI updates after the container has been modified without the need to refresh the browser

Currently, I have developed a micro frontend application in Angular using module federation. This application is hosted in production with Docker containers. My main concern revolves around how to update the UI changes for the user without them needing to ...

Encountering an error message about 'resolving symbol values statically' while building an Angular 2 project

Currently, I am utilizing an older module called angular-2-local-storage. The initialization process is as follows: const LOCAL_STORAGE_SERVICE_CONFIG_TOKEN: string = 'LOCAL_STORAGE_SERVICE_CONFIG'; export const LOCAL_STORAGE_SERVICE_CONFIG = ne ...

Switch up the header's date format on NGX-Print

Within my application, I am utilizing ngx-print with Angular 8. When I click the print button, a date in the format mm/dd/yy is added to the header. However, I would like to change it to dd/mm/yy. Despite searching, I have been unable to find any document ...

Indeed verification using this in a separate constant

I'm currently working with React and TypeScript, and I need to verify if my groupID exists in an array of [2, 3, 4]. I'm unsure about the validity of my validationSchema as I am encountering issues with a keyword that seems to be missing from th ...

Using trackBy in conjunction with the async pipe

Attempting to utilize the async pipe along with *ngFor to exhibit an array of items obtained asynchronously. <ul> <li *ngFor="let item of items | async; trackBy: trackPost"> {{item.text}} </li> </ul> ngOnInit() { // a si ...

Tips for debugging and stepping into an npm package containing Typescript source code

Okta, an Angular NPM dependency, is not functioning as expected for me. I am in need of diving into its source code while debugging my application to troubleshoot and resolve the issue at hand. How can I achieve this within my Angular 6 app? Despite using ...

Having trouble locating the Angular Material core theme within the asp.net core 2.0 template using Angular 5

CustomConfig.js const treeModules = [ '@angular/animations', '@angular/common', '@angular/compiler', '@angular/core', '@angular/forms', '@angular/http', '@angular ...

The Angular checked functionality is not working as expected due to the presence of ngModel

Just getting started with Angular here. I’m working on a checkbox table that compares to another table and automatically checks if it exists. The functionality is all good, but as soon as I add ngModel to save the changes, the initial check seems to be ...

Angular-CLI personalized schematics and collections

I am currently in the process of creating custom schematics for Angular CLI. After some experimentation, I have discovered that the "collection" needs to be compiled because the CLI cannot read TypeScript directly. This means that you can't simply clo ...

Tips on transforming a JavaScript function constructor into TypeScript

Transitioning from JavaScript to TypeScript has presented me with some challenges. One of the tasks I need to accomplish is converting a constructor function into its TypeScript equivalent. The original JavaScript function looks like this: export default ...

Best practices for patiently waiting for arranged observables and linking the outcome

I have a sequence of observables that need to be executed in order, but I want to keep them cold (without subscribing) so that further chaining is possible. const tasks = [observable1, observable2, observable3]; If I return concat(...tasks) and then try t ...

"Revolutionize your date and time selection with the dynamically updating columns

I am in need of a time selection feature where users can choose both hours and minutes. Each hour will have its own set of minutes, and the data structure should look like this: [ { hour: 1, minutes: [0, 15, 30], }, { hour: 4, minut ...

Invoke a function within the <img> tag to specify the source path

I have been attempting to achieve something similar to the following: <img id="icon" class="cercle icon" src="getIcon({{item.status}})" alt=""> This is my function: getIcon(status){ switch (status) { case 'Ongoing': ret ...

Navigating through Angular Material table elements

Currently, I am working with Angular Material's mat-table component and have noticed a unique notation used for loop properties such as *matCellDef, which is demonstrated in this Demo. In an attempt to streamline my code, I sought to dynamically gener ...

Organizing Angular models and interfaces

The Angular styleguide provides best practices for using classes and interfaces in applications, but it does not offer guidance on organizing interfaces and model classes. One common question that arises is: what are the best practices for organizing file ...