Fresh install of KendoUI 2013.2.716, KendoUI VS Extensions, Create a new KendoUI MVC app and Javascript breaks

14 posts, 1 answers
  1. Tony
    Tony avatar
    13 posts
    Member since:
    Jul 2013

    Posted 28 Jul 2013 Link to this post

    Hi there,

    I have just installed KendoUI 2013.2.716 on a new machine. It previously had no version of KendoUI on it. I have installed the VS Extensions to allow MVC apps to be created from scratch including KendoUI. I am on VS2012 Version 11.0.60610.01 Update 3. I am running Windows 8 Pro. 

    The problem is that Javascript is failing.

    I have gone for the fresh install because that version of KendoUI is also failing on another machine that I attempted to upgrade, but I couldn't figure out why. So I decided to install a fresh install on a new machine and copy the files across, if it was all working. Unfortunately, it's not.

    javascript-error-1.png shows an error that occurred immediately in kendo.all.min.js
    javascript-error-2.png shows the next error that occurred in kendo.aspnetmvc.min.js
    javascript-error-3.png shows the next error that occured in dynamic javascript. 

    The head section is as follows:
        <head>
            <title>Home Page</title>
            <link href="/Content/Site.css" rel="stylesheet" type="text/css" />
            <link href="/Content/kendo/2013.2.716/kendo.common.min.css" rel="stylesheet" type="text/css" />
        <link href="/Content/kendo/2013.2.716/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />
        <link href="/Content/kendo/2013.2.716/kendo.default.min.css" rel="stylesheet" type="text/css" />
        <link href="/Content/kendo/2013.2.716/kendo.dataviz.default.min.css" rel="stylesheet" type="text/css" />
        <script src="/Scripts/kendo/2013.2.716/jquery.min.js"></script>
        <script src="/Scripts/kendo/2013.2.716/kendo.all.min.js"></script>
        <script src="/Scripts/kendo/2013.2.716/kendo.aspnetmvc.min.js"></script>
        <script src="/Scripts/kendo.modernizr.custom.js"></script>
    </head>

    Is this fixable? Otherwise I'm hoping to get hold of a starter MVC4 application that works with the latest KendoUI release.

    Regards,
    Tony










  2. Paolo
    Paolo avatar
    423 posts
    Member since:
    Jun 2009

    Posted 29 Jul 2013 Link to this post

    Hello,
    got the same problem on win7 64bit installation with visual studio 2012.... if you're able to resolve can you please post your solution?
    Thanks
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Tony
    Tony avatar
    13 posts
    Member since:
    Jul 2013

    Posted 29 Jul 2013 Link to this post

    No I still have the problem. I reinstalled the old version and that works. I removed the old version and reinstalled the new version and it still fails.

    I have followed the guide of things that can go wrong, but that hasn't helped. Anyway, this should work out of the box and it doesn't.

    So it is currently unusable as far as I'm concerned. I have shelved my project for the moment.
  5. Paolo
    Paolo avatar
    423 posts
    Member since:
    Jun 2009

    Posted 29 Jul 2013 Link to this post

    I'm starting right now to develop with Kendo... btw I'l start from prev versione (2013.1.514) then upgrade later...
  6. Answer
    Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 29 Jul 2013 Link to this post

    Hi guys,

     We discovered this problem too late and were able to solve it today. Please try downloading the files again. 

     More info is available in this forum thread

     Please accept our sincere apologies for the inconvenience this has caused. We will do our best to avoid such problems in the future.

    Regards,
    Atanas Korchev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  7. Tony
    Tony avatar
    13 posts
    Member since:
    Jul 2013

    Posted 29 Jul 2013 Link to this post

    Will give it a try now and let you know how I go.
  8. Paolo
    Paolo avatar
    423 posts
    Member since:
    Jun 2009

    Posted 29 Jul 2013 Link to this post

    The link you provided turns me on the kendo UI main forum page... I'll re-download the file right now...tHANKS
  9. Tony
    Tony avatar
    13 posts
    Member since:
    Jul 2013

    Posted 29 Jul 2013 Link to this post

    Ok, it didn't crash out like it did before, so it's looking promising. I'll give it a more serious run and if there are no more issues will mark this as answered soon.
  10. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 29 Jul 2013 Link to this post

    Hello,

     Sorry, the right link is http://www.kendoui.com/forums/kendo-ui-framework/general-discussions/q2'13-release---unable-to-get-property-jquery-of-undefined-or-null-reference-invalid-regular-expressions-or-expected-js-errors.aspx

    Regards,
    Atanas Korchev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  11. Tony
    Tony avatar
    13 posts
    Member since:
    Jul 2013

    Posted 30 Jul 2013 Link to this post

    Ok, I upgraded my previous application and the styling is now working and the javascript doesn't give errors.

    Of course, the grid in my application has stopped showing data, but I have started a new project and loaded data from a startup app with just a test grid in it and that works, so there must be something else I'm doing wrong, even though that page hasn't been checked out since before the upgrade. Oh well, I'll bash at it a bit more and if I run into problems I'll just have to open up another issue.

    But for now, this issue can be closed.
  12. Paolo
    Paolo avatar
    423 posts
    Member since:
    Jun 2009

    Posted 30 Jul 2013 Link to this post

    Tony your grid doesn't load data?
  13. Tony
    Tony avatar
    13 posts
    Member since:
    Jul 2013

    Posted 30 Jul 2013 Link to this post

    That's right my grid doesn't load data.

    I have run up a separate application from scratch and shown that data will load into the grid. I now have to figure out what is causing it to fail. I have a number of other UI elements on the page which may be interfering with the grid. I'm rebuilding the page bit by bit in another application.
  14. Paolo
    Paolo avatar
    423 posts
    Member since:
    Jun 2009

    Posted 30 Jul 2013 Link to this post

    do you use wrappers or jQuery ?
    can you post your code please?
  15. Tony
    Tony avatar
    13 posts
    Member since:
    Jul 2013

    Posted 30 Jul 2013 Link to this post

    I am now completely up and running.

    Paolo: I use the MVC wrappers, mainly because when I started I couldn't get the straight javascript to behave itself. The wrappers worked first time, so it was obvious for me. I'm also using Razr, which is awesome.

    Here is a page from my Client view page (Index.cshtml). I am attempting to do all editing as popup templates. The Create/Read/Update/Destroy methods are all in my controller class. (Model=data, View=visual page, Controller=orchestrator for getting models onto views).
    @{
        ViewBag.Title = "Clients";
    }
     
    <h2>Clients</h2>
     
    @(Html.Kendo().Grid<BCM.Models.ClientViewModel>()
        .Name("grid")
        .Columns(columns =>
        {
            columns.Bound(p => p.ClientName).Width(350);
            columns.Bound(c => c.zTimestamp).Hidden();
            columns.Command(command => { command.Edit(); command.Destroy(); command.Custom("Users").Click("showUsers"); }).Width(160);
        })
        .ToolBar(toolbar => toolbar.Create())
        .Editable(editable => editable.Mode(GridEditMode.PopUp))
        .Pageable()
        .Filterable()
        .Sortable()
        .Scrollable()
        .HtmlAttributes(new { style = "height:580px;" })
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(20)
            .Batch(false)
            .Events(events => events.Error("error_handler"))
            .Model(model => model.Id(p => p.ClientId))
            .Create(update => update.Action("ClientPopup_Create", "Client"))
            .Read(read => read.Action("ClientPopup_Read", "Client"))
            .Update(update => update.Action("ClientPopup_Update", "Client"))
            .Destroy(update => update.Action("ClientPopup_Destroy", "Client"))
        )
    )
     
    <style>
    .k-window {
        width: 500px;
        height:200px;
    }
    </style>
     
    <script type="text/kendo-template" id="message">
    <div class="k-widget k-tooltip k-tooltip-validation k-invalid-msg field-validation-error" style="margin: 0.5em; display: block; " data-for="#=field#" data-valmsg-for="#=field#" id="#=field#_validationMessage">
                <span class="k-icon k-warning"> </span>#=message#<div class="k-callout k-callout-n"></div></div>
    </script>
     
    <script type="text/javascript">
        var validationMessageTmpl = kendo.template($("#message").html());
     
        function error_handler(args) {
            if (args.errors) {
                var grid = $("#grid").data("kendoGrid");
                grid.one("dataBinding", function (e) {
                    e.preventDefault();   // cancel grid rebind if error occurs                            
     
                    for (var error in args.errors) {
                        showMessage(grid.editable.element, error, args.errors[error].errors);
                    }
                });
            }
        }
     
        function showMessage(container, name, errors) {
            //add the validation message to the form
            container.find("[data-valmsg-for=" + name + "],[data-val-msg-for=" + name + "]")
            .replaceWith(validationMessageTmpl({ field: name, message: errors[0] }))
        }
     
        function showUsers(e) {
            e.preventDefault();
     
            var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
            var actionUrl = "@Url.Action("Users", "Client")/" + dataItem.id;
            $("form").attr("action", actionUrl);
            $("form").submit();
     
        }
    </script>
    There is an extra command button that goes from this Client page to a Users page (also in the Client Controller) to enable the logged in person to manage their user permissions. That's what the javascript script "showUsers" is about. When I get errors, I can raise them from the ClientController back to the main page using the error_handler, which will popup an error message box. That error message box is described in the kendo-template script.

    ClientViewModel is where the data is translated from the database to the View. It is the representation of the model for that View.

    ClientPopup_Create/ClientPopup_Read/ClientPopup_Update/ClientPopup_Destroy are all methods in the Client Controller.
       [AcceptVerbs(HttpVerbs.Post)]
        public ActionResult ClientUser_Create(int id, [DataSourceRequest] DataSourceRequest request, ClientUserViewModel clientUser)
        {
            if (clientUser != null && ModelState.IsValid)
            {
                try
                {
                    ClientUserRepository.Insert(id, clientUser);
                }
                catch (Exception ex)
                {
                    if (ex.Message == Messages.Validation_Password_Is_Required)
                    {
                        ModelState.AddModelError("Password", ex.Message);
                    }
                }
            }
     
            return Json(new[] { clientUser }.ToDataSourceResult(request, ModelState));
        }
     
        [AcceptVerbs(HttpVerbs.Post)]
        public ActionResult ClientUser_Update(int id, [DataSourceRequest] DataSourceRequest request, ClientUserViewModel clientUser)
        {
            if (clientUser != null && ModelState.IsValid)
            {
                try
                {
                    ClientUserRepository.Update(id, clientUser);
                }
                catch (Exception ex)
                {
                    ModelState.AddModelError("ClientName", ex.Message);
                }
            }
     
            return Json(new[] { clientUser }.ToDataSourceResult(request, ModelState));
        }
     
     
     
        public ActionResult ClientPopup_Read([DataSourceRequest] DataSourceRequest request)
        {
            return Json(ClientRepository.SelectAll().ToDataSourceResult(request));
        }
     
        [AcceptVerbs(HttpVerbs.Post)]
        public ActionResult ClientPopup_Create([DataSourceRequest] DataSourceRequest request, ClientViewModel client)
        {
            if (client != null && ModelState.IsValid)
            {
                ClientRepository.Insert(client);
            }
     
            return Json(new[] { client }.ToDataSourceResult(request, ModelState));
        }
     
        [AcceptVerbs(HttpVerbs.Post)]
        public ActionResult ClientPopup_Update([DataSourceRequest] DataSourceRequest request, ClientViewModel client)
        {
            if (client != null && ModelState.IsValid)
            {
                try
                {
                    ClientRepository.Update(client);
                }
                catch (Exception ex)
                {
                    ModelState.AddModelError("ClientName", ex.Message);
                }
            }
     
            return Json(new[] { client }.ToDataSourceResult(request, ModelState));
        }
     
        [AcceptVerbs(HttpVerbs.Post)]
        public ActionResult ClientPopup_Destroy([DataSourceRequest] DataSourceRequest request, ClientViewModel client)
        {
            if (client != null && client.ClientId != 0) //can't delete certitude
            {
                ClientRepository.Delete(client);
            }
     
            return Json(ModelState.ToDataSourceResult());
        }
     
    }
    I also have the database method calls in a ClientRepository class. The idea here is that you can switch out the repository class with a test repository class.

    This is a variation of the Grid demo page Popup Editing demo example, found here: Editing Popup
    and clicking on ASP.NET MVC, then editing_popup.cshtml.

    Hope this helps.
Back to Top
UI for ASP.NET MVC is VS 2017 Ready