kendogrid is not a function

[Usama]

I am trying to use Kendo Grid in a razor view.
I have reference for the required css and js files in bundle.config:

bundles.Add(new StyleBundle("~/Content/kendo/css").Include(
               "~/Content/kendo/kendo.common.min.css",
               "~/Content/kendo/kendo.common-bootstrap.min.css",
               "~/Content/kendo/kendo.bootstrap.min.css"
               ));
            bundles.Add(new ScriptBundle("~/Scripts/kendo/js").Include(
                    "~/Scripts/kendo/jquery.min.js",
                    "~/Scripts/kendo/kendo.all.min.js",
                    "~/Scripts/kendo/kendo.aspnetmvc.min.js"
                ));

In the View I have this:

@using Kendo.Mvc.UI;
@using Kendo.Mvc.Extensions;

@model WebApplication.Models.TMS_Categories

@{
    ViewBag.Title = "Index";
}



<h2>Index</h2>

<div class="container">
    <div class="row">

        @(Html.Kendo().Grid<WebApplication.Models.TMS_Categories>()
                                    .Name("CategoriesGrid")
                                    .Selectable()
                                            .Columns(columns =>
                                            {
                                                columns.Bound(c => c.ID).Width(50);
                                                columns.Bound(c => c.PrimaryCategoryName).Title("P Name").Width(100);
                                                columns.Bound(c => c.SecondaryCategoryName).Title("S Name").Width(100);
                                                columns.Bound(c => c.PrimaryDescription).Title("Primary Desc").Width(100);
                                                columns.Bound(c => c.SecondaryDescription).Title("Secnd Desc").Width(100);
                                                columns.Bound(c => c.Code).Width(100);
                                                columns.Bound(c => c.OrganizationID).Title("OrgID").Width(100);
                                                columns.Bound(c => c.CreatedBy).Width(100);
                                                columns.Bound(c => c.CreatedDate).Width(100);
                                                columns.Bound(c => c.UpdatedBy).Width(100);
                                                columns.Bound(c => c.UpdatedDate).Width(100);
                                                columns.Bound(c => c.IsDeleted).Width(100);
                                                columns.Bound(c => c.IsActive).Width(100);
                                                columns.Bound(c => c.IsDefault).Width(100);
                                                columns.Bound(c => c.CompanyID).Width(100);
                                                columns.Bound(c => c.CategoryType).Width(100);
                                                columns.Command(command =>
                                                {
                                                    command.Edit();
                                                    command.Destroy();
                                                }).Width(200);

                                            })
                                    .DataSource(dataSource => dataSource
                                        .Ajax()
                                        .Model(model =>
                                        {
                                            model.Id(cat => cat.ID);
                                            model.Field(cat => cat.ID).Editable(false);
                                        }
                                        )
                                        .Read(read => read.Action("GetAllCategories", "Categories"))
                                      .Update(update => update.Action("UpdateCategory", "Categories"))
                                      .Create(create => create.Action("Addcategory", "Categories"))
                                      .Destroy(destroy => destroy.Action("DeleteCategory", "Categories"))

                                        )
                                   .ToolBar(toolbar => toolbar.Create())
                                   .Editable(editable => editable.Mode(GridEditMode.InLine))
                                    .Sortable()
                                    .Selectable()
                                    .Pageable(pageable =>
                                    {
                                        pageable.Refresh(true);
                                        pageable.PageSizes(true);
                                    })
        )
    </div>
</div>

When I run the code on chrome I get an error in console and data is not bound with grid only column names are shown but not any data row is showing :

 

Uncaught TypeError: jQuery(...).kendoGrid is not a function
    at HTMLDocument.<anonymous> (Index:54)
    at i (jquery.min.js:2)
    at Object.fireWith [as resolveWith] (jquery.min.js:2)
    at Function.ready (jquery.min.js:2)
    at HTMLDocument.K (jquery.min.js:2)

and also when i click Add New Record button I get the data in this form:

 

{"Data":[{"ID":1,"PrimaryCategoryName":"a","SecondaryCategoryName":"b","PrimaryDescription":"dsa","SecondaryDescription":"fewf","Code":"123","OrganizationID":1,"CreatedBy":1,"CreatedDate":"\/Date(1562439600000)\/","UpdatedBy":1,"UpdatedDate":"\/Date(1562439600000)\/","IsDeleted":false,"IsActive":true,"IsDefault":false,"CompanyID":2,"CategoryType":3},{"ID":2,"PrimaryCategoryName":"f","SecondaryCategoryName":"g","PrimaryDescription":"ddsf","SecondaryDescription":"gfh","Code":"434","OrganizationID":3,"CreatedBy":3,"CreatedDate":"\/Date(1562439600000)\/","UpdatedBy":3,"UpdatedDate":"\/Date(1562439600000)\/","IsDeleted":true,"IsActive":false,"IsDefault":false,"CompanyID":1,"CategoryType":2}],"Total":2,"AggregateResults":null,"Errors":null}

 

Any body here to help me?

[Marin Bratanov]

Hello Usama,

Please follow this article to add Kendo to your project: https://docs.telerik.com/aspnet-mvc/getting-started/asp-net-mvc-5. The most likely reason for the problem you are facing is that the jQuery reference is not before the Kendo reference, and so Kendo cannot extend the jQuery object properly with its methods. The second most common problem is that there is a second reference to jQuery later in the page that wipes the first one where Kendo had added its methods.

On a side note, you may find the following article useful as it lists the most common pitfalls and their solutions (it seems like you have hit the first one or two): https://docs.telerik.com/aspnet-mvc/troubleshoot/troubleshooting.

Regards,
Marin Bratanov
Progress Telerik

[Sam Phillips]

The aspnet 6 default template slips in the jquery reference at the bottom of the page... wiping out the first reference.

[Tsvetomir]

Hi Sam, thank you for taking the time to visualize the reference to the jQuery library. Indeed, the ASP.NET Core projects come with this reference already included. For working with Kendo UI, only a single reference to the jQuery library is needed.

[Salama]

I found the solution
If you are using jQuery Office, any version, look for the plugins file attached to your project
Which contains jQuery code and delete  the next line completely 
( !function(e,t){"use strict";"object"==typeof module&&"object"==typeof module.exports?module.exports=e.document?t(e,!0): )
to the end of the line
{return C.$===k&&(C.$=Jt),e&&C.jQuery===k&&(C.jQuery=Qt),k},e||(C.jQuery=C.$=k), k});

Because it will be duplicated in jQuery.js file
This is what is causing the error