DevExpress弹窗报错：Cannot read properties of undefined (reading 'nodeName')

问题描述 #

DataGrid可正常渲染，点击行时调用DevExpress.ui.dialog.alert能正常弹出弹窗，但页面加载时直接调用该方法会抛出错误：Uncaught TypeError: Cannot read properties of undefined (reading 'nodeName')，且希望避免使用原生JS的alert()。

错误原因 #

$(document).ready仅确保DOM结构加载完成，但DevExtreme的UI组件内部初始化（包括对话框依赖的基础容器元素创建）可能还在异步执行。此时直接调用对话框方法，组件无法找到所需的挂载DOM节点，因此触发错误。而点击行时调用正常，是因为此时DataGrid已完成初始化，DevExtreme的UI环境也已就绪。

解决方法 #

方法1：将弹窗调用放在DataGrid的onInitialized事件中 #

利用DataGrid的初始化完成事件，确保DevExtreme UI环境就绪后再调用弹窗：

$(document).ready(function () {
    $("#myGrid").dxDataGrid({
        dataSource: [{
            "Name": "John",
            "Age": 25
        },{
            "Name": "George",
            "Age": 27
        },{
            "Name": "Betty",
            "Age": 30
        }],
        onRowClick(e) {
            DevExpress.ui.dialog.alert("Testing", "Confirm");
        },
        // DataGrid初始化完成后触发弹窗
        onInitialized() {
            DevExpress.ui.dialog.alert("Testing", "Confirm");
        }
    });
});

方法2：使用setTimeout延迟执行弹窗调用 #

通过setTimeout将弹窗调用放入下一轮事件循环，给DevExtreme足够时间完成内部初始化：

$(document).ready(function () {
    $("#myGrid").dxDataGrid({
        dataSource: [{
            "Name": "John",
            "Age": 25
        },{
            "Name": "George",
            "Age": 27
        },{
            "Name": "Betty",
            "Age": 30
        }],
        onRowClick(e) {
            DevExpress.ui.dialog.alert("Testing", "Confirm");
        }
    });
    // 延迟执行弹窗，确保DevExtreme环境就绪
    setTimeout(() => {
        DevExpress.ui.dialog.alert("Testing", "Confirm");
    }, 0);
});

内容的提问来源于stack exchange，提问作者Chris