🧩 Grid Customization Persistence
In many enterprise portals, users interact with data grids that support filtering, sorting, and column customization. However, these preferences are often lost when the page is refreshed or revisited. In this article, we’ll explore how to capture and save Portal Connector Grid customizations on the client side using
localStorage
—all within a Razor template of Portal Connector widgets.
We'll also look at alternative approaches using cookies, and discuss important considerations like storage limits, versioning, and cross-browser behavior.
🛠️ The Razor Template Setup
Here’s a simplified version of the Razor template where the Grid is rendered and enhanced with JavaScript to persist user customizations. You can add this code to your template just after the last div tag:
<script type="module">
$(window).on("unload", function () {
var grid = $("#@Html.GetUniqueId(Model.DeveloperName)_element").data("kendoGrid");
var options = grid.getOptions();
delete options["toolbar"];
localStorage["@Html.GetUniqueId(Model.DeveloperName)_element"] = kendo.stringify(options);
});
$(document).on("tpc:ready", function () {
var grid = $("#@Html.GetUniqueId(Model.DeveloperName)_element").data("kendoGrid");
var options = localStorage["@Html.GetUniqueId(Model.DeveloperName)_element"];
if (options) {
grid.setOptions(JSON.parse(options));
}
});
</script>
This script captures the grid’s current configuration (like filters, column visibility, and sorting) when the user leaves the page, and restores it when the grid is reloaded.
🧠 Considerations for a Robust Implementation
While the above solution works well in many scenarios, there are a few important considerations to keep in mind when implementing this in production.
🌐 1. Cross-Browser and Cross-Device Behavior
Problem
:
localStorage
is browser- and device-specific. If a user customizes their grid in Chrome on one device, those settings won’t carry over to Firefox or another machine.
Solution
: Use
cookies
instead of
localStorage
if you want settings to persist across devices (assuming the user is authenticated and cookies are synced).
✅ Cookie-Based Alternative
function saveGridSettingsToCookie() {
var grid = $("#@Html.GetUniqueId(Model.DeveloperName)_element").data("kendoGrid");
var options = grid.getOptions();
delete options["toolbar"];
Cookies.set("@Html.GetUniqueId(Model.DeveloperName)_settings", kendo.stringify(options), { expires: 7 });
}
function restoreGridSettingsFromCookie() {
var saved = Cookies.get("@Html.GetUniqueId(Model.DeveloperName)_settings");
if (saved) {
var grid = $("#@Html.GetUniqueId(Model.DeveloperName)_element").data("kendoGrid");
grid.setOptions(JSON.parse(saved));
}
}
📦 2. Storage Size Limits
Problem
:
localStorage
has a limit of ~5MB per origin. Cookies are even more limited (~4KB). If you're storing multiple grids or complex configurations, you may hit these limits.
Solution :
- Compress the data using a library like LZ-String .
- Store settings server-side via AJAX and associate them with the user profile.
- Split settings across multiple keys if needed.
✅ Example: Compressing Grid Settings
var compressed = LZString.compressToUTF16(JSON.stringify(options));
localStorage.setItem("@Html.GetUniqueId(Model.DeveloperName)_settings", compressed);
// On restore
var decompressed = LZString.decompressFromUTF16(localStorage.getItem("@Html.GetUniqueId(Model.DeveloperName)_settings"));
var parsed = JSON.parse(decompressed);
grid.setOptions(parsed.options);
🧩 3. Versioning Grid Configurations
Problem : If your grid structure changes (e.g., renamed columns), previously saved settings may cause errors or unexpected behavior.
Solution : Add a version tag to your saved settings. When restoring, check the version and skip applying settings if they’re outdated.
✅ Example: Version-Aware Restore
//in the unload event, instead of options, set the gridSettings object and pass it into the kendo.stringify method.
var gridSettings = {
version: "1.0.0",
options: grid.getOptions()
};
// ...
localStorage["@Html.GetUniqueId(Model.DeveloperName)_element"] = kendo.stringify(gridSettings);
// close unload
// in the tpc ready, instead of checking for options, check for saved settings
var saved = JSON.parse(localStorage.getItem("@Html.GetUniqueId(Model.DeveloperName)_settings"));
if (saved && saved.version === "1.0.0") {
grid.setOptions(saved.options);
} else {
console.warn("Grid settings version mismatch. Skipping restore.");
}
This gives you a clean way to avoid applying incompatible settings after a grid update.
✅ Final Thoughts
Persisting grid customizations enhances user experience and makes your portal feel more responsive and personalized. Whether you use
localStorage
, cookies, or server-side storage, it’s important to consider edge cases like versioning and storage limits.
By combining Kendo’s
getOptions()
and
setOptions()
with thoughtful persistence strategies, you can deliver a more seamless and professional experience to your users.
Leave a commentOrder by
Newest on top Oldest on top