JavaScript/jQuery Errors and Warnings API

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.

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.

Use custom implementation of state storing. In this case, you should set the stateStoring.type property to "custom" and pass the appropriate functions to the stateStoring.cusomLoad and stateStoring.customSave properties.

Use the TextBox UI component in the template.

Pass the function implementing the remove(key) method to the remove property of the CustomStore.

Make sure that the itemDeleteMode and menuMode properties have valid values.

See the lookup.dataSource property's description for details on valid data sources.

Use the collapseAll(groupIndex) method only if the UI component uses an array or locally stored data.

Check the validity of the value passed to the searchMode property.

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.

Check the validity of the object passed to the removeMarker(marker) or removeRoute(route) method.

Check the validity of the object passed to the markers property.

Check the validity of the object passed to the routes property.

Simplify the layout configuration.

Define the calculateCustomSummary property value.

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.

Check that the appointment has a start date specified. This is an obligatory field for displaying appointments in the UI component's timetable.

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.

This error occurs when your browser version does not implement API for saving files. We recommend that you update your browser to a newer version. Supported browsers are listed here.

This error can appear in the following cases:

• Invalid editorType value
  Refer to the editorType description for a list of accepted values.

• Missing modules
  The Form automatically imports modules only for basic editors. This helps reduce the bundle size. If you use other editors, import their modules manually. Refer to the editorType description for more information.

• Insufficient empty item configuration
  Empty items require that the itemType property is set to "empty".

• Incorrect editorOptions configuration
  editorOptions configure the editor specified by the editorType. Ensure that editorOptions match the editorType. Review the editor's API reference and ensure that all used editor properties have correct values.

The DataGrid UI component can display grouped data if data items have the following structure.

{
    data: [{
        key: "Group 1",
        items: [ ... ],          // subgroups or data objects if there are no further subgroups (check group.isExpanded = true)
                                 // is null if group.isExpanded = false 
        count: 3,                // count of items in this group; required only when items = null
        summary: [30, 20, 40]    // group summary results
    },
    ...
    ], 
    totalCount: 200,              // if requireTotalCount = true
    summary: [170, 20, 20, 1020], // total summary results
    groupCount: 35                // if requireGroupCount = true
}

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.

Check the uniqueness of each data item key value.

Reference the specified script before the DevExtreme scripts. You can use the following links:

<head>
    <!-- ... -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.4.0/polyfill.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/exceljs/4.4.0/exceljs.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.2/FileSaver.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.0.0/jspdf.umd.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.9/jspdf.plugin.autotable.min.js"></script>
    <!-- reference the DevExtreme sources here -->
</head>

See Also

• CDN
• npm
• Local Files
• ASP.NET Core Controls - Link Client-Side Resources

If your data is a JavaScript array, use the UI component's keyExpr property to specify the key field. Otherwise, use the key property in the store.

See Also

• key in ArrayStore | CustomStore | LocalStore | ODataStore

Make sure that the field specified in the key property exists in all data objects associated with the Store.

See Also

• ArrayStore - key
• CustomStore - key
• LocalStore - key
• ODataStore - key

Check that the key and keyExpr properties have the same value.

See Also

• key in ArrayStore | CustomStore | LocalStore | ODataStore

Specify key in the Store.

See Also

• key in ArrayStore | CustomStore | LocalStore | ODataStore

Check that all data objects have the field specified in the UI component's keyExpr property or the Store's key property.

See Also

• keyExpr in TreeList | DataGrid | Gantt
• key in ArrayStore | CustomStore | LocalStore | ODataStore

Check that the data field used in the filter expression exists in the fields array.

See Also

• fields.dataField

Check that the field's filterOperations property includes the operation.

Check that all columns that allow filter operations have the dataField or name property specified.

This error is specific to the popup and form editing modes. To correct it, choose a different editing mode or validate the editor's value in the onRowValidating function instead of using the validation rules.

Import the converter:

import "devextreme/ui/html_editor/converters/markdown";
// or
// require("ui/html_editor/converters/markdown");

Set the buttons[] property to an array that contains objects or string values.

Check that the name property is specified for all the buttons.

Check that the name property has a valid and unique value for all the buttons.

Follow to the UI component's buttons[] description and ensure that you use only the types specified in the accepted values.

To remove this error, check that both properties are integers in the [0, 24] range and specify a startDayHour before the endDayHour.

Check that the name property has a unique value for all the columns.

Check that the name property is specified for all editable columns.

The offset option must be an integer in the [-1440, 1440] range, divisible by 5 without a remainder.

cellDuration must be a positive integer, evenly dividing the (endDayHour - startDayHour) interval.

A UI component accepts an array of objects as a data source. If you try to pass anything else, the E2001 error occurs. To see an example of how to provide data for a UI component, refer to the Specify a Data Source help topics.

See Also

• onIncidentOccurred

