Angular Common - Utils - Errors and Warnings

This section lists core errors and warnings that may occur in DevExtreme applications.

E0001

An internal error that occurs when a method has no implementation.

To solve the issue, please submit a ticket to our Support Center. Include your UI component configuration, fake data, and the steps needed to reproduce the issue in the ticket.

E0002

An internal error that occurs when a member name collision is detected.

To solve the issue, please submit a ticket to our Support Center. Include your UI component configuration, fake data, and the steps needed to reproduce the issue in the ticket.

E0003

An internal error that occurs when you instantiate a class without using the "new" keyword.

To solve the issue, please submit a ticket to our Support Center. Include your UI component configuration, fake data, and the steps needed to reproduce the issue in the ticket.

E0004

An internal error that occurs when a component's NAME property is not specified.

To solve the issue, please submit a ticket to our Support Center. Include your UI component configuration, fake data, and the steps needed to reproduce the issue in the ticket.

E0005

Occurs when the device on which the current application is running is not in the list of known devices.

Accepted devices are the following: "iPhone", "iPhone5", "iPad", "iPhone6", "iPhone6plus", "iPad", "iPadMini", "androidPhone", "androidTablet", "msSurface", and "desktop".

E0006

Occurs when requesting a Url by the key that is not defined within the EndpointSelector's configuration object.

Check to make sure that the EndpointSelector key of the required URL is included into the configuration object.

E0007

An internal error that occurs when the "invalidate" method is called outside the update transaction.

To solve the issue, please submit a ticket to our Support Center. Include your UI component configuration, fake data, and the steps needed to reproduce the issue in the ticket.

E0008

An internal error that occurs when an action cannot be created because the type of the passed property name is not string.

To solve the issue, please submit a ticket to our Support Center. Include your UI component configuration, fake data, and the steps needed to reproduce the issue in the ticket.

E0009

An internal error that occurs when a component is not initialized for this element.

To solve the issue, please submit a ticket to our Support Center. Include your UI component configuration, fake data, and the steps needed to reproduce the issue in the ticket.

E0010

Occurs when the "from"/"to" configuration property of a slide animation is not a plain object.

The "from" and "to" properties should be objects with the following structure: from and to.

E0011

Occurs when an unknown animation type is requested.

Accepted animation types are described in the documentation.

E0012

Occurs when using an old version of the jQuery library.

Please use jQuery version 1.10.0 or greater.

E0013

Occurs when using an old version of the Knockout library.

Please use Knockout version 2.3.0 or greater.

E0014

An internal error that occurs when the 'release' method is called for an unlocked Lock object.

To solve the issue, please submit a ticket to our Support Center. Include your UI component configuration, fake data, and the steps needed to reproduce the issue in the ticket.

E0015

An internal error that occurs when a queued task returns an unexpected result.

To solve the issue, please submit a ticket to our Support Center. Include your UI component configuration, fake data, and the steps needed to reproduce the issue in the ticket.

E0017

An internal error that occurs when a namespace for an event is not defined.

To solve the issue, please submit a ticket to our Support Center. Include your UI component configuration, fake data, and the steps needed to reproduce the issue in the ticket.

E0018

Occurs when a module with the Popup UI component is not linked.

Include a reference to the dx.module-widgets-base.js or dx.module-widgets-web.js script to your application.

E0020

Occurs when an unsupported template engine is set.

E0021

Occurs when an unknown theme is set.

Refer to the current(themeName) method description to learn which theme names are acceptable.

E0022

Occurs when the LINK[rel=dx-theme] tags go before DevExtreme scripts.

For details, refer to the Predefined Themes article.

E0023

Occurs when a name is not specified for a dxTemplate markup component.

Specify a name using the name configuration property of the dxTemplate component.

E0024

Occurs if a DevExtreme bundle is linked more than once on a single page.

E0025

Occurs when an invalid argument is passed to a method.

Check that all arguments are of an appropriate type.

E0100

Occurs when an unknown validation rule type is used.

The predefined validation rule types are listed in the Validation Rules Reference section.

E0101

Occurs when either the min or max property is not specified for the 'range' rule.

The value of the min/max property must not be null or undefined.

E0102

Occurs when the comparisonTarget property is not specified for the 'compare' rule.

The value of the comparisonTarget property must be specified so that 'compare' rule can be checked.

E0103

Occurs if an AsyncRule's validationCallback does not return a promise.

