Questions on UI for ASP.NET MVC Forum

5 answers

703 views

I've got a strongly typed razor view tied to an IEnumerable of an Object.

I'd like to add the ability to edit, in line, some, one or more, of the cells.

@using Kendo.Mvc.UI

@model IEnumerable<MyObject>

<legend>Objects</legend>

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

.Name("object-grid")

.Columns(columns =>

{

columns.Bound(m => m.Description).Title("Product");

columns.Bound(m => m.Id);

columns.Bound(m => m.Quantity)

.HtmlAttributes(new { @class = "quantity" });

})

.Scrollable()

.Selectable()

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

.DataSource(dataSource => dataSource

.Server()

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

)

How do I add an editor for my quantity field in this example?
Am I incorrectly setting up my view with an IEnumerable of my object?

In this example, the grid seems to be bound to an order object, not an IEnumerable of order,
and the developer can then simply use Html.EditorFor.

@Html.EditorFor(o => o.Quantity);

Grid

answered on 12 Sep 2013

2 answers

68 views

[Solved] <A> tag when building a TabStrip with the MVC wrapper

Is there a way to tell the MVC wrapper of TabStrip no to create the <a> tags? It does conflict with the hash navigation of my single page application.
Thanks.

Lutfi

TabStrip

answered on 11 Sep 2013

5 answers

176 views

[Solved] Refresh and paging not working. Getting "do you want to save or download read.json"

Hi,

I sent an email to support 2 days ago for this as I was told that emails are responded to within 24 hours. No reply. So trying on the forums now.

I have a grid that has columns dynamically created. It populates just fine.

When attempting to move to the next page or do a refresh, my browser asked me if I want to download or save read.json.

In my other grids with static columns (predefined), it works fine. It is just in this grid where the columns are dynamically created.

How do I fix this?

My View

@using Kendo.Mvc.UI

@model System.Data.DataTable

@{

Layout = null;

}

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8" />

<title>@ViewBag.Title</title>

<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />

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

<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />

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

<link href="@Url.Content("~/Content/kendo/2013.2.716/kendo.dataviz.min.css")" rel="stylesheet" type="text/css" />

<link href="@Url.Content("~/Content/kendo/2013.2.716/kendo.blueopal.min.css")" rel="stylesheet" type="text/css" />

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

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

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

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

</head>

<body style="height: 100%">

<div id="body">

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

.Name("Grid")

.Columns(columns =>

{

foreach (System.Data.DataColumn column in Model.Columns)

{

columns.Bound(column.ColumnName);

}

})

.Pageable(pager => pager.Refresh(true))

.DataSource(dataSource => dataSource

.Ajax()

.Model(model =>

{

foreach (System.Data.DataColumn column in Model.Columns)

{

model.Field(column.ColumnName, column.DataType);

}

})

.Read(read => read.Action("Read", "View", new { area = "DisplayPanel" }))

)

</div>

</body>

</html>

My Controller

using System;

using System.Web.Mvc;

using Kendo.Mvc.Extensions;

using Kendo.Mvc.UI;

using Smartrail.Application;

using Smartrail.Common;

using Smartrail.Domain.Service.Contracts;

namespace SmartrailWeb.Areas.DisplayPanel.Controllers

