Analyzing your prompt, please hold on...
An error occurred while retrieving the results. Please refresh the page and try again.
How to Implement Lazy Loading in GridJs
Contents
[
Hide
]
About Lazy Loading
When dealing with a spreadsheet file containing numerous worksheets, we can optimize the loading process by initially loading only the active worksheet.
This strategy ensures that the server‑side JSON response initially includes only the data pertaining to the actively selected worksheet. As a result, the initial web traffic is significantly reduced, enhancing the user experience by minimizing load times.
Furthermore, GridJs is designed to dynamically respond to user interactions. Specifically, when a user clicks on a different worksheet, GridJs intelligently triggers a request to the server to fetch the data specifically for that worksheet.
This on‑demand loading mechanism not only further reduces unnecessary data transfers but also ensures that the user always has access to the most up‑to‑date information for the worksheet they are currently working on.
By adopting this approach, we not only optimize the initial load time but also maintain a responsive and efficient application that scales well with the increasing number of worksheets in the spreadsheet file.
Implementation Steps
Step 1: Configure Lazy Loading in Flask
Set the lazy‑loading option either through Config or GridJsOptions – both have the same effect.
Example using Config
# Import the Config class from the aspose.cellsgridjs namespace
from aspose.cellsgridjs import Config
# Enable lazy loading globally
Config.set_lazy_loading(True)
Step 2: Set Action URL in Client File
Configure the lazy‑loading URL in your client‑side JavaScript file. The URL must match the route you registered in Flask (the BaseRouteName you set above).
// client.js
const lazyLoadingUrl = "/GridJs2/LazyLoadingStreamJson";
xs.setLazyLoadingUrl(lazyLoadingUrl);
After the user clicks on a worksheet that is not the active one, the data‑query action will be triggered automatically by the spreadsheet application.
Step 3: Implement Lazy Loading Action in a Flask Controller
Create a Flask route that implement the lazy loading.
Example implementation without the base controller
@app.route('/GridJs2/LazyLoading', methods=['POST'])
def lazy_loading():
sheet_name = request.form.get('name', '')
uid = request.form.get('uid', '')
if not sheet_name:
return jsonify({'error': 'sheet_name is required'}), 400
if not uid:
return jsonify({'error': 'uid is required'}), 400
wbj = GridJsWorkbook()
try:
output = io.BytesIO()
with gzip.GzipFile(fileobj=output, mode='wb', compresslevel=9) as gzip_stream:
wbj.lazy_loading_stream(gzip_stream, uid, sheet_name)
response = Response(output.getvalue(), mimetype='application/json')
response.headers['Content-Encoding'] = 'gzip'
return response
except Exception as e:
return Response(str(e), status=500)
Demo and Examples
For comprehensive implementation examples and detailed usage scenarios, refer to the official demo repository:
https://github.com/aspose-cells/Aspose.Cells.Grid-for-Python-via-.NET/tree/main/Examples.GridJs