Return a jQuery or native promise from the validationCallback.

E0110

Occurs when an unknown or unregistered validation group is validated using the DevExtreme.validationEngine.validateGroup(group) method.

Check the valid group key is passed as the validateGroup(group) function parameter.

E0120

Occurs when a default adapter cannot be initialized for the target editor.

Check that you associate the dxValidator component with a DevExtreme editor or with a custom adapter that is set to interact with a custom editor.

See Also

E0121

Occurs in drop-down lists when the customItem field of the onCustomItemCreating function's parameter is not set.

Assign a custom item to the customItem field of the onCustomItemCreating function's parameter.

W0000

Appears when a deprecated component is detected in an application.

Use the component that is suggested instead.

W0001

Appears when a deprecated property is detected in an application.

Use the property that is suggested instead.

W0002

Appears when a deprecated method is detected in an application.

Use the method that is suggested instead.

W0003

Appears when a deprecated field is detected in an application.

Use the field that is suggested instead.

W0004

Appears when the timeout that was set to load a theme is over.

To resolve this, do the following.

  • Make sure that the CSS files with the required theme are added to the application.
  • Make sure that the CSS files have valid links in the application's main page.
  • Make sure that a theme name passed to current matches one of the predefined theme names.

For details on themes, refer to the Predefined Themes article.

W0005

Appears when a deprecated event is detected in an application.

Use the event that is suggested instead.

W0006

Appears when a recurrence rule is invalid.

Correct the rule.

W0007

Appears when the Globalize culture script is not referenced on the application page.

To resolve this, do the following.

  • Make sure that the Globalize script for the required culture is added to the application.
  • Make sure that the Globalize script has a valid link in the application main page.

W0008

Appears if an array passed to the views property of the Scheduler UI component contains an invalid view name.

Correct the view name or delete it.

W0009

Occurs if the timeZone property of the Scheduler UI component holds an invalid value.

W0010

Occurs if the application uses a deprecated theme.

Refer to the Predefined Themes guide for the list of current themes.

W0011

Occurs if number parsing is invoked without a defined parser.

Add the parser field to the format object or use a predefined format.

W0012

Occurs if date parsing is invoked without a defined parser.

Add the parser field to the format object or use a predefined format.

W0013

Occurs if one of the deprecated files (dx.web.de.js, dx.mobile.de.js, dx.all.de.js, etc.) is used. Use the dx.messages.xx.js file instead.

W0014

Occurs if a property is set to a deprecated value type. Set the property to the type of value suggested in the warning message.

W0015

Occurs if a function returns a value instead of assigning it to the parameter field.

In the function's declaration, replace the return statement with a command that assigns the value to the suggested field.

W0016

Occurs if a deprecated value is assigned to a property.

Replace the deprecated value with the suggested one in the configuration.

W0017

Occurs if a component's width, height, or similar properties have a value of the function type.

If you need to specify a component's height or width and make the component's size responsive, use viewport units instead of a function. The most simple replacement is the following:

JavaScript
// Before v21.2 
width: function() {
    return window.innerWidth / 2;
}

// Since v21.2
width: '50vw'

If you used a function for more complex calculations, replace it with the native CSS calc() function as follows:

JavaScript
// Before v21.2
height: function() {
    return window.innerHeight / 2 + 100;
}
CSS
<!-- Since v21.2 -->
#elementSelector {
    height: calc(50vh + 100px);
}

W0018

Occurs if a component's position property has a value of the function type.

If your function returned different position values based on a condition, specify the position value before displaying the component to achieve the same effect:

jQuery

Before v21.2:

index.js
$(function() {
    $("#popupContainer").dxPopup({
        position: function() {
            return someCondition ? { my: "top", at: "top" } : { my: "bottom", at: "bottom" };
        }
    });
});

Since v21.2:

index.js
$(function() {
    const popup = $("#popupContainer").dxPopup({
        // ...
    }).dxPopup("instance");

    function showPopup (newPosition) {
        popup.option("position", newPosition);
        popup.show();
    }

    showPopup(someCondition ? { my: "top", at: "top" } : { my: "bottom", at: "bottom" });
});
Angular

Before v21.2:

app.component.ts
app.component.html
import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    popupPositionFunction() {
        return someCondition ? { my: "top", at: "top" } : { my: "bottom", at: "bottom" };
    }
}
<dx-popup ...
    [position]="popupPositionFunction">
