Troubleshooting

Common Issues

This page provides solutions for common problems you may encounter while working with Kendo UI widgets.

Offline Examples

Examples Fail to Load Sample Data

The most common cause for this error is loading the demos from the file system. Google Chrome, for example, will disallow accessing the JSON files needed for the demos to run.

Solution

Host the offline demos on a web server and load them from there.

jQuery

jQuery Is Unavailable or Undefined

If jQuery is not included, or is included after the Kendo UI JavaScript files, or is included after Kendo UI widget initialization statements, the Kendo UI widgets will not function as expected.

The following JavaScript errors will be thrown (depending on the browser):

  • ReferenceError: jQuery is not defined (in Google Chrome and Firefox)
  • jQuery is undefined (in Internet Explorer)

Solution

Make sure that jQuery is included only before the Kendo UI JavaScript files and before any JavaScript statements that depend on it.

Widgets

Widgets Are Unavailable or Undefined

If jQuery is included more than once in the page all existing jQuery plugins (including Kendo UI) will be wiped out. Will also occur if the required jQuery file is not included.

Depending on the browser, the following JavaScript errors will be thrown:

  • TypeError: Object #<Object> has no method kendoGrid (in Google Chrome)
  • TypeError: $("#Grid").kendoGrid is not a function (in Firefox)
  • Object does not support property or method kendoGrid (in Internet Explorer 9 and later)
  • Object does not support this property or method (in older versions of Internet Explorer)

Important

Not just the Kendo UI Grid, but all Kendo UI widgets are affected by this issue with only the error message being different. For example, kendoChart is not a function or Object has no method kendoEditor.

Solution

Make sure jQuery is not included more than once in your page. Remove any duplicate script references to jQuery. Include all required Kendo JavaScript files.

Widgets Cannot Be Initialized in Internet Explorer Compatibility Mode

Kendo widgets provide a WAI-ARIA support, which means that some ARIA-specific attributes are added to the HTML element. When a widget tries to add an ARIA attribute using jQuery's attr method, which in turn calls the Element.setAttribute method, the Internet Explorer in Compatibility mode will raise a JavaScript error with the following message:

  • SCRIPT3: Member not found (in Internet Explorer 10+ in Compatibility Mode)

The problem is reported to Microsoft on https://connect.microsoft.com/IE/feedback/details/774078. Also there is a jQuery bug report where more information can be found.

Important

All Kendo widgets, which add ARIA attributes to HTML elements, will be affected.

Solution

Option 1 Force the Internet Explorer to use the Edge mode:

 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

Option 2 Path jQuery. You can find more information about the possible path in the aforementioned jQuery bug report.

Unknown DataSource transport type json Warning Is Displayed

The Unknown DataSource transport type json warning might be caused by either of the following reasons:

  • Invalid Kendo UI DataSource type configuration is set. For example:

    dataSource: {
    type: "json"
}

  • A JavaScript file is missing when using a DataSource type that is not included in kendo.all.min.js. For example, aspnetmvc-ajax, jsdo, and others. Specifically, json is not a valid DataSource type and it does not require a separate JavaScript file.

Solution

Use a valid type value, or remove the type property, or add the corresponding missing file—for example, kendo.aspnetmvc.min.js when using the Kendo UI MVC wrappers.

Note that the dataSource type differs from the type of the transport actions.

Widget Throws the e.slice is not a function Error

The Uncaught TypeError: e.slice is not a function error indicates that the response which is received from the remote data source is not an array while the widget expects a simple array for its data source.

Widgets like the TreeView or the MultiSelect need only a simple array while the Grid needs an envelope with additional information such as total, errors, and aggregates. For more information on what information each widget expects, review the demo of the respective control.

The possible causes for the e.slice is not a function error can be any or a combination of the following:

Cause 1

The server does not return an actual list of objects but empty data, an error response, or a single item. In such cases, you get a single object or HTML instead of a serialized array.

Solution 1

Step through the server method that returns data and monitor the response in the browser dev toolbar to see what you get and ensure it is something like [{"fieldName": 123, "otherField": "someValue"}, {"fieldName": 234, "otherField": "otherValue"}].

Cause 2

Under MVC, the server method (action) often uses myData.ToDataSourceResult(request) unnecessarily and wraps the data in an envelope similar to {data: [the array from your data goes here], total: <the count goes here> }. In such cases, the widget is not able to get the array at the root level as it expects.

Solution 2

Use either of the following suggestions:

  • Apply the same approach as the Kendo UI demos demonstrate—return the data array only. For example, in an MVC action, use the return Json(myData, JsonRequestBehavior.AllowGet); configuration without.ToDataSourceResul() as demonstrated in the MVC TreeView Remote Binding demo.

  • By configuring its data source Schema, indicate to the widget which fields you expect it look for.

    // C#
