Storing the state of DevExtreme DataGrid in Angular

Currently, I have integrated the DevExtreme DataGrid widget into my Angular application.

Here is a snippet of how my DataGrid is configured:

<dx-data-grid
    id="gridContainer"
    [dataSource]="employees"
    [allowColumnReordering]="true"
    [allowColumnResizing]="true"
    [columnAutoWidth]="true">
    <dxo-column-chooser [enabled]="true"></dxo-column-chooser>
    <dxo-column-fixing [enabled]="true"></dxo-column-fixing>
    <dxo-state-storing [enabled]="true" type="custom" savingTimeout="2000" [customSave]="tableStateSave" [customLoad]="tableStateLoad"></dxo-state-storing>
    <dxi-column
        caption="Employee"
        [width]="230"
        [fixed]="true"
        [calculateCellValue]="calculateCellValue"
    ></dxi-column>
    <dxi-column dataField="BirthDate" dataType="date"></dxi-column>
    <dxi-column dataField="HireDate" dataType="date"></dxi-column>
    <dxi-column dataField="Position" alignment="right"></dxi-column>
    <dxi-column dataField="Address" [width]="230"></dxi-column>
    <dxi-column dataField="City"></dxi-column>
    <dxi-column dataField="Zipcode" [visible]="false"></dxi-column>
    <dxi-column dataField="HomePhone"></dxi-column>
    <dxi-column dataField="MobilePhone"></dxi-column>
    <dxi-column dataField="Skype"></dxi-column>
    <dxi-column dataField="Email"></dxi-column>
</dx-data-grid>

In this section:

<dxo-state-storing [enabled]="true" type="custom" savingTimeout="2000" [customSave]="tableStateSave" [customLoad]="tableStateLoad"></dxo-state-storing>

I am utilizing custom methods (tableStateLoad and tableStateSave) to manage the state of my DataGrid (columns positions and sizes).

The current setup automatically saves the state after any changes within a 2-second timeout period.

Now, I am looking to replace this automated saving feature with a manual action triggered by a button click.

Any suggestions on achieving this?

javascriptangulartypescriptdevexpressdevextreme

Answer №1

New approach to eliminate the need for dxo-state-storing in your grid.

To achieve this, simply include the following line within your dx-grid:

[stateStoring]="stateSorting"

Additionally, for the dxo-column-chooser, you can specify the select mode as shown below:

<dxo-column-chooser
    [enabled]="true"
    mode="select">
</dxo-column-chooser>

Implement these changes in your HTML code snippet:

<dx-data-grid
    id="gridContainer"
    [dataSource]="employees"
    [stateStoring]="stateStoring"
    [allowColumnReordering]="true"
    [allowColumnResizing]="true"
    [columnAutoWidth]="true">
    <dxo-column-chooser [enabled]="true" mode="select"></dxo-column-chooser>
    <dxo-column-fixing [enabled]="true"></dxo-column-fixing>
    <dxi-column
        caption="Employee"
        [width]="230"
        [fixed]="true"
        [calculateCellValue]="calculateCellValue"
    ></dxi-column>
    <dxi-column dataField="BirthDate" dataType="date"></dxi-column>
    <dxi-column dataField="HireDate" dataType="date"></dxi-column>
    <dxi-column dataField="Position" alignment="right"></dxi-column>
    <dxi-column dataField="Address" [width]="230"></dxi-column>
    <dxi-column dataField="City"></dxi-column>
    <dxi-column dataField="Zipcode" [visible]="false"></dxi-column>
    <dxi-column dataField="HomePhone"></dxi-column>
    <dxi-column dataField="MobilePhone"></dxi-column>
    <dxi-column dataField="Skype"></dxi-column>
    <dxi-column dataField="Email"></dxi-column>
</dx-data-grid>

In the corresponding typescript file, make sure to import the necessary dependencies:

import DevExpress from "devextreme";
import StateStoring = DevExpress.common.grids.StateStoring;

Then, configure the state storing functionality with the following code snippet:

public stateStoring: StateStoring = {
    type: 'localStorage',
    enabled: true,
    storageKey: 'newGridStorageKey'
}

Answer №2

If you want to utilize the dxo-state-storing directive without defining a custom save method, you can do so by configuring it like this:

<dxo-state-storing [enabled]="true" type="custom" savingTimeout="2000"  [customLoad]="tableStateLoad"></dxo-state-storing>

Alternatively, you can simply assign an empty function to the customSave property. This will ensure that the state is loaded automatically but not saved at all. To save the state using your own logic, create a button with a click handler that accesses the current grid's state using grid.instance.state().

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

The current state of my DOM doesn't match the updated value in my model. The update is triggered by a function that is called when a button is clicked

