Downgrade Wijmo

Posted by: bmysliwy on 11 October 2023, 11:31 pm EST

bmysliwy

Post Options:
Link
Copy

Posted 11 October 2023, 11:31 pm EST

Helllo,

I have problem with downgrade. I started create new application with version 5.20231.904 but after it turned out that we have licence to 2022v2. And i change version to 5.20222.877 and now i have many problem with controls.

This is my all dependencies:

"@grapecity/wijmo.react.all": "^5.20222.877",
    "@microsoft/signalr": "^7.0.11",
    "@reduxjs/toolkit": "^1.9.6",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.5.2",
    "@types/node": "^16.18.54",
    "@types/react": "^18.2.22",
    "@types/react-dom": "^18.2.7",
    "@types/react-redux": "^7.1.26",
    "@types/react-router-dom": "^5.3.3",
    "@types/react-router-redux": "^5.0.22",
    "@types/redux": "^3.6.0",
    "@types/redux-logger": "^3.0.9",
    "@types/redux-thunk": "^2.1.0",
    "@types/superagent": "^4.1.18",
    "axios": "^1.5.0",
    "jszip": "^3.10.1",
    "moment": "^2.29.4",
    "react": "^18.2.0",
    "react-cookie": "^6.1.1",
    "react-dom": "^18.2.0",
    "react-inject-env": "^2.1.0",
    "react-moment": "^1.1.3",
    "react-redux": "^8.1.2",
    "react-router-dom": "^6.16.0",
    "react-router-redux": "^4.0.8",
    "react-scripts": "5.0.1",
    "redux": "^4.2.1",
    "redux-devtools-extension": "^2.13.9",
    "redux-logger": "^3.0.6",
    "redux-thunk": "^2.4.2",
    "sass": "^1.68.0",
    "superagent": "^8.1.2",
    "superagent-promise": "^1.1.0",
    "TeeChart": "^0.1.4",
    "typescript": "^4.9.5",
    "universal-cookie": "^6.1.1",
    "web-vitals": "^3.4.0",
    "xlsx": "^0.18.5"

Best regrade!

sonu.pandey
- Post Options:
- Link
  Copy
Posted 12 October 2023, 2:53 pm EST

Hi,

Could you please share the issues you are facing in the different controls along with a simplified sample of your application so that we can look into it and assist you accordingly?

Regards

bmysliwy

Post Options:
Link
Copy

Posted 15 October 2023, 9:28 pm EST

One piece of code. This code return page with out grid only scroll exsist but when i change props autoGenerateColumns to false then return all grid.

The dependencies is correct for this control version ?

