Questions on UI for ASP.NET MVC Forum

1 answer

109 views

Grid on Window - problem with reopening in IE9

Hi,
I'm trying to open Grid on Window. It works fine for the first time, but when i close the window and try to reopen it i get DOM Exception: NOT_FOUND_ERR(8). This problem occurs only in IE (It works fine in Chrome and Firefox).

I have grid "reservationGrid" with custom command on last column, which opens window with details. In pop-up window i'm trying to show grid "membersGrid". As i said before it works fine for the first time, but when i close the window and try to reopen it, it shows the Grid but it fails to load the content from "members".

Javascript:

var members = [{ Ime: "John", Priimek: "Novak", KrajRojstva: "London", DatumRojstva: new Date(1987, 4, 19) }];

var memberDataSource = new kendo.data.DataSource({

pageSize: 30,

data: members,

autoSync: true,

schema: {

model: {

fields: {

Ime: { editable: true },

Priimek: { editable: true },

KrajRojstva: { editable: true },

DatumRojstva: { editable: true, type: "date" }

}

});

$("#reservationGrid").kendoGrid({

dataSource: dataSource,

groupable: true,

sortable: true,

pageable: {

refresh: true,

pageSizes: true

},

columns: [

{ field: "Location", width: 70, title: "Lokacija" },

{ field: "Unit", width: 70, title: "Enota" },

{ field: "Capacity", width: 40, title: "Osebe" },

{ field: "From", width: 60, title: "Od" , type:"date" , template: "#=kendo.toString(From, 'd.M.yyyy') #" ,format:"d.M.yyyy" },

{ field: "To", width: 60, title: "Do" , type:"date" , template: "#=kendo.toString(To, 'd.M.yyyy') #" ,format:"d.M.yyyy" },

{ command: { text: "Rezerviraj", click: showDetails }, title: " ", width: "50px" }

],

editable:true

});

wnd = $("#detail-container")

.kendoWindow({

title: "Podrobnosti o rezervaciji",

modal: true,

visible: false,

resizable: false,

actions: ["close"],

width: 750,

height: 500

}).data("kendoWindow");

function showDetails(e) {

e.preventDefault();

var dataItem = this.dataItem($(e.currentTarget).closest("tr"));

detailsTemplate = kendo.template($("#reservationDetail").html());

wnd.content(detailsTemplate(dataItem));

wnd.center().open();

$("#membersGrid").kendoGrid({

dataSource: memberDataSource,

sortable: true,

toolbar: ["create"],

columns: [

{ field: "Ime", width: 50, title: "Ime" },

{ field: "Priimek", width: 50, title: "Priimek" },

{ field: "KrajRojstva", width: 50, title: "Kraj Rojstva" },

{ field: "DatumRojstva", width: 60, title: "Datum Rojstva", type: "date", template: "#=kendo.toString(DatumRojstva, 'd.M.yyyy') #", format: "d.M.yyyy" },

{ command: {name: "destroy", text:"zbrisi"} , width: "50px" }

],

editable: true

});

wnd.center();

}

HTML:

<div id="reservationGrid" class="kendo-grid"></div>

<div id="detail-container" ></div>

<script type="text/x-kendo-tmpl" id="reservationDetail"

<div id="top-wrapper">

<div id="table" class="reservationDetail-table">

<table width:"300px">

<tr>

<td>Location: <div class="reservationDetail-property">#= Location #</div></td>

<td>Unit: <div class="reservationDetail-property">#= Unit #</div></td>

</tr>

<tr>

<td>Od: <div class="reservationDetail-property">#= kendo.toString(From, "d.M.yyyy") #</div

>

                   </

td>

<td>Do: <div class="reservationDetail-property">#= kendo.toString(To, "d.M.yyyy") #</div

>

                  </

td

</tr>

</table>

</div>

<div id="button-confirmReservation">

<a class="k-button k-button-icontext " href="\\#"><span class="k-icon k-update"> </span>Confirm</a>

</div>

</div

<div id="membersGrid" class="kendo-gridMembers"></div>

</script>

Thanks in advance!

Window

answered on 04 Jan 2013

3 answers

1.1K+ views

DataAnnotations DateTime Picker validation unobtrusive Localization: cannot make it work !

Hi I'm relatively new to ASP.NET MVC and I'm trying to male it work together with Kendo UI.
The problem here is about DateTime field and the way that it is validated. I've been looking for a solution to this problem for two days and I've read quite a lot about ways to get around the question, but the point is that if I have to plan to use Kendo UI all over my application I have to have a safe way to handle situations like this one. So I'm looking for a clear solution about this situation (that is a good sample).

I report here a very simple case study with an example of what I cannot make work.
I've build a model using DataAnnotations and specified the DataType for the date field.
I've built a _Layout page with (i think) all the scripts needed.
I've built a View with a very bare minimum of two fields.
I've built an EditorTemplate to manage DateTime fields.
Though I'm Italian and the date format is not considered correct. Plus the error message has nothing to do with that I specified in the datamodel.
I report my code following

The Data model

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.ComponentModel.DataAnnotations;

namespace G4.Models

{

public class myModel

{

[Display(Name="Name")]

[Required(ErrorMessage="The field Name is required")]

public string name { get; set; }

[Display(Name = "Birth Date")]

[Required(ErrorMessage = "The field Birth Date is required")]

[DataType(DataType.Date, ErrorMessage="Wrong format !!!!")]

public DateTime bDate { get; set; }

}

The Controller (just the action)

public ActionResult myView() {

G4.Models.myModel model = new G4.Models.myModel();

return View(model);

}

The _Layout.cshtml

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width" />

<title>@ViewBag.Title</title>

@Styles.Render("~/Content/css")

@Styles.Render("~/Content/kendo/css")

<script src="@Url.Content("~/Scripts/jquery-1.8.3.min.js")"></script>

<script src="@Url.Content("~/Scripts/jquery-ui-1.9.2.custom.min.js")"></script>

<script src="@Url.Content("~/Scripts/modernizr-2.5.3.js")"></script>

<script src="@Url.Content("~/Scripts/kendo.web.min.js")"></script>

<script src="@Url.Content("~/Scripts/kendo.aspnetmvc.min.js")"></script>

<script src="@Url.Content("~/Scripts/kendo.validator.min.js")"></script>

<script src="@Url.Content("~/Scripts/cultures/kendo.culture.it-IT.min.js")"></script>

<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")"></script>

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")"></script>

<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")"></script>

</head>

<body>

<div>

@RenderBody()

</div>

</body>

</html>

The view

@model G4.Models.myModel

@{

ViewBag.Title = "myView";

Layout = "~/Views/Shared/_myLayout.cshtml";

}

<h2>

myView</h2>

@using (Html.BeginForm())

{

@Html.LabelFor(m => m.name)<br />

@Html.EditorFor(m => m.name)

<br /><br />

@Html.LabelFor(m => m.bDate)<br />

@Html.EditorFor(m => m.bDate)

@Html.ValidationMessageFor(m => m.bDate)

})

The EditorTemplate

@model DateTime?

@(Html.Kendo().DatePickerFor(m => m).Format("dd/MM/yyyy"))

The Result is attached !

DatePicker

answered on 04 Jan 2013

2 answers

236 views

[Solved] Hierarchical Grid Insert Not Working

I'm not sure if this is a bug, or something I'm doing wrong - I can't pass the primary key of the parent record to the insert controller of the details grid.
The grid is :-

@(Html.Kendo().Grid<CMS_2013.Models.CMS_SSIS_Package>()

.Name("Grid")

.Events(e=>e.Edit("onEdit"))

.Columns(columns=>

{columns.Bound(p=>p.PackageID).Title("ID");

columns.Bound(p => p.UniqueName).Title("Name");

columns.Bound(p => p.PackageName).Title("Value");

columns.Bound(p => p.PackageDescription).Title("Description");

columns.Command(command => { command.Edit(); command.Destroy(); });

})

.ClientDetailTemplateId("configTemplate")

.ToolBar(commands=>commands.Create())

.Editable(editable=>editable

.Mode(GridEditMode.PopUp))

.DataSource(dataSource=>dataSource

.Ajax()

.Model(m=>m.Id(p=>p.PackageID))

.Events(events => events.Error("error"))

.PageSize(10)

.Read(read=>read.Action("ReadPackages","Settings"))

.Create(create=>create.Action("InsertPackage","Settings"))

.Update(update=>update.Action("UpdatePackage","Settings"))

.Destroy(delete=>delete.Action("DeletePackage","Settings"))

)

.Pageable()

.Sortable()

.Filterable()

)

</div>

<script id="configTemplate" type="text/kendo-tmpl">

@(Html.Kendo().Grid<CMS_2013.Models.CMS_SSIS_Package_Config>()

.Name("Configs_#=PackageID#")

.Events(e=>e.Edit("onEdit2"))

.Columns(columns =>

{

columns.Bound(o => o.ConfigName);

columns.Bound(o => o.ConfigFile);

columns.Command(command => { command.Edit(); command.Destroy(); });

})

.ToolBar(commands=>commands.Create())

.Editable(editable=>editable

.Mode(GridEditMode.PopUp))

.DataSource(dataSource => dataSource

.Ajax()

.Model(m=>m.Id(p=>p.ConfigID))

.Read(read => read.Action("ReadConfigs", "Settings", new { PackageID = "#=PackageID#" }))

.Create(create=>create.Action("InsertConfig","Settings", new { PackageID = "#=PackageID#" }))

.Update(update=>update.Action("UpdateConfig","Settings"))

.Destroy(delete=>delete.Action("DeleteConfig","Settings"))

)

.Pageable()

.Sortable()

.ToClientTemplate()

)

</script>

The create controller is:-

[AcceptVerbs(HttpVerbs.Post)]

public ActionResult InsertConfig([DataSourceRequest] DataSourceRequest request, Models.CMS_SSIS_Package_Config config, int PackageID)

{

config.PackageID = PackageID;

_repository.InsertConfig(config);

return Json(new[] { config }.ToDataSourceResult(request, ModelState));

}

The problem is that the variable PackageID is always 0, even though fiddler shows the correct value being passed:-
e.g:-

http://localhost:51898/Settings/InsertConfig?PackageID=2

I've tried builds 2012.3.1114 and 2012.3.1210, but neither work. Am I doing something wrong? (unfortunately I can't find any examples for editing of a hierarchical grid - so it's hard to be sure).

Grid

answered on 02 Jan 2013

1 answer

157 views

problem with mvc code library sample : Entity Framework Code First CRUD

I tried the unmodified sample from :

http://www.kendoui.com/code-library/mvc/grid/entity-framework-code-first-crud.aspx

when the example is started, there are 4 customers:
customer1
customer2
customer3
customer4

I press the edit button on the 4th row, then change Name 'customer 4' to 'customer 5' and press 'update'
now I see :
customer1
customer2
customer3
customer1

so all cells in the last row are replaced with all the cells from the first row

if I refresh the browser (IE9) then I see the correct data :
customer1
customer2
customer3
customer5

Regards,

Marcel

Grid

answered on 01 Jan 2013

3 answers

115 views

ID of updated record not coming through to the controller

Hello,

I have a grid setup and working with read (paging, sorting etc.) and create actions. I'm having trouble with the update. Basically, the ID does not come through with the rest of the request. I can see it in the browser's network tab, so it is being sent, but when the controller action is finally executed, it is missing from the parameter object.

View Index.cshtml

@using Kendo.Mvc.UI

@using Mvc.Models

@model IEnumerable<ConciergeModel>

@{

ViewBag.Title = "Manage Live-Connect Concierge List";

Layout = "~/Views/Shared/_Kendo.cshtml";

}

<h2>@ViewBag.Title</h2>

<h3>Server Side Initialization</h3>

@{

try

{

@(Html.Kendo().Grid(Model)

.Name("Concierge")

.Columns(columns =>

{

columns.Bound(c => c.ConciergeId).Groupable(false).Width(40);

columns.Bound(c => c.ConciergeName).Width(240);

columns.Bound(c => c.ConciergeEmail).Width(480);

columns.Command(command => command.Edit());

})

.ToolBar(toolbar =>

{

toolbar.Create();

})

.Editable(editable => editable.Mode(GridEditMode.Inline))

.Pageable()

.Sortable()

.Scrollable()

.DataSource( dataSource => dataSource

.Ajax()

.Model(model => model.Id(c => c.ConciergeId))

.Create(create => create.Action("ConciergeCreate", "Concierge"))

.Read(read => read.Action("ConciergeRead", "Concierge"))

.Update(update => update.Action("ConciergeUpdate", "Concierge"))

))

}

catch(Exception e)

{

@Html.Raw("<pre>" + e + "</pre>");

}

ConciergeModel.cs

using System.ComponentModel;

using System.ComponentModel.DataAnnotations;

namespace Mvc.Models

{

public class ConciergeModel

{

public ConciergeModel() { }

[Required]

[DisplayName("ID")]

public long ConciergeId { get; set; }

[Required]

[DisplayName("Name")]

[DataType(DataType.Text)]

public string ConciergeName { get; set; }

[Required]

[DisplayName("Email Address")]

[DataType(DataType.EmailAddress)]

public string ConciergeEmail { get; set; }

}

And the controller action in ConciergeController.cs

// POST: /mvc/{admin-id}/Concierge/ConciergeUpdate

[AcceptVerbs(HttpVerbs.Post)]

public JsonResult ConciergeUpdate([DataSourceRequest] DataSourceRequest request,

ConciergeModel concierge)

{

if (concierge != null && ModelState.IsValid)

{

// At this point, concierge.ConciergeId is zero

concierge.Update(_lccConciergeService);

}

return Json(new[] { concierge }.ToDataSourceResult(request, ModelState));

}

Here is an example request, taken from Firebug (FF 17.0)

Response Headers

Cache-Control	`private`
Content-Length	`0`
Date	`Sun, 23 Dec 2012 23:19:15 GMT`
Persistent-Auth	`true`
Server	`Microsoft-IIS/8.0`
X-AspNet-Version	`4.0.30319`
X-AspNetMvc-Version	`3.0`
X-Powered-By	`ASP.NET`
X-SourceFiles	`=?UTF-8?B?QzpcTGVhZE1hc3RlclxMYXRlc3RccGxhdGZvcm1cTGVhZE1hc3RlclBsYXRmb3JtXEF3bC5MZWFkTWFzdGVyLk12Y1wxMjNcQ29uY2llcmdlc1xDb25jaWVyZ2VVcGRhdGU=?=`

Request Headersview source

Accept	`/`
Accept-Encoding	`gzip, deflate`
Accept-Language	`en-US,en;q=0.5`
Cache-Control	`no-cache`
Connection	`keep-alive`
Content-Length	`110`
Content-Type	`application/x-www-form-urlencoded; charset=UTF-8`
Cookie	`ASP.NET_SessionId=4ff34okn0jkkwqi3k0qswb4l`
Host	`localhost:7171`
Pragma	`no-cache`
Referer	`http://localhost:7171/mvc/123/Concierges/`
User-Agent	`Mozilla/5.0 (Windows NT 6.1; WOW64; rv:17.0) Gecko/20100101 Firefox/17.0`
X-Requested-With	`XMLHttpRequest`

Parametersapplication/x-www-form-urlencoded
ConciergeEmail	`jimbob@allwebleadstransferportal.com`
ConciergeId	`2`
ConciergeName	`Jim Bob`
filter
group
sort

Source
`sort=&group=&filter=&ConciergeId=2&ConciergeName=Jim+Bob&ConciergeEmail=jimbob%40allwebleadstransferportal.com`

So you can see that the ID should be 2, but it is zero, which causes the update operation to fail - the dataservice can't run the update query without the ID.

At one point, I had the ID with a private setter and marked with a [ReadOnly(true)] attribute, but as you can see, I removed that and the problem persisted.

Grid

answered on 01 Jan 2013

1 answer

369 views

[Solved] TreeView node select on RequestEnd event

After reading other various forum articles and documentation it looks like selecting the parent node (or any other node) is possible when the tree is initialised. However, with the following code the first node is not selected. It's a pretty simple bit of code, so would appreciate any help.

Thanks,
Ross

@(Html.Kendo().TreeView().Name("treeview")

.AutoBind(true)

.LoadOnDemand(true)

.DataTextField("Name")

.DataSource(dataSource => dataSource

.Read(read => read

.Action("GetNameList", "Home"))

.Events(e => e.RequestEnd("onRequestEnd"))

)

<script>

var treeview;

$(document).ready(function () {

treeview = $("#treeview").data("kendoTreeView");

});

function onRequestEnd() {

treeview.select(".k-first");

}

</script>

TreeView

answered on 31 Dec 2012

4 answers

366 views

[Solved] Required

Hello,

I need to use Autcomplete and the field associate with it in my model have a Required attribute.

So in my view despite I have a value in the Autocomplete, I got the message "Required field". I keep the @Html.ValidationMessageFor under my @(Html.Telerik().AutoCompleteFor...

How I can keep this validation and avoid "Required field" when I have a value?

Have nice Holidays.

AutoComplete

answered on 28 Dec 2012

1 answer

218 views

cascading dropdownlist in mvc4

Hello there. I am using kendo cascade dropdownlist. My requirement is that, when a user selects a value from Country dropdown, the State dropdown is being filtered from my controller. What I want is that, when a country has no state, the state dropdown should be replaced to a text box, so that, the user can stores his state name.
If I am using normal dropdowns then I can manage through the ajax request that i suppose to make. but I am not able to figure it out how to handle it on the Kendo dropdowns.?

Here is my code sample for what I am usning now.

<tr>

<td valign="top" colspan="2">

<div style="float: left">

<em>*</em> @Html.LabelFor(model => model.CountryId)

<br />

@Html.Kendo().DropDownListFor(model => model.CountryId).BindTo(Model.AvailableCountries).Animation(true).HtmlAttributes(new { onchange = "populateState(this)", style = "width:250px;" })

<span id="states-loading-progress" style="display: none;">Wait...

<img src='@Url.Content("~/Content/Images/ajax_loader_small.gif")' alt="Wait..." />

</span>

</div>

<div style="float: right">

@Html.LabelFor(model => model.PostalCode)

<br />

@Html.TextBoxFor(model => model.PostalCode, new { @class = "k-textbox", style = "width:100px;" })

</div>

</td>

</tr>

<tr>

<td valign="top">@Html.LabelFor(model => model.State)

<br />

<div id="ddlStates">

@(Html.Kendo().DropDownList()

.Name("State")

// .OptionLabel("Select state...")

.DataTextField("name")

.DataValueField("id")

.DataSource(source =>

{

source.Read(read =>

{

read.Route("GetStatesByCountryId")

.Data("CountryId")

.Type(HttpVerbs.Post); // This line serves to accept POST requests

})

.ServerFiltering(true);

})

.Enable(false)

.AutoBind(false)

.CascadeFrom("CountryId")

)

DropDownList

answered on 28 Dec 2012

6 answers

181 views

Bug in Grid Column Menu?

Hi,

I am referring to the example shown at the location - http://demos.kendoui.com/web/grid/column-menu.html and looks like there is a bug.

Open this page and you will see initially four columns are displayed.
Now click on OrderId menu column > and select Columns > and check Ship Country.

Doing above steps , ship country column gets removed from the grid but ideally in the menu column the checkbox should get unchecked.
now If you try to click on Ship Country checkbox again , then it will get unchecked but now Ship Country column gets added to the grid.

What I think is , this is working fine but the checkbox behavior should be exactly opposite as of now.
When you don't want to see any column in the grid - check box should show as unchecked and vise versa.

Please let me know If this makes sense.

Grid

answered on 28 Dec 2012

7 answers

769 views

Kendo MVC Grid, WebApi, and OData

Hello,

Last week, Microsoft put out an OData media formatter for WebApi, meaning that you should be able to both use built-in WebApi support for OData query methods, AND produce OData format output.

I have my feed, I have a Razor-produced MVC Grid on the page, and I have it making the request through .Read(read => read.Url(TheUrlToMyApi)). Now I just need to get it to understand OData. How do I go about settings the Transport, as there doesn't appear to be an option in the GridHelper.

Thanks!

Grid

answered on 28 Dec 2012