app.controller('thumbnailController', function ($scope) { debugger $scope.customers = [ { name: 'Ave Jones', city: 'Phoenix' }, { name: 'Amie Riley', city: 'Phoenix&ap ...

javascriptjqueryhtmlangularjs

Updating visual appearance with button clicks and unclicks

Is there a way to dynamically update the button image while clicking on it? This is what I have tried: $('.gamebox_minimap_plus').click(function() { $(this).css("background-image","url('gfx/plus2.png')"); }); The image ch ...

javascriptjqueryimagebutton

What could be causing my Link to malfunction in my about.js file?

I've encountered an issue where clicking the link in my app doesn't produce any result, and I'm unsure of the cause. Below is the content of my app.js file: import './App.css'; import {BrowserRouter as Router, Routes, Route} from ...

javascriptcssreactjs

Utilizing React's idiomatic approach to controlled input (leveraging useCallback, passing props, and sc

As I was in the process of creating a traditional read-fetch-suggest search bar, I encountered an issue where my input field lost focus with every keypress. Upon further investigation, I discovered that the problem stemmed from the fact that my input comp ...

reactjstypescriptscopeusecallback

Showing outcomes from various API requests

I have encountered an issue while making two API calls to a backend server and trying to display both responses in JSON format to the user. Strangely, alert 2 is showing as 'undefined' when I check the console, while alert 1 works perfectly fine. ...

javascriptjsonnode.jsrestbackend

Vanishing Tooltip following an implementation of the backdrop-filter

I'm having an issue with the blur effect on my background image. Although it works well, my tooltips also end up being blurred behind the divs: https://i.stack.imgur.com/BMdh4.png Is there a way to ensure that my tooltips stay on top of the subseque ...

javascripthtmlcss

Issues with Retrieving Nested Arrays

I am encountering an issue with an object within an array and I am looking to specifically display that as an array. data1 const data1 = [ { "id": "01", "info": "fefef", "sub": "hieei&qu ...

javascriptarraysobjectecmascript-6ecmascript-2016

Unusual behavior observed in AngularJs local variables

This code snippet is from the controller: cat1=[]; $.getJSON('categories/1/', function(data) { cat1 = data; //this returns a JSON object }); //cat2..4 are also JSONs $scope.pictures=[cat1,cat2,cat3,cat4,cat5]; The issue here seems to be th ...

javascriptangularjs

Ways to dynamically insert a new row into a table based on user input in a Postman-like reactive table

Is there a way to dynamically insert a row when a single character is entered into an input field in the header tab, similar to how Postman functions? 1) If a user types any single character in the td of the first row, then a new row should be added below ...

javascripthtmlangular

What is the best way to update the state of a particular slider component?

When trying to update the value of a specific slider during the onChange event, I noticed that it was affecting all sliders instead. Is there a way to target and set the state of only one slider during this event? Here's what I've attempted so f ...

javascriptreactjsmaterial-ui

Is there a way to access various history.pushState events when using window.popState in JavaScript?

In my code, there are two pushStates that I need to read separately and execute different functions for. However, when the form is not submitted, the related pushState does not trigger and results in this error: Uncaught TypeError: Cannot read property &ap ...

javascriptwindowpushstatepopstate

What is the reasoning behind an empty input value being considered as true?

I am facing an issue with the following code that is supposed to execute oninput if the input matches the answer. However, when dealing with a multiplication problem that equals 0, deleting the answer from the previous calculation (leaving the input empt ...

javascriptangularif-statementinputnull

Enhance the aesthetic appeal of the imported React component with added style

I need assistance with applying different styles to an imported 'notification' component within my header component. The notification component has its own CSS style, but I want to display it in the header component with unique styling. How can I ...

javascriptreactjstypescriptreact-nativereact-component

Iterating through an array with conditional statements in JavaScript

I have recently joined this community and am new to coding. Unfortunately, I do not have anyone who can assist me with my issue. I have watched numerous YouTube videos in an attempt to solve the problem myself. I am working on looping through the array bel ...

javascriptarraysfunctionloopsif-statement

Typeorm encountered an error when attempting to assign the unknown type to an entity

I'm encountering difficulties while using TypeOrm with TypeScript for a specific project. It appears that TypeScript is unable to recognize a type being returned from a TypeORM entity. @Entity({ name: "users", synchronize: false }) export default c ...

typescripttypeorm

Browsing through different backdrop visuals

I realize this question has been brought up numerous times before, but I urge you to take a moment and read through it. Currently, I am looking to add more interactivity to my HTML page. My goal is to change the background image every five seconds with a ...

javascriptjqueryhtmlcss

How to display a page outside the router-outlet in angular 4

I'm currently developing an angular 4 application and I am trying to figure out how to load the login.page.ts outside of the router-outlet This is what my home.component.html file looks like: <div class="container"> <top-nav-bar></ ...

javascriptangulartypescript

Compiling the configureStore method with the rootreducer results in compilation failure

Software Setup @angular/cli version: ^9.1.2 System Details NodeJS Version: 14.15.1 Typescript Version: 4.0.3 Angular Version: 10.1.6 @angular-redux/store version: ^11.0.0 @angular/cli version (if applicable): 10.1.5 OS: Windows 10 Expected Outcome: ...

angulartypescriptredux

Managing empty props in React applications

I am facing an issue where I need to display an image fetched from an API on app start, but when I try to render it in React, the application crashes with the error message: TypeError: Cannot read property 'icon' of undefined. Although the icon ...

javascriptreactjsundefined

Troubling inconsistency in jQuery's .css function performance

I'm facing a problem with the jquery .css function. I am using it to retrieve the actual height of elements that have their height set to auto. The code I am currently using is as follows: $(this).css({ height: $(this).css("height"), width: $(this).c ...

javascriptjquerycss