By default, data type of arguments and values is determined automatically based on the type of values from the data source. In some cases, specifying the data type explicitly may be required. For this purpose, the argumentAxis.argumentType and valueAxis.valueType properties can be used.

Similarly, the types of argument and value axes are determined automatically based on the data type, or set explicitly using the type property of the argumentAxis or valueAxis object correspondingly.

If data of a specified data type cannot be represented on an axis of a specified axis type, the E2002 error occurs. For example, if you try to represent data of a string type on an axis of a logarithmic type, you will get this error.

See Also

• onIncidentOccurred

Data source fields must contain values of numeric, string or date-time types only. Otherwise, the E2003 error occurs.

See Also

• onIncidentOccurred

For example, this error takes place when among date-time values of a data source field, a string value occurs, and it cannot be converted into date-time type.

See Also

• onIncidentOccurred

Check that you set the valueField property to a field in the data source containing at least one positive value.

See Also

• onIncidentOccurred

Check that data objects are not looped.

See Also

• onIncidentOccurred

Check that each data item has the following structure:

{ source: String, target: String, weight: Number }

See Also

• onIncidentOccurred

Check that each data item has the following structure:

{ source: String, target: String, weight: Number }

See Also

• onIncidentOccurred

Check that the weight field in each data object is an integer number greater than 0.

See Also

• onIncidentOccurred

You can find lists of acceptable series types for the Chart here and the PieChart here.

See Also

• onIncidentOccurred

When you visualize data using several value axes on a single pane, these axes must have different names. If they do not, the E2102 occurs.

See Also

• onIncidentOccurred

This error occurs when you try to assign anything other than a callback function to properties like customizeTooltip in Chart or onPointSelectionChanged in PieChart.

See Also

• onIncidentOccurred

This error may occur if you have set the logarithmBase property of a logarithmic axis (for Chart) or a logarithmic scale (for RangeSelector) incorrectly. The value assigned to this property must be an integer number greater than 1.

See Also

• onIncidentOccurred

A strip for an axis is specified by the startValue and endValue properties of an object in the strips array. A constant line is specified by the value property of an object in the constantLines array. All these properties accept numeric values. If you try to assign a value of another type to one of these properties, the E2105 error occurs.

See Also

• onIncidentOccurred

The startValue and endValue properties accept a numeric or date-time value depending on the scale data type. If anything else is passed, the E2202 error occurs.

See Also

• onIncidentOccurred

Commonly, this error appears when either the value property or the setValue(value) method were used incorrectly. To troubleshoot, check that the range you are trying to select falls between the scale start and end values and that the type of the range values is the same as the scale type.

See Also

• onIncidentOccurred

Do not change the apiKey after the UI component is created.

Check the validity of the specified item.

Check the validity of the specified group.

Check the validity of the specified item.

When both a value for the Filter Row and text for the Search Panel are set for the grid, data loading will be performed twice. The first load will be performed to learn data types for grid columns, and the second one - to apply filters. To avoid double data loading, set data types for all grid columns.

Make sure that the parent node exists, and that the field that provides its ID is identical to the keyExpr.

Check that the scrollToTime(hours, minutes, date) method is called with a date in the current view.

Specify data in the dataSource property instead.

Set the selectAllMode to "page" or use a data source with a plain structure. If you need hierarchical data and the capability to select all items across all pages, transform plain data using the DataSource's group property.

Check that the DataGrid is bound to a JavaScript array.

Use the messageHtml field instead. Messages that contain HTML tags should be encoded. See the link above for an example.

Increase the maxSpeedDialActionCount:

DevExpress.config({
    floatingActionButtonConfig: {
        maxSpeedDialActionCount: 7
    }
});
// ===== or when using modules =====
import config from "devextreme/core/config";

config({
    floatingActionButtonConfig: {
        maxSpeedDialActionCount: 7
    }
})

import config from "devextreme/core/config";

config({
    floatingActionButtonConfig: {
        maxSpeedDialActionCount: 7
    }
})

import config from "devextreme/core/config";

config({
    floatingActionButtonConfig: {
        maxSpeedDialActionCount: 7
    }
})

import config from "devextreme/core/config";

config({
    floatingActionButtonConfig: {
        maxSpeedDialActionCount: 7
    }
})

... or remove unnecessary SpeedDialAction UI components.

Use the name and acceptedValues properties instead:

$(function(){
    $("#htmlEditorContainer").dxHtmlEditor({
        toolbar: {
            items: [
            {
                // Before
                // formatName: "size",
                // formatValues: ["8pt", "10pt", "12pt"] 

                // Now
                name: "size",
                acceptedValues: ["8pt", "10pt", "12pt"] 
            },
            ...
            ]
        }
    })
})