const FotoCorrelationMeteoComponent: React.FC = () => {
    const { SR } = useLanguage();
    const [data, setData] = React.useState<KorelacjaMeteo[]>([]);
    const panelFotoState: PanelFotoState = useSelector((state: any) => state.panelfotoReducer);

    const flexGrid = React.useRef<wjGrid.FlexGrid>();
    const cellRange = React.useRef<wjGrid.CellRange>();

    React.useEffect(() => {
        if (panelFotoState.selected?.korelacjaMeteo) {
            setData(panelFotoState.selected.korelacjaMeteo);
        }
    }, [panelFotoState.selected?.korelacjaMeteo]);

    const initialized = (e: wjGrid.FlexGrid) => {
        flexGrid.current = e;
    };
    const formatItem = (e: wjGrid.FormatItemEventArgs) => {
        if (!flexGrid.current || !cellRange.current) return;

        if (e.panel.cellType === wjGrid.CellType.ColumnHeader) {
            if (e.col === 0) {
                wjCore.setCss(e.cell, {
                    display: "flex",
                    justifyContent: "center",
                    alignItems: "center",
                });
                if (cellRange === undefined || cellRange.current._row - cellRange.current._row2 === 0) {
                    e.cell.innerHTML = " ";
                } else {
                    e.cell.innerHTML = "<input type=checkbox id=allCheck>";
                    let checkbox1 = document.getElementById("allCheck") as HTMLInputElement;
                    checkbox1?.addEventListener("change", (e) => {
                        const input = e.currentTarget! as HTMLInputElement;
                        setTimeout(() => {
                            setCheckStateOnSelectedItems(input.checked);
                        }, 50);
                    });

                    checkbox1.checked = checkOnChartSelectedItems();
                }
            }
        } else if (e.panel.cellType === wjGrid.CellType.Cell) {
            if (e.col === 0) {
                const row = e.panel.rows[e.row];
                toggleClass(e.cell, "center2", true);
                row.isReadOnly = false;
            }
            if (e.col === 1) {
                let dataItem = flexGrid.current.rows[e.row].dataItem as KorelacjaMeteo;
                e.cell.innerHTML = new Date(dataItem.data).toFormat("yyyy-MM-dd");
            }
        }
    };
    const checkOnChartSelectedItems = (): boolean => {
        if (!cellRange.current) return false;

        if (cellRange.current._row < cellRange.current._row2) {
            for (let i = cellRange.current._row; i <= cellRange.current._row2; i++) {
                if (flexGrid.current !== undefined) {
                    const korelacja: KorelacjaMeteo = flexGrid.current.rows[i].dataItem;
                    return korelacja.wybrany;
                }
            }
        } else {
            for (let i = cellRange.current._row2; i <= cellRange.current._row; i++) {
                if (flexGrid.current !== undefined) {
                    const korelacja: KorelacjaMeteo = flexGrid.current.rows[i].dataItem;
                    return korelacja.wybrany;
                }
            }
        }
        return false;
    };
    const setCheckStateOnSelectedItems = (isChecked: boolean) => {
        if (!cellRange.current) return false;

        if (cellRange.current._row < cellRange.current._row2) {
            for (let i = cellRange.current._row; i <= cellRange.current._row2; i++) {
                if (flexGrid.current !== undefined) {
                    const korelacja: KorelacjaMeteo = flexGrid.current.rows[i].dataItem;
                    korelacja.wybrany = isChecked;
                }
            }
        } else {
            for (let i = cellRange.current._row2; i <= cellRange.current._row; i++) {
                if (flexGrid.current !== undefined) {
                    const korelacja: KorelacjaMeteo = flexGrid.current.rows[i].dataItem;
                    korelacja.wybrany = isChecked;
                }
            }
        }
        flexGrid.current?.invalidate();
    };
    const onCellEditEnding = (e: wjGrid.CellRangeEventArgs) => {
        if (flexGrid.current !== undefined) {
            if (e.col === 0) {
                const korelacja: KorelacjaMeteo = flexGrid.current.rows[e.row].dataItem;
                korelacja.wybrany = !korelacja.wybrany;
            }
        }
    };
    const selectionChanged = (e: wjGrid.CellRangeEventArgs) => {
        if (e.row >= 0) {
            cellRange.current = e.range;
            flexGrid.current?.invalidate();
        }
    };

    const preview = async (context: ICellTemplateContext) => {
        const korelacja: KorelacjaMeteo = flexGrid.current?.rows[context.row._idx].dataItem;
        ModalDialog.show(<FotoPreviewComponent date={korelacja.data} />, SR.PodgladDanychNaDzien, undefined, false);
    };

    return (
        <Controls.FrameMain>
           
                <FlexGrid
                    isReadOnly={false}
                    allowDelete={true}
                    alternatingRowStep={1}
                    showMarquee={false}
                    showGroups={true}
                    allowDragging={false}
                    initialized={(e) => initialized(e)}
                    formatItem={(flex, e) => formatItem(e)}
                    onCellEditEnding={(e) => onCellEditEnding(e)}
                    onSelectionChanged={(e) => selectionChanged(e)}
                    selectionMode="RowRange"
                    headersVisibility="Column"
                    autoGenerateColumns={false}
                    childItemsPath="*"
                    itemsSource={data}
                >
                    <FlexGridColumn
                        header=" "
                        binding="wybrany"
                        dataType="Boolean"
                        isReadOnly={true}
                        allowSorting={false}
                        width={40}
                        align="center"
                        verticalAlign="middle"
                    />
                    <FlexGridColumn header={SR.Doba} binding="data" isReadOnly={true} allowSorting={false} width={95} align="center" verticalAlign="middle" />
                    <FlexGridColumn header={SR.Korelacja} binding="korelacjaK" isReadOnly={true} align="right" width="*" verticalAlign="middle" />
                </FlexGrid>
        </Controls.FrameMain>
    );
};

export default FotoCorrelationMeteoComponent;

bmysliwy

Post Options:
Link
Copy

Posted 15 October 2023, 9:43 pm EST

Some code from other page


