How to optimize the re-rendering of a pivot table when using a server-side engine?

Introduction

In our server-side engine, data is retrieved each time while refreshing the browser page in order to re-render the pivot table. As a result, the time taken to render the pivot table is the same as the initial rendering process. This article provides a solution to optimize the re-rendering of a pivot table when using a server-side engine, especially when dealing with large datasets. For demonstration purposes, we have rendered the pivot table with one million unique rows. However, you can use any size dataset to meet your specific requirements.

Using RAM cache to optimize the re-rendering of a pivot table

The server-side pivot engine stores information in the RAM cache, which can be accessed using a unique key. This can be achieved by using the hash property in the BeforeServiceInvoke event within the client-side application. This approach allows for the retrieval of engine information without reprocessing data when the browser page is reloaded. Consequently, the time required to render the pivot table is significantly reduced.

Code implementation

Below is an example of how to set up the BeforeServiceInvoke event in your client-side code to store engine information with a unique key:

[index.cshtml]

@using Syncfusion.EJ2.PivotView

@Html.EJS().PivotView("PivotView").EnableVirtualization(true).BeforeServiceInvoke("beforeServiceInvoke").Render()

<script>
    // This function is triggered before the service invocation on the client-side.
    function beforeServiceInvoke(args) {
        // Here, we assign a predefined unique key for the cache engine information
        args.hash = "7a410029-5c95-4fe9-89a0-95ca804291e3";
    }
</script>

In this example, after the BeforeServiceInvoke event is executed, we store engine information with a unique key (i.e., “7a410029-5c95-4fe9-89a0-95ca804291e3”) by using the args.hash property. However, you can replace it with your own custom key. This key serves as a reference for the server to recognize and efficiently handle engine information associated with previous operations. When a browser page is reloaded, this key allows the server to bypass certain steps in the data processing, thus resulting in improved performance.

The following GIF image portrays the results of the code snippet mentioned above.

GIF

View Sample in GitHub

Important considerations

While the caching method enhances performance by avoiding repetitive data processing, it is important to note that the pivot table values will still be recalculated based on the latest pivot report settings (i.e., DataSourceSettings) for each rendering. This means that any modifications to the report settings will initiate data processing again to ensure the pivot table correctly displays the updated configuration

Conclusion

I hope you enjoyed learning how to optimize the re-rendering of an ASP.NET MVC Pivot Table when using a server-side engine.

You can refer to our ASP.NET MVC Pivot Table feature tour page to learn about its other groundbreaking features and documentation, as well as how to quickly get started with configuration specifications. You can also explore our ASP.NET MVC Pivot Table example to understand how to create and manipulate data.

For current customers, you can check out our components on the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, support portal, or feedback portal. We are always happy to assist you!