React Common - Utils - Errors and Warnings

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.

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.

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.

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.

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

Check to make sure that the EndpointSelector key of the required URL is included into the configuration 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.

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.

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.

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

Accepted animation types are described in the documentation.

Please use jQuery version 1.10.0 or greater.

Please use Knockout version 2.3.0 or greater.

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.

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.

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.

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

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

For details, refer to the Predefined Themes article.

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

Check that all arguments are of an appropriate type.

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

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

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

Return a jQuery or native promise from the validationCallback.

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

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

• Validate a Custom Value

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

Use the component that is suggested instead.

Use the property that is suggested instead.

Use the method that is suggested instead.

Use the field that is suggested instead.

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.

Use the event that is suggested instead.

Correct the rule.

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.

Correct the view name or delete it.

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

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

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

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

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

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:

// 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:

// Before v21.2
height: function() {
    return window.innerHeight / 2 + 100;
}

<!-- Since v21.2 -->
#elementSelector {
    height: calc(50vh + 100px);
}

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

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

$(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" });
});

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>

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>

<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>

<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>

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>
    );
}

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:

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

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

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" };
}

<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>

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>
    );
}

If you are using a trial version, you must uninstall all copies of DevExtreme once your 30-day trial period expires. For licensing-related information, please refer to the DevExtreme End User License Agreement.

To continue using DevExtreme in a commercial project, you must purchase a license. For pricing/licensing options, please visit the DevExtreme Purchase page. If you have licensing-related questions or need help with a purchase, please email clientservices@devexpress.com. We will be happy to follow-up.

For more information on DevExtreme licensing-related questions, please refer to the following help topic: Licensing.

To proceed, you can:

• Use the DevExtreme version linked to your license key (visit the DevExpress Download Manager to view a list of licensed versions).

• Renew your DevExpress Subscription (once you renew your subscription, you will receive a new DevExtreme license key and will be entitled to product updates/support services as defined in the DevExtreme End User License Agreement).

If you have licensing-related questions or need help with a renewal, please email clientservices@devexpress.com. We will be happy to assist you.

For more information on DevExtreme licensing-related questions, please refer to the following help topic: Licensing.

To avoid this error, please specify the correct DevExtreme license key in GlobalConfig. If you continue to encounter the error, visit the DevExpress Download Manager to obtain a valid key.

If you have a valid license key and this problem persists, please submit a support ticket via the DevExpress Support Center.

For more information on DevExtreme licensing-related questions, please refer to the following help topic: Licensing.

For more information on DevExtreme licensing-related questions, please refer to the following help topic: Licensing.

To avoid this warning, ensure your minor devextreme package version is the same as other DevExpress products listed in the console message.

For example, you can get the following packages in your warning:

devextreme: 24.1.3
DevExtreme.AspNet.Core: 24.1.4

In this case, upgrade the devextreme package or downgrade DevExtreme.AspNet.Core so both versions are either 24.1.3 or 24.1.4.