Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
45
Issue Restoring Grid Saved State
posted

Hello,

I have upgraded the grid to 18.5.1 to use the new IgrGridState functionality but there seems to be a bug where it erases the column CSS classes after restoring the grid state.

Is this a bug you're working on currently?  This issue coupled with the outstanding issue from 2 weeks ago is going to prevent us from adopting 18.5.1.  At this point I'm considering just downgrading to 18.3.1 and write my own state saving functionality.

(Outstanding issue from two weeks ago: https://ko.infragistics.com/community/forums/f/ignite-ui-for-react/126140/grid-header-group-changes-between-18-3-1-and-18-5-1?_ga=2.153339960.1669950691.1710339965-1491302852.1697218535&_gac=1.82535140.1707140506.CjwKCAiAq4KuBhA6EiwArMAw1KN7LFf-Tj6bP6RMzYiGCt0nw09CjKoRS0NbKIDAfQQ9qgKlfyzuABoCr9cQAvD_BwE)

Thanks,

Phil

  • 700
    Offline posted

    Hello Phil,

    Thank you for posting in our community!

    I have been looking into your question and as mentioned in our State Persistence Limitations section here:

    getStateAsString method uses JSON.stringify() method to convert the original objects to a JSON string. JSON.stringify() does not support Functions, thats why the IgrGridState component will ignore the columns formatterfilterssummariessortStrategycellClassescellStylesheaderTemplate and bodyTemplate properties.

    Having this in mind, what I can say is that this behavior is expected and in order to restore the cellClasses, you should assign them again when restoring the grid state.

    For example:

    component.css
    .cellBackground {
        background-color: green;
    }

    component.tsx
    
    <IgrGrid autoGenerate="false" ref={gridRef} data={DATA}>
        <IgrGridState ref={gridStateRef}></IgrGridState>
        <IgrColumn
            field="ID"
            header="Product ID"
            cellClasses={cellClassesHandler}
        ></IgrColumn>
        ...
    </IgrGrid>
    
    const cellClassesHandler = {
        cellBackground: (rowData: any, columnKey: string, cellValue: any, rowIndex: number) => cellValue < 4,
    };

    The above configuration will set the background color to green for the cells with values 1, 2 ,3. 

    Then, when restoring the state, the cellClasses input property should be set to the custom cellClassesHandler object literal since the state ignores the column cell classes.

    function restoreGridState() {
        const state = window.localStorage.getItem(stateKey);
    
        if (state) {
            gridStateRef.current.applyStateFromString(state, []);
            gridRef.current.getColumnByName("ID").cellClasses = cellClassesHandler;
        }
    }

    The result of the above configuration could be observed in the below attachment:

    Additionally, regarding the issue discussed in the following forum thread here, what I can say is that this behavior has been identified and fixed and will be available in the next official release.

    Attached could be found a small sample demonstrating my suggestion regarding the cellClasses.

    Please test it on your side and let me know if you need any further assistance regarding this matter.

    Looking forward to your reply.

    Sincerely,
    Riva Ivanova
    Software Developer

    5482.IgrGrid - state persistence cellClasses.zip