Dealing with lag in Kendo Grid (Utilizing Kendo Grid, Angular JS, and Web API)

Query :

I have integrated a Kendo Grid into my Angular JS HTML page. The data for the Kendo Grid is fetched from a remote service Web API.

While paging through the Kendo Grid, it attempts to download a whopping 38 MB of content for every 10 records, taking approximately 6 minutes to load the data. What exactly is being downloaded that amounts to 38 MB?

Here are the steps I've taken based on similar support tickets on Stack Overflow:

  1. Implemented Server Paging with a page size of 10 (Total records ~56000)

  2. Bundled JS and CSS files

  3. Tried both options below:

    scrollable: { virtual: true } OR scrollable: { endless: true }

  4. Checked stored procedure execution time on production server, completed in < 3 seconds for ~55000 records

  5. Verified Web API controller returns response in < 4 seconds to Kendo Grid

  6. Included necessary JS and CSS files for Kendo UI (already bundled) :

    • Kendo.all.min.js
    • kendo.bootstrap.min.css
    • kendo.common-bootstrap.min.css
    • Other project files also loaded in bundled manner

Links to live project pages :

HTML Page :

<div id="heatMapGrid" kendo-grid k-options="vm.heatMapGridOptions"></div>

AngularJS Controller :

//Code snippets provided...

AngularJS Service :

//Code snippets provided...

Web API :

//Code snippets provided...

My Environment :

  1. Telerik Control Version - Kendo UI v2017.2.621

  2. Operating System (Development machine) - Windows 10 Enterprise (8 GB RAM, Intel Core i7 Processor, 64 bit)

  3. Browser - Google Chrome, Version 65.0.3325.181

  4. .NET Framework - Version 4.6.1

  5. Visual Studio - Enterprise 2015, Version 14.0.25431.01 (Update 3)

  6. Coding Language - C#

Screenshots :

https://i.sstatic.net/yxvsS.png

https://i.sstatic.net/Efdku.png

https://i.sstatic.net/bb2az.png

Seeking guidance on what might be causing the excessive downloading behavior. Any assistance would be greatly appreciated.

Thank you for your help.

javascriptangularjsasp.net-web-apikendo-uikendo-grid

Answer №1

Why not try removing the line where you attach the large amount of export data to the WebAPI response and see if it improves performance? This could be the source of your issue

    var heatMapData = new heatMapGridAndExport
    {
        gridData = listGridData,
        //exportData = listExportData,  //perhaps make conditional, for export only?
        Total = listGridDataForTotalCount.Count()
    };
    return heatMapData;

Edit: Since disabling that line did not solve the problem, have you considered re-ordering the Linq method calls as shown below? The current behavior suggests that the entire result set is being retrieved.

listGridData =
    listGridDataForTotalCount.OrderByDescending(c => c.EndCustomerPurchaseAmt)
        .Skip(model.skip).Take(model.take).ToList();

Although I cannot say for sure, it is possible that placing OrderByDescending last causes Linq to fetch the complete resultset again when using ToList.

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

What could be the reason behind the unexpected behavior of my Bootstrap 3 carousel?

I'm attempting to replicate this visual effect in my own carousel, featuring semi-transparent images on the left and right sides. However, I'm encountering a negative result with my project when transitioning between slides at : here. This is th ...

javascripthtmlcsstwitter-bootstrap-3bootstrap-carousel

Display an icon from the glyphicon library in an Angular application based on a

