Questions on UI for ASP.NET MVC Forum

1 answer

164 views

unable to bind grid properly

Hello I have a grid in my razor view,
I have added these resources

<link rel="stylesheet" href="@Url.Content("~/Content/KendoThemes/kendo.common.min.css")">

<link rel="stylesheet" href="@Url.Content("~/Content/KendoThemes/kendo.rtl.min.css")">

<link rel="stylesheet" href="@Url.Content("~/Content/KendoThemes/kendo.default.min.css")">

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

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

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

here is my grid

@(Html.Kendo().Grid<Nop.Web.Models.Customer.CustomerInfoModel>()

.Name("Grid")

.Columns(columns => {

columns.Bound(p => p.Active);

// columns.Bound(p => p.cbSubscriptions).ClientTemplate("#=Employee.EmployeeName#");

columns.Bound(p => p.cbSubscriptions);

columns.Bound(p => p.FirstName);

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

})

.ToolBar(toolBar => toolBar.Create())

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

.Pageable()

.Sortable()

.Scrollable()

.DataSource(dataSource => dataSource

.Ajax()

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

.Model(model => model.Id(p => p.Id))

.Create(update => update.Action("EditingInline_Create", "Customer"))

.Read(read => read.Action("UsersList", "Customer"))

.Update(update => update.Action("EditingInline_Update", "Grid"))

.Destroy(update => update.Action("EditingInline_Destroy", "Grid"))

)

<script type="text/javascript">

function error_handler(e) {

if (e.errors) {

var message = "Errors:\n";

$.each(e.errors, function (key, value) {

if ('errors' in value) {

$.each(value.errors, function () {

message += this + "\n";

});

}

});

alert(message);

}

</script>

This works fine. it calls my action in controller to read the data, but the problem is that, it is displaying any rows in grid, even the controller returns the record. I have checked the console, there is no script error, and my network tab shows that these data has been transferred from the server.

data: [{Email:familymanager1_user1@gmail.com, AllowUsersToChangeUsernames:false, UsernamesEnabled:false,…},…]
1. 0: {Email:familymanager1_user1@gmail.com, AllowUsersToChangeUsernames:false, UsernamesEnabled:false,…}
2. 1: {Email:familymanager1_user2@gmail.com, AllowUsersToChangeUsernames:false, UsernamesEnabled:false,…}
3. 2: {Email:familymanager1_user3@gmail.com, AllowUsersToChangeUsernames:false, UsernamesEnabled:false,…}
4. 3: {Email:as@sad.com, AllowUsersToChangeUsernames:false, UsernamesEnabled:false, Username:aasasasasas687,…}
total: 4

Am I missing something to add.

Grid

answered on 07 Jan 2013

1 answer

207 views

[Solved] remote WebApi not work

I read http://www.kendoui.com/code-library/mvc/grid/binding-to-a-web-apicontroller.aspx , but remote WebApi not work

@(Html.Kendo().Grid<KendoUIMvcApplication3.Models.Product>()

.Name("Grid")

.Columns(columns =>

{

columns.Bound(p => p.ProductName);

columns.Bound(p => p.UnitsInStock);

columns.Command(c =>

{

c.Edit();

c.Destroy();

});

})

.ToolBar(tools =>

{

tools.Create();

})

.Sortable()

.Pageable()

.Filterable()

.DataSource(dataSource => dataSource

.Ajax()

.Model(model =>

{

model.Id(p => p.ProductID);

})

.Read(read => read.Url("http://192.168.1.10:699/api/Product").Type(HttpVerbs.Get))

.Create(create => create.Url("http://192.168.1.10:699/api/Product").Type(HttpVerbs.Post))

.Update(update => update.Url("http://192.168.1.10:699/api/Product").Type(HttpVerbs.Put))

.Destroy(destroy => destroy.Url("http://192.168.1.10:699/api/Product").Type(HttpVerbs.Delete))

)

<script>

$(function() {

var grid = $("#Grid").data("kendoGrid");

// WebAPI needs the ID of the entity to be part of the URL e.g. PUT /api/Product/80

grid.dataSource.transport.options.update.url = function(data) {

return "http://192.168.1.10:699/api/Product/" + data.ProductID;

};

// WebAPI needs the ID of the entity to be part of the URL e.g. DELETE /api/Product/80

grid.dataSource.transport.options.destroy.url = function(data) {

return "http://192.168.1.10:699/api/Product/" + data.ProductID;

};

});

</script>

Grid

answered on 07 Jan 2013

1 answer

113 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

242 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

160 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

134 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

372 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

376 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

223 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>