This is a migrated thread and some comments may be shown as answers.

kendogrid is not a function

2 Answers 2527 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Usama
Top achievements
Rank 1
Usama asked on 11 Jul 2019, 05:23 PM

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?

2 Answers, 1 is accepted

Sort by
1
Marin Bratanov
Telerik team
answered on 12 Jul 2019, 06:58 AM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Sam Phillips
Top achievements
Rank 1
commented on 08 Apr 2022, 08:15 PM | edited

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

Tsvetomir
Telerik team
commented on 12 Apr 2022, 02:42 PM

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.
0
Salama
Top achievements
Rank 1
Iron
Iron
answered on 07 Jan 2022, 11:30 PM
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
Tags
Grid
Asked by
Usama
Top achievements
Rank 1
Answers by
Marin Bratanov
Telerik team
Salama
Top achievements
Rank 1
Iron
Iron
Share this question
or