kendogrid is not a function

2 posts, 0 answers
  1. Usama
    Usama avatar
    1 posts
    Member since:
    Jul 2019

    Posted 11 Jul 2019 Link to this post

    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. Marin Bratanov
    Admin
    Marin Bratanov avatar
    5701 posts

    Posted 12 Jul 2019 Link to this post

    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.
Back to Top