</dx-popup>

Since v21.2:

app.component.ts
app.component.html
import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    isPopupVisible: boolean = false;
    popupPosition = undefined;

    constructor() {
        this.showPopup = this.showPopup.bind(this);
    }

    showPopup() {
        this.popupPosition = someCondition ? { my: "top", at: "top" } : { my: "bottom", at: "bottom" };
        this.isPopupVisible = true;
    }
}
<dx-popup ...
    [position]="popupPosition"
    [(visible)]="isPopupVisible">
</dx-popup>
Vue

Before v21.2:

App.vue
<template>
    <DxPopup ...
        :position="popupPositionFunction">
    </DxPopup>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxPopup from 'devextreme-vue/popup';

export default {
    components: {
        DxPopup
    },
    data() {
        return {
            // ...
        }
    },
    methods: {
        popupPositionFunction() {
            return someCondition ? { my: "top", at: "top" } : { my: "bottom", at: "bottom" };
        }
    }
}
</script>

Since v21.2:

App.vue
<template>
    <DxPopup ...
        :position="popupPosition"
        v-model:visible="isPopupVisible">
    </DxPopup>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxPopup from 'devextreme-vue/popup';

export default {
    components: {
        DxPopup
    },
    data() {
        return {
            popupPosition: undefined,
            isPopupVisible: false
        }
    },
    methods: {
        showPopup() {
            this.popupPosition = someCondition ? { my: "top", at: "top" } : { my: "bottom", at: "bottom" };
            this.isPopupVisible = true;
        }
    }
}
</script>
React

Before v21.2:

App.js
import React, { useCallback } from 'react';
import 'devextreme/dist/css/dx.light.css';

import Popup from 'devextreme-react/popup';

export default function App() {
    const popupPositionFunction = useCallback(() => {
        return someCondition ? { my: "top", at: "top" } : { my: "bottom", at: "bottom" };
    }, []);

    return (
        <Popup ...
            position={popupPositionFunction}>
        </Popup>
    );
}

Since v21.2:

App.js
import React, { useCallback, useState } from 'react';
import 'devextreme/dist/css/dx.light.css';

import Popup from 'devextreme-react/popup';

export default function App() {
    const [popupPosition, setPopupPosition] = useState(undefined);
    const [isPopupVisible, setIsPopupVisible] = useState(false);

    const showPopup = useCallback(() => {
        setPopupPosition(someCondition ? { my: "top", at: "top" } : { my: "bottom", at: "bottom" });
        setIsPopupVisible(true);
    }, []);

    const handleOptionChange = useCallback((e) => {
        if (e.name === 'visible') {
            setIsPopupVisible(e.value)
        }
    }, []);

    return (
        <Popup ...
            onOptionChanged={handleOptionChange}
            position={popupPosition}
            visible={isPopupVisible}>
        </Popup>
    );
}

If your function always returned the same position value, simply assign this value to the position property:

jQuery
index.js
$(function() {
    $("#popupContainer").dxPopup({
        // Before v21.2
        position: function() {
            return { my: "top", at: "top" };
        },

        // Since v21.2
        position: { my: "top", at: "top" }
    });
});
Angular

Before v21.2:

app.component.ts
import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    // Before v21.2
    popupPosition() {
        return { my: "top", at: "top" };
    }

    // Since v21.2
    popupPosition = { my: "top", at: "top" };
}
Vue

Before v21.2:

App.vue
<template>
    <DxPopup ...
        :position="popupPosition">
    </DxPopup>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxPopup from 'devextreme-vue/popup';

export default {
    components: {
        DxPopup
    },
    methods: {
        // Before v21.2
        popupPosition() {
            return someCondition ? { my: "top", at: "top" } : { my: "bottom", at: "bottom" };
        }
    },
    data() {
        return {
            // Since v21.2
            popupPosition: { my: "top", at: "top" }
        }
    }
}
</script>
React

Before v21.2:

App.js
import React, { useCallback } from 'react';
import 'devextreme/dist/css/dx.light.css';

import Popup from 'devextreme-react/popup';

// Since v21.2
const popupPosition = { my: "top", at: "top" };

export default function App() {
    // Before v21.2
    const popupPosition = useCallback(() => {
        return { my: "top", at: "top" };
    }, []);

    return (
        <Popup ...
            position={popupPosition}>
        </Popup>
    );
}