I have a controller that looks like this:
using System.Collections.Generic; using System.Web.Mvc; using Kendo.Mvc.Extensions; using Kendo.Mvc.UI; namespace KendoMvcApplication.Controllers { public class HomeController : Controller { public ActionResult Index() { return View(); } public ActionResult GetData([DataSourceRequest] DataSourceRequest req) { var products = CreateProducts(); var result = products.ToDataSourceResult(req); return Json(result); } private static IEnumerable<Product> CreateProducts() { for (int i = 1; i <= 20; i++) { yield return new Product { ProductId = i, ProductName = "Product " + i, ProductPrice = i * 2.5 }; } } } public class Product { public int ProductId { get; set; } public string ProductName { get; set; } public double ProductPrice { get; set; } } }
And a view that looks like this:
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8" /> <link href="~/Content/kendo.common.min.css" rel="stylesheet" /> <link href="~/Content/kendo.default.min.css" rel="stylesheet" /> <script type="text/javascript" src="~/Scripts/require.js"></script> </head> <body> <div id="grid"></div> <script type="text/javascript"> require.config({ baseUrl : '@Url.Content("~/Scripts")', paths: { 'jquery': 'jquery-2.0.3.min', 'kendo': 'kendo-ui' }, shim: { 'jquery': { exports: 'jQuery' } } }); require(['jquery', 'kendo/kendo.grid.min'], function ($) { $(document).ready(function () { $('#grid').kendoGrid({ dataSource: { schema: { data: 'Data', total: 'Total', aggregates: 'AggregateResults', model: { id: "ProductId", fields: { ProductName: { type: "string" }, ProductPrice: { type: "number" } } } }, transport: { read: { url: "@Url.Action("GetData", "Home")", dataType: "json", method: "post" } }, pageSize: 10, serverPaging: true, serverSorting: true, type: "aspnetmvc-ajax" }, sortable: { mode: "single" }, columns: ["ProductName", "ProductPrice"], scrollable: false, pageable: true }); }); }); </script> </body> </html>
And my directory structure:
- Scripts / kendo -ui / * (all kendo files, including mvc one)
- Scripts /require.js
- Scripting / jQuery -2.0.3.min.js
which almost works, except that server-side sorting is not applied.
This is because the kendo.aspnet.mvc.min.js file never loads (of course, since JS knows nothing about it), to fix this, I tried this:
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8" /> <link href="~/Content/kendo.common.min.css" rel="stylesheet" /> <link href="~/Content/kendo.default.min.css" rel="stylesheet" /> <script type="text/javascript" src="~/Scripts/require.js"></script> </head> <body> <div id="grid"></div> <script type="text/javascript"> require.config({ baseUrl: '@Url.Content("~/Scripts")', paths: { 'jquery': 'jquery-2.0.3.min', 'kendo': 'kendo-ui', 'kendo-mvc': 'kendo/kendo.aspnetmvc.min' }, shim: { 'jquery': { exports: 'jQuery' } } }); require(['jquery', 'kendo-mvc', 'kendo/kendo.grid.min'], function ($) { $(document).ready(function () { $('#grid').kendoGrid({ dataSource: { schema: { data: 'Data', total: 'Total', aggregates: 'AggregateResults', model: { id: "ProductId", fields: { ProductName: { type: "string" }, ProductPrice: { type: "number" } } } }, transport: { read: { url: "@Url.Action("GetData", "Home")", dataType: "json", method: "post" } }, pageSize: 10, serverPaging: true, serverSorting: true, type: "aspnetmvc-ajax" }, sortable: { mode: "single" }, columns: ["ProductName", "ProductPrice"], scrollable: false, pageable: true }); }); }); </script> </body> </html>
But this caused this error:
And tried to load js files like this:
Red spots 404 were not found because they are looking for js files in a folder called kendo in the script folder.
So then I thought that I would try to include the whole version, so I tried this:
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8" /> <link href="~/Content/kendo.common.min.css" rel="stylesheet" /> <link href="~/Content/kendo.default.min.css" rel="stylesheet" /> <script type="text/javascript" src="~/Scripts/require.js"></script> </head> <body> <div id="grid"></div> <script type="text/javascript"> require.config({ baseUrl: '@Url.Content("~/Scripts")', paths: { 'jquery': 'jquery-2.0.3.min', 'kendo': 'kendo-ui/kendo.all.min', 'kendo-mvc': 'kendo-ui/kendo.aspnetmvc.min' }, shim: { 'jquery': { exports: 'jQuery' } } }); require(['jquery', 'kendo', 'kendo-mvc'], function ($) { $(document).ready(function () { $('#grid').kendoGrid({ dataSource: { schema: { data: 'Data', total: 'Total', aggregates: 'AggregateResults', model: { id: "ProductId", fields: { ProductName: { type: "string" }, ProductPrice: { type: "number" } } } }, transport: { read: { url: "@Url.Action("GetData", "Home")", dataType: "json", method: "post" } }, pageSize: 10, serverPaging: true, serverSorting: true, type: "aspnetmvc-ajax" }, sortable: { mode: "single" }, columns: ["ProductName", "ProductPrice"], scrollable: false, pageable: true }); }); }); </script> </body> </html>
But this led to the following errors:
And tried to load js files like this:
In this case, 404 red spots were not found, as they search for files directly in the Scripts folder.
So here is my question:
How to include the specified file in a script of the type of the required JS type?
In addition, I would like to use the kendo.all.min file, not separate ones, because I want to use knockout-kendo in the future and does not seem to work with a separate file, but if the only way to do this is to use a separate file approach, this is normal.