ERROR
Cannot read properties of undefined (reading 'binding')
TypeError: Cannot read properties of undefined (reading 'binding')
    at GridPanel.getCellData (http://localhost:3000/static/js/bundle.js:23941:7)
    at flexInit (http://localhost:3000/main.0c5b766334baad535e20.hot-update.js:518:77)
    at Object.initialized (http://localhost:3000/main.0c5b766334baad535e20.hot-update.js:814:25)
    at ComponentBase._prepareControl (http://localhost:3000/static/js/bundle.js:42876:86)
    at ComponentBase.componentDidMount (http://localhost:3000/static/js/bundle.js:42730:17)
    at invokeLayoutEffectMountInDEV (http://localhost:3000/static/js/bundle.js:129349:26)
    at invokeEffectsInDev (http://localhost:3000/static/js/bundle.js:131267:15)
    at commitDoubleInvokeEffectsInDEV (http://localhost:3000/static/js/bundle.js:131248:9)
    at flushPassiveEffectsImpl (http://localhost:3000/static/js/bundle.js:131023:9)
    at flushPassiveEffects (http://localhost:3000/static/js/bundle.js:130961:18)
ERROR
Cannot read properties of undefined (reading 'binding')
TypeError: Cannot read properties of undefined (reading 'binding')
    at GridPanel.getCellData (http://localhost:3000/static/js/bundle.js:23941:7)
    at flexInit (http://localhost:3000/main.0c5b766334baad535e20.hot-update.js:518:77)
    at Object.initialized (http://localhost:3000/main.0c5b766334baad535e20.hot-update.js:814:25)
    at ComponentBase._prepareControl (http://localhost:3000/static/js/bundle.js:42876:86)
    at ComponentBase.componentDidMount (http://localhost:3000/static/js/bundle.js:42730:17)
    at invokeLayoutEffectMountInDEV (http://localhost:3000/static/js/bundle.js:129349:26)
    at invokeEffectsInDev (http://localhost:3000/static/js/bundle.js:131267:15)
    at commitDoubleInvokeEffectsInDEV (http://localhost:3000/static/js/bundle.js:131248:9)
    at flushPassiveEffectsImpl (http://localhost:3000/static/js/bundle.js:131023:9)
    at flushPassiveEffects (http://localhost:3000/static/js/bundle.js:130961:18)
ERROR
Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.
TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.
    at FlexGrid._getCanvasContext (http://localhost:3000/static/js/bundle.js:28596:11)
    at http://localhost:3000/static/js/bundle.js:27874:19
    at ObservableArray.deferUpdate (http://localhost:3000/static/js/bundle.js:47019:7)
    at FlexGrid.autoSizeColumns (http://localhost:3000/static/js/bundle.js:27868:42)
    at FlexGrid.autoSizeColumn (http://localhost:3000/static/js/bundle.js:27853:10)
    at fillFlexGrid (http://localhost:3000/main.0c5b766334baad535e20.hot-update.js:250:20)
    at http://localhost:3000/main.0c5b766334baad535e20.hot-update.js:110:7
ERROR
Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.
TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.
    at FlexGrid._getCanvasContext (http://localhost:3000/static/js/bundle.js:28596:11)
    at http://localhost:3000/static/js/bundle.js:27874:19
    at ObservableArray.deferUpdate (http://localhost:3000/static/js/bundle.js:47019:7)
    at FlexGrid.autoSizeColumns (http://localhost:3000/static/js/bundle.js:27868:42)
    at FlexGrid.autoSizeColumn (http://localhost:3000/static/js/bundle.js:27853:10)
    at fillFlexGrid (http://localhost:3000/main.0c5b766334baad535e20.hot-update.js:250:20)
    at http://localhost:3000/main.0c5b766334baad535e20.hot-update.js:110:7

sonu.pandey
- Post Options:
- Link
  Copy
Posted 16 October 2023, 6:07 pm EST

Hello,

The dependencies you shared should work well with the Wijmo version of your application. It seems that your issue is not related to the version. I’ve prepared a sample to replicate your issue, incorporating some of your code. Due to the absence of certain code specific to your application, I’ve created a dummy grid. Could you please refer to this sample and let us know if we missed anything to replicate your issue at our end? It is possible that the issue is caused by some other factor within your application. Since we are unable to replicate the issue, I kindly request you to share a sample that demonstrates the issue, helping us to further investigate the root cause and assist you accordingly. Without a sample to replicate the issue, we cannot comment on the exact nature of the problem.

Sample link: https://stackblitz.com/edit/react-ybwr9j?file=package.json,index.js

You can also share your application code with us only by creating a support ticket. Please log into your Grapecity account and navigate to ‘My Support’ > ‘My Cases’ to create a new ticket."

Regards
bmysliwy
- Post Options:
- Link
  Copy
Posted 17 October 2023, 4:22 pm EST

Hello,

I found solution to this problem. The solution is to change the page rendering from

const container = document.getElementById(‘root’);

const root = createRoot(container);

root.render({…});

to

ReactDOM.render({…}, document.getElementById(“root”));

Thanks for the help.

Best regards!
sonu.pandey
- Post Options:
- Link
  Copy
Posted 18 October 2023, 3:51 pm EST

Hello,

We are glad that you were able to resolve your issue by yourself. Thanks for sharing the solution.

Regards

Please login to reply to thread

Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels

ComponentOne

Forums for all current editions of the ComponentOne .NET UI control product line, including ComponentOne Studio and ComponentOne Studio for Xamarin.
ActiveReports

Forums for all versions of ActiveReports and ActiveReports Server
Spread

Forums for all current versions of Spread .NET spreadsheets, SpreadJS JavaScript spreadsheets, and SpreadCOM spreadsheets.
Wijmo

Forums for all Wijmo products, including Wijmo Core, FinancialChart, FlexSheet, MultiRow, OLAP, and ReportViewer
- General Discussion
Document Solutions

Forums for all Document Solutions products, including Document Solutions for PDF, Word, Excel (.NET and Java), and Imaging.

Downgrade Wijmo

Need extra support?

Forum Channels

ComponentOne

ActiveReports

Spread

Wijmo

Document Solutions