Using Telerik UI for ASP.NET MVC with RequireJS
Environment
| Product | Telerik UI for ASP.NET MVC |
| Product Version | Created with version 2024.4.1112 |
Description
How can I use RequireJS in a Telerik UI for ASP.NET MVC application?
Solution
The following example demonstrates how to use bundled scripts with RequireJS to initialize a Grid component.
- Include the desired Kendo UI theme and the RequireJS script.
- Initialize the Grid component and defer its initialization script using the
Deferred()method. - Use RequireJS to load jQuery and the required Kendo UI scripts.
- Initialize the Grid by calling the
DeferredScripts()method in theinitApp()function.
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/10.0.1/default/default-main.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.1/require.js"></script>
@(Html.Kendo().Grid<Telerik.Examples.Mvc.Areas.RequireJS.Models.Product>()
.Name("grid")
.DataSource(dataSource => dataSource.Ajax().Read("Read", "Home"))
.Deferred()
)
<script>
require.config({
baseUrl: "https://kendo.cdn.telerik.com/2024.4.1112/js/",
paths: {
"jquery": "https://code.jquery.com/jquery-3.7.1.min",
"jszip": "https://unpkg.com/jszip/dist/jszip.min.js",
"kendo.grid.min": "https://kendo.cdn.telerik.com/2024.4.1112/js/kendo.all.min",
"kendo.aspnetmvc.min": "https://kendo.cdn.telerik.com/2024.4.1112/js/kendo.aspnetmvc.min"
}
});
require(["jquery", "jszip", "kendo.grid.min", "kendo.aspnetmvc.min" ], initApp);
function initApp($, JSZip, kendo) {
window.JSZip = JSZip;
@Html.Kendo().DeferredScripts(false)
}
</script>
For a runnable example, refer to the ASP.NET MVC application in the UI for ASP.NET MVC Examples repository.