How to reset Pivot Table to initial state when state persistence is enabled?
You can store and retrieve the initial state settings in local storage in the load event of the JavaScript pivot table. Retrieval settings can be applied to pivot grid through setProperties. In the following example, set the initial settings using the button click event. The following code snippet demonstrates the creation of pivot table with reset option.
CSHTML
<div class="control-section">
@Html.EJS().Button("state").Content("Go To Initial State").IsPrimary(true).Render()
<div class="content-wrapper">
@Html.EJS().PivotView("pivot1").Width("800").Height("300").EnablePersistence(true).ShowFieldList(true).ShowGroupingBar(true).DataSource(dataSource => dataSource.Data((IEnumerable<object>)ViewBag.Data).ExpandAll(false).EnableSorting(true)
.FormatSettings(formatsettings => { formatsettings.Name("Amount").Format("C0").MaximumSignificantDigits(10).MinimumSignificantDigits(1).UseGrouping(true).Add(); })
.Rows(rows => { rows.Name("Country").Add(); rows.Name("Products").Add(); })
.Columns(columns => { columns.Name("Year").Add(); })
.Values(values =>
{
values.Name("Amount").Caption("Sold Amount").Add();
})).GridSettings(new PivotViewGridSettings { ColumnWidth = 140 }).Load("load").Render()
</div>
The following code snippet demonstrates how to store the initial state in the load event.
Javascript
<script>
function load() {
if (window.localStorage.getItem('initialState') === null && window.localStorage.getItem('pivotviewpivot1')) {
// store initial state settings in local storage
window.localStorage.setItem('initialState', window.localStorage.getItem('pivotviewpivot1'));
}
}
document.getElementById("state").addEventListener('click', function () {
var model = JSON.parse(window.localStorage.getItem('initialState'));
// Reset initial state to grid through setProperties
document.getElementById('pivot1').ej2_instances[0].setProperties(model);
});
</script >
Sample link: Reset-PivotGrid-to-initial-state-while-enabling-EnablePersistence
Conclusion
I hope you enjoyed learning how to reset Pivot Table to initial state when state persistence is enabled.
You can refer to our JavaScript Pivot Table feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our JavaScript Pivot Table example to understand how to create and manipulate data.
For current customers, you can check out our components from 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, Direct-Trac, or feedback portal. We are always happy to assist you!