{

public class ViewController : Controller

{

public ActionResult Index()

{

using (var uow = ApplicationContext.ServiceLocator.GetInstance<IPresentationUnitOfWork>())

{

var service = ApplicationContext.ServiceLocator.GetService<IDisplayPanelCreatorService>(uow);

return View(service.GetDataSet(new DateTime(1990, 1, 1), null));

}

[HttpGet]

public ActionResult Read([DataSourceRequest] DataSourceRequest request)

{

using (var uow = ApplicationContext.ServiceLocator.GetInstance<IPresentationUnitOfWork>())

{

var service = ApplicationContext.ServiceLocator.GetService<IDisplayPanelCreatorService>(uow);

return Json(service.GetDataSet(new DateTime(1990, 1, 1), null).ToDataSourceResult(request), JsonRequestBehavior.AllowGet);

}

Please would someone respond ASAP. I am falling behind with my deadlines and need to get this sorted out ASAP.

TIA

Grid

answered on 11 Sep 2013

1 answer

180 views

3D charts

I am using trial version of Kendo UI chart 2013.2.716. Is it possible to create 3D charts using Kendo UI chart?

Thanks,
Renju

Chart

answered on 10 Sep 2013

3 answers

5.2K+ views

Closing a window on button click

If I'm loading the content on my window using LoadContentFrom - which loads the content of another view, how do I close the window if I have a button in that other view with an ID "close"

    $(document).ready(function () {
        var window = $("#window").data("kendoWindow");
 
        $("#open").click(function (e) {
            window.center();
            window.open();
        });
 
        $("#close").click(function (e) {
            window.close();
        });
 
    });

The above java script is within my main view, which doesn't seem to work, presumably because the close button isn't on the same view?

How do I get the window to close by a click of a button in a different view which is rendered in my modal window?

Window

answered on 09 Sep 2013

3 answers

500 views

KendoUI ListView Edit Template Ignoring Model Required Attribute Razor Partial Form

I am trying to create a simple customer search/edit form using Kendo.ListView() in MVC4.

I am running into a problem when trying to remove a value from the form, MVC is reporting that the field is required, when it is not. Further investigation has revealed that the whole Validation framework is not working.

Here is my model:

public class ClientModel

{

private readonly Guid _id;

public string Id

{

get { return _id.ToString(); }

}

[Required(ErrorMessage = "Please enter a Name for this client.")]

[Display(Name = "Name")]

public string Name { get; set; }

[Display(Name = "Address")]

public string AddressLine1 { get; set; }

public string AddressLine2 { get; set; }

public string AddressLine3 { get; set; }

[Display(Name = "Email Address")]

public string EmailAddress { get; set; }

[Display(Name = "Home Phone")]

public string HomePhone { get; set; }

[Display(Name = "Cellular Phone")]

public string CellularPhone { get; set; }

[Display(Name = "Work Phone")]

public string WorkPhone { get; set; }

}

And my main view:

@using Models

@section Styles {

<link href="@Url.Content("~/Content/Client.css")" rel="stylesheet" type="text/css" />

}

<div class="k-toolbar k-grid-toolbar">

<a class="k-button k-button-icontext k-add-button" href="#"><span class="k-icon k-add"></span>Add Client</a>

</div>

<script type="text/x-kendo-tmpl" id="client-view-template">

<div class="client">

<h3>${Name}</h3>

<div class="client-details">

<dl>

<dt>${AddressLine1}</dt>

<dt>${AddressLine2}</dt>

<dt>${AddressLine3}</dt>

</dl>

<h4>Phone</h4>

<dl>

<dt>(H) ${HomePhone}</dt>

<dt>(M) ${CellularPhone}</dt>

<dt>(W) ${WorkPhone}</dt>

</dl>

<dl>

<dt>${EmailAddress}</dt>

</dl>

<div class="edit-buttons">

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

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

</div>

</script>

@(Html

.Kendo()

.ListView<ClientModel>()

.Name("ClientList")

.TagName("div")

.ClientTemplateId("client-view-template")

.DataSource(dataSource => dataSource

.Model(model =>

{

model.Id("Id");

model.Field<string>("Id").DefaultValue(Guid.Empty).Editable(false);

model.Field<string>("Name").DefaultValue(string.Empty);

model.Field<string>("Address1").DefaultValue(string.Empty);

model.Field<string>("Address2").DefaultValue(string.Empty);

model.Field<string>("Address3").DefaultValue(string.Empty);

model.Field<string>("HomePhone").DefaultValue(string.Empty);

model.Field<string>("CellularPhone").DefaultValue(string.Empty);

model.Field<string>("WorkPhone").DefaultValue(string.Empty);

model.Field<string>("EmailAddress").DefaultValue(string.Empty);

})

.Read(read => read.Action("ClientRead", "Clients"))

.Create(create => create.Action("ClientCreate", "Clients"))

.Update(update => update.Action("ClientUpdate", "Clients"))

.Destroy(destroy => destroy.Action("ClientDestroy", "Clients"))

)

.Editable(editable => editable.TemplateName("ClientModelEdit"))

)

<script>

$(function() {

var listView = $("#ClientList").data("kendoListView");

$(".k-add-button").click(function(e) {

listView.add();

e.preventDefault();

});

</script>

And finally the edit template:

@using Models

@model ClientModel

@{ Html.EnablePartialViewValidation(); }

<div class="client-edit">

@Html.ValidationSummary(true);

@Html.HiddenFor(model => model.Id)

<dl>

<dt>@Html.LabelFor(p => p.Name)</dt>

<dd>

@Html.EditorFor(p => p.Name)

</dd>

<dt>

@Html.LabelFor(p => p.AddressLine1)

</dt>

<dd>

@Html.EditorFor(p => p.AddressLine1)

</dd>

<dt>

</dt>

<dd>

@Html.EditorFor(p => p.AddressLine2)

</dd>

<dt>

</dt>

<dd>

@Html.EditorFor(p => p.AddressLine3)

</dd>

<dt>

@Html.LabelFor(p => p.HomePhone)

</dt>

<dd>

@Html.EditorFor(p => p.HomePhone)

</dd>

<dt>

@Html.LabelFor(p => p.CellularPhone)

</dt>

<dd>

@Html.EditorFor(p => p.CellularPhone)

</dd>

<dt>

@Html.LabelFor(p => p.WorkPhone)

</dt>

<dd>

@Html.EditorFor(p => p.WorkPhone)

</dd>

<dt>

@Html.LabelFor(p => p.EmailAddress)

</dt>

<dd>

@Html.TextBoxFor(p => p.EmailAddress)

</dd>

</dl>

<div class="edit-buttons">

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

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

</div>

I'm just wondering if I am missing something. I have been trying to figure this out for 3 days now.

Thanks

ListView

answered on 09 Sep 2013

1 answer

74 views

Second command in row breaks grid

I have a server bound grid that is working well until I add a second command button to a row. When I do this the formatting is thrown off and a second grid is placed at the bottom of the first. Does anyone recognize the problem?

@(Html.Kendo().Grid<TimeAndAttendance.Models.DaysActivityViewModel>(Model.DayActivities)

.Name("DaysActivities")

.Columns(columns =>

{

columns.Bound(da => da.Facility);

columns.Bound(da => da.Position);

columns.Bound(da => da.Shift);

columns.Bound(da => da.Paycode);

columns.Bound(da => da.Hours);

columns.Bound(da => da.Notes);

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

})

.Scrollable()

.HtmlAttributes(new { style = "height:200px;" })

.DataSource(dataSource => dataSource

.Server()

.Update(update => update.Action("Edit", "IndividualTimeEntry"))

.Destroy(destroy => destroy.Action("Delete", "IndividualTimeEntry"))

.Model(model => model.Id(da => da.ID))

)

Grid

answered on 09 Sep 2013

2 answers

148 views

How do I customize sorting on a specific column ?

Hello,

I have the need to sort a column of strings using a subset of the string parsed into an integer. For example:

AA1
AA2
AA3
AB4
CC5

I need the sorting to strip out all alpha's and sort by the integer. Please advise how I can do this using the following implementation:

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

.Name("Grid")

.Columns(columns =>

{

columns.Bound(p => p.Id).Width(60);

columns.Bound(p => p.Title).Width(250);

})

.Sortable()

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(10)

.Read(read => read.Action("Get", "Grid", new {view = "MyActive", showAll = false}))

)

Grid

answered on 09 Sep 2013

1 answer

127 views

[Solved] Grid Detailtemplate Conclusion

Hello everybody

I have a grid with a detailtemplate. This detailtemplate contains also a grid.
My parent grid refers to an Edition-Model which contains many Articles. When the user expands an Edition-Row, the detailgrid contains all correct Articles.

The problem now is, that i want to check, if one Article is allready read by the user. So i want to insert a conclusion, that i can show one or another value in a column of the detailgrid.

On this website, i found the template-syntax: http://docs.kendoui.com/getting-started/framework/templates/overview#template-syntax

But it doesnt work fine. In the detailgrid the conclusion checks every time the parent-data (Edition) and not the detaildata (Article).

My ClientTemplate (for the detail grid)

columns.Bound(c => c.IsRead).ClientTemplate("" +

"#if(IsRead== true) {#" +

"Read"+

"#} else{#" +

"Not Read +

"#}#")

.Title("State").Width(120);

When i put an output in the ClientTemplate as shown in the link above, then the Template renders the correct data (with the \\# syntax)

Example (clienttemplate for the detail grid):

columns.Bound(c => c.IsRead).ClientTemplate("" +

"#if(IsRead== true) {#" +

"#=data.Id#"+ // Shows parent Id

"#} else{#" +

"\\#=data.Id\\# + // Shows the correct id from the detail row

"#}#")

.Title("State").Width(120);

My question now: How can I check the data of the detailrow in a conclusion??

Edit:
For better understanding: I have the sam CSharp - Model in both Grids. When i make two diffrent models, then it is the same situation. Only one diffrence: Javascript-Console says: Undifined Property (for IsRead). Because my actual Edition - Model has no property named IsRerad.

Thanks and have a nice day
MJ

Grid

answered on 09 Sep 2013

2 answers

466 views

MultiSelect in Grid

I am currently trying out kendo.ui for asp.net mvc

I have a model

public class RegionViewModel
{
public int Id { get; set; }
public string Name { get; set; }
public IList<VillageViewModel> Villages {get; set; }
}

public class VillageViewModel
{
public int Id {get; set; }
public string Name {get; set; }
}

Basically its a many to many relationship .. the model is built using entity framework.
But that is not really the problem.

I am trying to select multiple Villages from a huge list and assign them to a region. The region is the main row entity for a grid.
I am using the MultiSelect widget in an editor template.

This works fine, selection works and everything. But on clicking update no ajax request is sent to the server ( i am using inline edit mode )
I have tried everything, looked at the sample provided here: http://www.kendoui.com/code-library/mvc/grid/using-multiselect-in-grid.aspx

But i cannot get this to work apparently.
One requirement that i have btw is that the multiselect has to be using ajax as well since for exampel there are 17.000 possible villages in our database right now
and loading them all on creating the editor takes to long, and also makes the editor basically unusable.

Here is my field and column setup code:

fields.Field(Accessor).DefaultValue(new List<VillageViewModel>());
columns.Bound(t => t.Villages).EditorTemplateName("MultiReference");

My editor template: ( not using the html helper ,since that does not allow for using serverpaging right now )

select id="Villages">
</select>

<script>

jQuery(function() {
jQuery("#Villages").kendoMultiSelect(
{
"dataSource":
{
"transport":
{
"prefix": "",
"read":
{
"url": "/admin/regions/villages",
"data": function() {
return kendo.ui.MultiSelect.requestData("#Villages");
}
}
},
"serverFiltering": true,
"serverPaging": true,
"pageSize": 20,
"filter": [],
"schema": {
"errors": "Errors"
}
},
"dataTextField": "Name",
"dataValueField": "Id",
"value": []
});
});
</script>

And here is the final grid script that gets rendered:

jQuery(function () {
jQuery("#regionsGrid").kendoGrid({
"columns": [{
"title": "Name",
"field": "Name",
"filterable": {},
"encoded": true,
"editor": "\u003cinput class=\"k-textbox\" id=\"Name\" name=\"Name\" type=\"text\" value=\"\" /\u003e\u003cspan class=\"field-validation-valid\" data-valmsg-for=\"Name\" data-valmsg-replace=\"true\"\u003e\u003c/span\u003e"
}, {
"title": "Villages",
"template": "#for(var i = 0; i\u003c data.length; i ){#\u003cspan\u003e#:data[i].Name#\u003c/span\u003e#}#",
"field": "Villages",
"filterable": {},
"encoded": true,
"editor": "\r\n\r\n\u003cselect id=\"Villages\"\u003e\r\n\u003c/select\u003e\r\n\r\n\u003cscript\u003e\r\n\r\n jQuery(function() {\r\n jQuery(\"#Villages\").kendoMultiSelect(\r\n {\r\n \"dataSource\":\r\n {\r\n \"transport\":\r\n {\r\n \"prefix\": \"\",\r\n \"read\":\r\n {\r\n \"url\": \"/Admin/regions/Villages\",\r\n \"data\": function() {\r\n return kendo.ui.MultiSelect.requestData(\"#Villages\");\r\n }\r\n }\r\n },\r\n \"serverFiltering\": true,\r\n \"serverPaging\": true,\r\n \"pageSize\": 20,\r\n \"filter\": [],\r\n \"schema\": {\r\n \"errors\": \"Errors\"\r\n }\r\n },\r\n \"dataTextField\": \"Name\",\r\n \"dataValueField\": \"Id\",\r\n \"value\": []\r\n });\r\n });\r\n\u003c/script\u003e\r\n\r\n\u003cspan class=\"field-validation-valid\" data-valmsg-for=\"Villages\" data-valmsg-replace=\"true\"\u003e\u003c/span\u003e"
}, {
"title": "Commands",
"width": "200px",
"command": [{
"name": "edit",
"buttonType": "ImageAndText",
"text": "Edit"
}, {
"name": "destroy",
"buttonType": "ImageAndText",
"text": "Delete"
}]
}],
"pageable": {
"buttonCount": 10
},
"sortable": true,
"scrollable": false,
"editable": {
"confirmation": "Are you sure you want to delete this record?",
"mode": "inline",
"create": true,
"update": true,
"destroy": true
},
"toolbar": {
"command": [{
"name": null,
"buttonType": "ImageAndText",
"text": "Add new record"
}]
},
"dataSource": {
"transport": {
"prefix": "",
"read": {
"url": "/Admin/regions/List"
},
"update": {
"url": "/Admin/regions/Update",
"data": gridSerialize
},
"create": {
"url": "/Admin/regions/Create",
"data": gridSerialize
},
"destroy": {
"url": "/Admin/regions/Destroy"
}
},
"pageSize": 10,
"page": 1,
"total": 0,
"serverPaging": true,
"serverSorting": true,
"serverFiltering": true,
"serverGrouping": true,
"serverAggregates": true,
"type": "aspnetmvc-ajax",
"filter": [],
"schema": {
"data": "Data",
"total": "Total",
"errors": "Errors",
"model": {
"id": "Id",
"fields": {
"Villages": {
"type": "object",
"defaultValue": []
},
"Id": {
"editable": false,
"type": "number"
},
"Name": {
"type": "string"
},
"Slug": {
"type": "string"
}
}
}
},
"autoSync": true
}
});
});

Or are there any other recommended options to edit many to many relationships in a grid ?

Grid

answered on 06 Sep 2013