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.

Acceptable template engines are listed in the description of the setTemplateEngine(name) method.

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.

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