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

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

13 Answers 154 Views

Installer and VS Extensions

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

Tony asked on 28 Jul 2013, 09:12 AM

javascript-error-1.png

javascript-error-2.png

javascript-error-3.png

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

13 Answers, 1 is accepted

Accepted

answered on 30 Jul 2013, 12:27 PM

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.