<dx-html-editor>
    <dxo-toolbar>
        <!--Before-->
        <!--
        <dxi-item... 
            formatName="size" 
            [formatValues]="['8pt', '10pt', '12pt']">
        </dxi-item>
        -->

        <!--Now-->
        <dxi-item... 
            name="size" 
            [acceptedValues]="['8pt', '10pt', '12pt']">
        </dxi-item>
        ...
    </dxo-toolbar>
</dx-html-editor>

<DxHtmlEditor>
    <DxToolbar>
        <!--Before-->
        <!--
        <DxItem...
            format-name="size"
            :format-values="['8pt', '10pt', '12pt']" /> 
        -->

        <!--Now-->
        <DxItem...
             name="size"
            :accepted-values="['8pt', '10pt', '12pt']" />
        ...
    </DxToolbar>
</DxHtmlEditor>

<HtmlEditor>
    <Toolbar>
        <!--Before-->
        <!--
        <Item...
            formatName="size"
            formatValues={['8pt', '10pt', '12pt']} />
        -->

        <!--Now-->
        <Item...
            name="size"
            acceptedValues={['8pt', '10pt', '12pt']} />
    </Toolbar>
</HtmlEditor>

To select all rows, the component requires their total number. The component cannot calculate the total number when infinite scrolling is used because rows are loaded dynamically.

To fix this, you can do one of the following:

• Use virtual scrolling instead
  If virtual scrolling is enabled, the component can calculate the total number of rows and select all rows. View Demo

• Enable deferred selection
  If deferred selection is enabled, the component does not require the total number of rows. View Demo

• Select only current page rows
  When users click the Select All checkbox, the DataGrid selects all rows or only current page rows, depending on the selectAllMode property. This warning occurs when a user selects all rows. To resolve this, set selectAllMode to "page". View Demo

Increase the maxFilterQueryLength value to meet your requirements.

In this case, shading prevents interaction with the shaded area, and the hideEvent property's value is ignored. To remove the warning, assign false to the shading property.

Change the container property value to an existing element or its selector. You can also remove this property: in this case, the container uses the default value described in the API section.

Check the validity of the specified JSON data.

Specify keys for the appointment data.

Implement the onExporting function as described in the following help topic: export.

Specify the component's height.

When providing data for Chart or a chart within RangeSelector, you must specify argument and value fields for chart series. If the chart data source does not contain the specified fields, or none of their values are valid, the UI component places the W2002 warning into the browser console.

See Also

• onIncidentOccurred

When dividing the Chart's axes or RangeSelector's scale, you can specify intervals for major and minor ticks. However, if these intervals appear too small, the UI components will ignore them and divide the axes or scale using default tick intervals. In addition, the W2003 warning will appear.

See Also

• onIncidentOccurred

When a multi-pane chart is used, you can specify the pane to be used by default using the defaultPane property. The name of the pane assigned to this property must be also declared within the panes array. Otherwise, the W2101 warning appears, and the last pane declared in this array is used.

See Also

• onIncidentOccurred

Using a multi-axis chart), you should specify a value axis for each series using the series.axis property. These value axes should be declared in the valueAxis array as well. If not, a value axis with the name specified for a series will be created automatically, and the UI component will place the W2102 warning into the browser console.

See Also

• onIncidentOccurred

This warning may appear if your scenario allows for the change of the UI component container's size. If so, when the size is reduced down to a minimum, which is specified by the height and width properties of the adaptive layout object, accessory UI component elements will be hidden. The W2103 warning, particularly, appears when the chart hides its title.

See Also

• onIncidentOccurred

This warning may appear if your scenario allows for the change of the UI component container's size. If so, when the size is reduced down to a minimum, which is specified by the height and width properties of the adaptive layout object, accessory UI component elements will be hidden. The W2104 warning, particularly, appears when the chart hides its legend.

See Also

• onIncidentOccurred

This warning may appear if your scenario allows for the change of the UI component container's size. If so, when the size is reduced down to a minimum, which is specified by the height and width properties of the adaptive layout object, accessory UI component elements will be hidden. The W2105 warning, particularly, appears when the chart hides one of the axis titles.

See Also

• onIncidentOccurred

This warning may appear if your scenario allows for the change of the UI component container's size. If so, when the size is reduced down to a minimum, which is specified by the height and width properties of the adaptive layout object, accessory UI component elements will be hidden. The W2106 warning, particularly, appears when the chart hides labels of one of the axes.

See Also

• onIncidentOccurred

Enlarge the container's size.

See Also

• onIncidentOccurred

Choose another format.

See Also

• onIncidentOccurred

Specify the startValue less than the endValue.

$(function () {
    $("#gaugeContainer").dxLinearGauge({ // or dxCircularGauge
        // ...
        scale: {
            startValue: 0,
            endValue: 50
        }
    });
});

$(function () {
    $("#barGaugeContainer").dxBarGauge({
        // ...
        startValue: 0,
        endValue: 50
    });
});

See Also

• onIncidentOccurred