My Controller: .controller('BlogController', function(blogFactory, $routeParams, $scope){ var that=this; stat=false; this.checkbookmark = function(bId){ console.log(bId) blogFactory.checkBookmark(bId, function(response){ ...

htmlangularjsnode.jsexpress

Adding default values to a Vuejs data property

My goal is to populate the predefined data property that I have set. reportGroupData: [ { program_name: "", iteration_name: "", report_template_name: "", toggle: true, report_details: [], }, ] This po ...

javascriptarraysvue.js

What is the best way to create separate positions for items within a single div?

https://i.sstatic.net/FQRY4.jpgAfter looping through various names and accessing them from a single div using {{item}}, I encountered an issue. All the names are within one parent element. This is the code snippet: <div :style="image" cl ...

javascripthtmlcssvue.jsflexbox

Newbie mishap: Utilizing an array retrieved from a function in javascript/jquery

After submitting the form, I call a function called getPosts and pass a variable str through it. My aim is to retrieve the data returned from the function. // Triggered upon form submission $('form#getSome').submit(function(){ var str = $("f ...

javascriptjqueryarraysreturn-value

I'm seeing a message in the console that says "Form submission canceled because the form is not connected." Any idea why this is happening?

For the life of me, I can't figure out why this code refuses to run the handleSubmit function. Essentially, the form is supposed to take an input and execute the handleSubmit function upon submission. This function then makes a POST request to an API ...

javascriptnext.js

Troublesome CSS conflicts arise when using minified assets with AngularJS and Webpack

After transitioning my Angular project to the Webpack build system, I encountered issues with Angular Dependency Injection in the JS source code. Surprisingly, now I am facing JS errors that are targeting CSS files, leaving me completely bewildered about w ...

javascriptangularjswebpack

Having Trouble with Angular 6 Subject Subscription

I have created an HTTP interceptor in Angular that emits a 'string' when a request starts and ends: @Injectable({ providedIn: 'root' }) export class LoadingIndicatorService implements HttpInterceptor { private loadingIndicatorSour ...

javascriptangulartypescriptobservablereactivex

Conditional Matching with Javascript Regular Expressions

My strings are formatted like this: #WTK-56491650H #=> want to capture '56491650H' #M123456 #=> want to capture 'M123456' I am trying to extract everything after the # character, unless there is a dash. In that case, I onl ...

javascriptregex

Activate the checkbox if the value matches the data retrieved from the database using JavaScript

Hello everyone, I could really use some assistance. I am new to JavaScript and currently have a checkbox with a random value. My goal is to automatically check the checkbox when the data from the database matches the value in the checkbox. This is how my ...

javascriptajaxlaravel

Is there a JavaScript function available that can enable the placeholder attribute to function properly in Internet Explorer?

I currently have numerous input tags in my project that utilize a placeholder attribute, such as the following: <input id="Name" name="Name" placeholder="Name Goes Here" type="text" value=""> Is there a JavaScript function that I can include in my ...

javascriptjqueryhtmlinternet-explorerplaceholder

AngularJS: Response headers return blank object

When utilizing AngularJS $http post methods, I encounter an issue where the response header containing the location parameter with a value is not reflected in the AngularJS response header object which remains empty. $http.post(MNS_DOMAIN + SERVER.MESSA ...

angularjs

Using Json with React's Context API

I am dealing with nested JSON and arrays within it. My goal is to create a Search functionality that will iterate through the arrays and, based on a specific ID, display the name of the corresponding object in the array. I attempted using the Context API ...

javascriptjsonreactjs

Enhance the visual appeal of Autodesk Forge Viewer by incorporating environmental textures

Is there a way to incorporate an environmental texture into Autodesk Forge Viewer v6.0? I know in Three.js you can apply a texture to the scene's background and environment, so how would I achieve this in APS viewer? I'm not looking for a skybox ...

javascriptthree.jswebglautodesk-forge

Combining Arrays in AngularJS with an owl-carousel Setting

My goal is to implement an endless scrolling carousel in AngularJS using owl-carousel. The idea is to load new items every time the carousel is fully scrolled and seamlessly merge queried elements with the existing list. However, I've encountered a pr ...

javascriptangularjscarousel

Collapse the accordion when the search query is less than or equal to 0

I'm having trouble making the accordion open both when the user has typed something into the search bar and when someone clicks to open it. I can get them to work individually, but not together. If I use this code: <accordion-group is-open="statu ...

javascriptangularjs

Instructions on accessing a subfolder in an ASP.NET (C#) Project with WebAPI

I'm facing a bit of an issue trying to access a folder within my project. Specifically, it's a folder named "pdfs" which holds a single PDF file that I need to convert to base64. I tried placing the "pdfs" folder at the same level as the file wh ...

c#asp.netasp.net-web-apifile-ioio

Switch the paper tab to a dropdown menu in Polymer.js

Can someone assist me in transforming the paper tab into a paper drop down menu in polymer JS? I want the drop-down to appear with a list of values when hovering over the Top menu. Activity Execution <paper-tab cla ...

javascriptnode.jsangularuser-interfacepolymer

How can I make the row color of a jQuery datatable change when the row is selected?

One of my challenges involves implementing a jquery dataTable (view here) where each row contains a checkbox. I want the row's color to change when the checkbox is checked. This is the approach I attempted: <table id="tabellaOrdinaFarmaci" class=" ...

javascriptjqueryhtmlcssdatatable

Issue with the table not being displayed when any of the submitted fields are left empty

After submitting the first field, I receive the second value, and after submitting the second field, I get the third value. I have a group of three fields that are interconnected. <?php $courtname=''; if(!empty($_POST['court_ ...

javascriptphphtmlajax