javascriptjquerydevexpressdevextreme

DevExpress - Cannot read properties of undefined (reading 'nodeName')

I was getting this error with my complex code, so I simplified it below. The Data Grid gets created and displays. Also, clicking a row displays the alert. However the immediate alert dialog gives this error: "Uncaught TypeError: Cannot read properties of undefined (reading 'nodeName')"

Is there something I need to do before trying to display the alert right when the page loads? I want to avoid the standard JS alert() function.

$(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");
        }
    });
    DevExpress.ui.dialog.alert("Testing", "Confirm");
});
<!-- jQuery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<!-- DevExtreme theme -->
<link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/22.1.5/css/dx.light.css">

<!-- DevExtreme library -->
<script src="https://cdn3.devexpress.com/jslib/22.1.5/js/dx.all.js"></script>

<div id="myGrid"></div>

Solution

  • The error you saw is likely due to a compatibility issue between the version of jQuery used by DevExtreme and the version of jQuery(1.11.3) used in your project.

    So I tried with updated jQuery.v3.6.0 and it works.

    $(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");
    },
  });
  DevExpress.ui.dialog.alert("Testing", "Confirm");
});
    <!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- DevExtreme theme -->
<link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/22.1.5/css/dx.light.css" />

<!-- DevExtreme library -->
<script src="https://cdn3.devexpress.com/jslib/22.1.5/js/dx.all.js"></script>

<div id="myGrid"></div>