.Schema(schema =>
  {
      schema.Data("Data")
         .Total("Total");
  }

Input Widgets Do Not Raise Change Event When API Is Used

The change event of an input widget is triggered only by user action. DOM elements work in the same way. If you need to trigger an event manually use the trigger method.

Creating Multiple Widgets Throws JavaScript Errors

This will happen if two or more widgets are initialized from elements that have same IDs. jQuery will find only the first one every time it searches for it and thus try to initialize the first element in the DOM multiple times.

Solution

The ID for each element on the page should be unique.

<textarea id="editor"></textarea>
<textarea id="editor"></textarea>
<script>
    $('#editor').kendoEditor();
    $('#editor').kendoEditor(); // problem
</script>

When Creating Multiple Widgets Only One of Them Works

For a solution, see the Creating Multiple Widgets Throws JavaScript Errors section above.

Third-Party Modal Popups Prevent Access to Kendo UI Widgets

Some third-party modal popups prevent access to focusable elements, which are rendered outside the modal popup. Such widgets include the Bootstrap modal dialog, the jQuery UI modal dialog, and possibly others. The Kendo UI widgets, which are affected by this behavior are all widgets, which render their own detached popups, e.g. AutoComplete, ColorPicker, ComboBox, DropDownList, DateTimePicker, Editor, Grid, and MultiSelect. The popups of these Kendo UI widgets are rendered as children of the <body> and as a result, the third-party modal popup will prevent access to them.

Solution

There are two ways to avoid this problem:

  • Disable the modal popup's modality, so that elements outside it can be focused.
  • Use a modal Kendo UI Window instead of a third-party popup.

Widgets Do Not Work Correctly on Touch Devices

Client libraries that interfere with touch events, such as FastClick, are not compatible with Kendo UI and may break the behavior of the widgets. For example, they may cause a drop-down list to close immediately after opening.

Solution

For more information on this issue, refer to What Exactly Is... The 300ms Click Delay.

Widget Popup Is Offset Incorrectly in Internet Explorer

When Kendo UI is used with jQuery 1.12.0 or 2.2.0, some issues with the popup positioning might occur. The popup is offset incorrectly when the page is scrolled.

Solution

The reason for this issue is a bug in the aforementioned jQuery version. According to jQuery's bug tracker, it will be addressed in the next patch release of jQuery. For more details, refer to https://github.com/telerik/kendo-ui-core/issues/1375.

Incorrect Appearance or Errors Occur in Hidden Widgets

If you display widgets that have been in an initially hidden container, call their resize() method after you show them. Initializing widgets on elements with the style="display: none;" configuration might cause errors, such as inability to calculate dimensions and positions or even throw errors. The reason for this behavior is that such calculations are not available for elements that are not rendered by the browser.

Solution

Usually, delaying the widget initialization until after it is displayed resolves the issue and improves the page performance.

CDN

Scripts or Stylesheets Do Not Load from CDN

For a solution, refer to Kendo UI CDN Fallback and Troubleshooting.

Status Codes

404 Status Code Is Thrown for WOFF or TTF Font Files

For a solution, refer to Serving Font Files.

404 Status Code Is Thrown for JSON Files on IIS

By default, IIS does not serve files with unknown extensions. The mime types can be specified either through the IIS management console (inetmgr) or in the site Web.config.

Solution

The example below demonstrates how to configure the IIS Web.config. Note the mime is removed first to avoid clashes if it is already defined.

Example
    <?xml version="1.0"?>
    <configuration>
        ...
        <system.webServer>
            ...
            <staticContent>
                <remove fileExtension=".json" />
                <mimeMap fileExtension=".json" mimeType="application/json" />
            </staticContent>
        </system.webServer>
    </configuration>

Ajax

Widget Object Is Undefined after Loading a Page through AJAX

This issue is usually caused when the page loaded via AJAX contains a script reference to jQuery. When jQuery is re-initialized, all jQuery-based data attributes are cleared, including the data(kendoWidget) attribute that holds the Kendo UI widget object.

Solution

Load a partial HTML fragment that does not contain any unneeded jQuery references, or use an iframe to load the complete page.

The example below demonstrates a test issue.

Example
$("#dialog").kendoWinodow({
    // loads complete page
    content: "/foo"
});

The example below demonstrates the solution of the test issue above.

Example
$("#dialog").kendoWindow({
    // load complete page...
    content: "/foo",
    // ... and show it in an iframe
    iframe: true
});

// or

$("#dialog").kendoWinodow({
     // load partial page, without jQuery reference
    content: "/foo"
});

Styles and Themes

Icons Disappear after Upgrade

As of the R1 2017 release, Kendo UI widgets utilize font-icons instead of sprites. This approach outdates some CSS, which are now removed from the built-in styles.

Solution

To provide for the backward compatibility of any custom icons you add to your project, include the following styles in your application:

/* Provides backward compatibility support for custom sprites */
.k-sprite {
    display: inline-block;
    width: 16px;
    height: 16px;
    overflow: hidden;
    background-repeat: no-repeat;
    font-size: 0;
    line-height: 0;
    text-align: center;
    -ms-high-contrast-adjust: none;
}

/* Removes sprite styles from font icons */
.k-sprite.k-icon {
    font-size: 16px;
    line-height: 1;
}

See Also

In this article
Related articles
Not finding the help you need? Improve this article