or
Hi,
I looked at the example in http://demos.kendoui.com/web/grid/editing-popup.html (ASP.NET MVC)
Kendo.Mvc.Examples.Models.ProductViewModel is a simple object,
I am interested in supporting Create and Update of an object that relates to other objects (in a Parent child manner)
For example : Lets say the grid shows Students and a Student relates to Phones via StudentPhones
The popup should enable the user to edit/create a Student with its Phones all together.
I wonder if you can supply me a project that shows how to handle the Create and Update in a similar scenario to the one I described.
Thanks in advance.
Lauri
p.s. My app is an N-Tier app using EntityFramework
public class AwesomeDTO
{
public string ID {get;set;}
public string Name {get;set;}
public string Description {get;set;}
}
@model IEnumerable<
AwesomeDTO
>
@(Html.Kendo().Grid(Model)
.Name("AwesomeGrid")
.Columns(columns =>
{
columns.Bound(u => u.Name).Title("Name").Filterable(true).Width(200);
columns.Bound(u => u.Description).Title("Description").Filterable(false).Width(200);
columns.Command(command => command.Custom("Manage").Click("manageUser").Text("Manage")).Title("Manage");
}
)
.Pageable()
.Filterable(filter => filter.Enabled(true))
.DataSource(dataSource => dataSource
.Ajax()
.ServerOperation(false)
.PageSize(10)
.Model(model => model.Id(u => u.ResourceID))
.Events(events => events.Error("onError"))
.Read(read => read.Action("GetAwesome", "Awesome"))
)
)
function manageUser(e) {
e.preventDefault();
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
var result;
debugger;
$.ajax({
url: '@Url.Action("ManageAwesoem", "Awesome")',
type: 'POST',
data: JSON.parse(JSON.stringify(dataItem)),
content: 'text/html',
success: function (data) {
alert(data);
},
error: function (data) {
alert('error:' + data);
}
});
}
public ActionResult ManageAwesome(AwesomeDTO userToManage)
{
return View(userToManage);
}
.Editable(editable => editable.Mode(GridEditMode.PopUp))
01.
@(Html.Kendo().Grid<
GarbageRouteViewModel
>()
02.
.Name("garbageRoutes")
03.
.DataSource(dataSource => dataSource
04.
.Ajax()
05.
.ServerOperation(false) // Needs to be used if Grouping or filtering is done in linq-qry(on WeekSchedule or Season), cos ToDataSourceResult() won be able to revers from VM. //uni0jh
06.
.Model(model => model.Id(x => x.ID))
07.
.Read(read => read.Action("GetGarbageRoutes", "GarbageRoute"))
08.
.Update(update => update.Action("UpdateGarbageRoute", "GarbageRoute"))
09.
.Group(groups => groups.Add(model => model.WeekSchedule))
10.
//.PageSize(2)
11.
)
12.
.Columns(columns =>
13.
{
14.
columns.Bound(x => x.ID).Visible(false);
15.
columns.Bound(x => x.SortOrderIndex).Width(10).Title("^");
16.
columns.Bound(x => x.ObjectName);
17.
columns.Bound(x => x.Season);
18.
columns.Bound(x => x.WeekSchedule);
19.
columns.Bound(x => x.Description);
20.
columns.Bound(x => x.PartAreaName);
21.
columns.Bound(x => x.PartAreaId).Visible(false);
22.
columns.Command(command => command.Edit().UpdateText("Uppdatera").CancelText("Avbryt"));
23.
})
24.
25.
.ToolBar( toolbar => {
26.
toolbar.Template(@<
text
>
27.
<
div
class
=
"toolbar"
>
28.
<
label
class
=
"partArea-label"
for
=
"partArea"
>PartArea:</
label
>
29.
@(Html.Kendo().DropDownList()
30.
.Name("partAreaFilter")
31.
.OptionLabel("Alla")
32.
.DataTextField("Name")
33.
.DataValueField("ID")
34.
.AutoBind(false)
35.
.Events(e => e.Change("partAreaFilterChange"))
36.
.DataSource(ds =>
37.
{
38.
ds.Read("GetPartAreas", "PartArea");
39.
40.
})
41.
)
42.
</
div
>
43.
</
text
>);
44.
})
45.
//.HtmlAttributes(new { style = "height: 460px" })
46.
//.Editable(editable => editable.Mode(GridEditMode.PopUp)) //detta är kendos built in-variant.
47.
.Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("GarbageRouteEdit"))
48.
//.Groupable()
49.
.Pageable()
50.
.Sortable()
51.
52.
)
001.
@model Roa.Common.DTO.GarbageRouteViewModel
002.
003.
@Html.HiddenFor(model => model.ID)
004.
005.
<
div
class
=
"span8"
>
006.
<
div
class
=
"span3"
>
007.
<
div
class
=
"editor-label"
>
008.
Beskrivning
009.
</
div
>
010.
<
div
class
=
"editor-field"
>
011.
@Html.TextAreaFor(model => model.Description, new { @required="*", @placeholder="Beskrivning här..." } )
012.
@Html.ValidationMessageFor(model => model.Description)
013.
</
div
>
014.
<
div
class
=
"editor-label"
>
015.
Veckodag
016.
</
div
>
017.
<
div
class
=
"editor-field"
>
018.
@Html.TextBoxFor(model => model.Weekday, new { @required="*" })
019.
@Html.ValidationMessageFor(model => model.Weekday)
020.
</
div
>
021.
022.
<
div
class
=
"editor-label"
>
023.
Start månad
024.
</
div
>
025.
<
div
class
=
"editor-field"
>
026.
@Html.TextBoxFor(model => model.StartMonth, new { @required="*" })
027.
@Html.ValidationMessageFor(model => model.StartMonth)
028.
</
div
>
029.
<
div
class
=
"editor-label"
>
030.
Start dag
031.
</
div
>
032.
<
div
class
=
"editor-field"
>
033.
@* @(Html.Kendo().DateTimePickerFor(model => model.StartDay)
034.
.Value(DateTime.Now)
035.
.Max(DateTime.Now)
036.
.Events(e => e.Change("startChange"))
037.
)*@
038.
@Html.TextBoxFor(model => model.StartDay, new { @required="*" })
039.
@Html.ValidationMessageFor(model => model.StartDay)
040.
</
div
>
041.
042.
<
div
class
=
"editor-label"
>
043.
Start timma
044.
</
div
>
045.
<
div
class
=
"editor-field"
>
046.
@Html.TextBoxFor(model => model.StartHour, new { @required="*" })
047.
@Html.ValidationMessageFor(model => model.StartHour)
048.
</
div
>
049.
</
div
>
050.
<
div
class
=
"span4"
>
051.
052.
053.
<
div
class
=
"editor-label"
>
054.
Slut månad
055.
</
div
>
056.
<
div
class
=
"editor-field"
>
057.
@Html.TextBoxFor(model => model.EndMonth, new { @required="*" })
058.
@Html.ValidationMessageFor(model => model.EndMonth)
059.
</
div
>
060.
061.
<
div
class
=
"editor-label"
>
062.
Slut dag
063.
</
div
>
064.
<
div
class
=
"editor-field"
>
065.
@Html.TextBoxFor(model => model.EndDay, new { @required="*" })
066.
@Html.ValidationMessageFor(model => model.EndDay)
067.
</
div
>
068.
069.
<
div
class
=
"editor-label"
>
070.
Slut timma
071.
</
div
>
072.
<
div
class
=
"editor-field"
>
073.
@Html.TextBoxFor(model => model.EndHour, new { @required="*" })
074.
@Html.ValidationMessageFor(model => model.EndHour)
075.
</
div
>
076.
077.
<
div
class
=
"editor-label"
>
078.
Ojämn vecka
079.
</
div
>
080.
<
div
class
=
"editor-field"
>
081.
@Html.CheckBoxFor(model => model.OddWeeks, new { @required="*" })
082.
@Html.ValidationMessageFor(model => model.OddWeeks)
083.
</
div
>
084.
085.
<
div
class
=
"editor-label"
>
086.
Jämn vecka
087.
</
div
>
088.
<
div
class
=
"editor-field"
>
089.
@Html.CheckBoxFor(model => model.EvenWeeks, new { @required="*" })
090.
@Html.ValidationMessageFor(model => model.EvenWeeks)
091.
</
div
>
092.
</
div
>
093.
<
div
class
=
"span8"
>
094.
<
input
type
=
"file"
name
=
"files"
id
=
"files"
multiple
=
"multiple"
value
=
" "
/>
095.
<
p
>
096.
097.
</
p
>
098.
099.
</
div
>
100.
</
div
>
101.
[HttpPost]
[ValidateAntiForgeryToken]
public
ActionResult LogOff()
return
RedirectToAction(
"Index"
,
"Home"
);
}
@(Html.Kendo().Menu()
.Name("menu")
.Items(items =>
{
items.Add().Text("Home").Action("Index", "Home");
//...
items.Add().Text(User.Identity.Name)
.Items(children =>
{
//...
// this results in a 404 error
children.Add().Text("Sign out").Action("LogOff", "Account");
});
})
)
<
text
>
Hello, @Html.ActionLink(User.Identity.Name, "Manage", "Account", routeValues: null, htmlAttributes: new { @class = "username", title = "Manage" })!
@using (Html.BeginForm("LogOff", "Account", FormMethod.Post, new { id = "logoutForm" })) {
@Html.AntiForgeryToken()
<
a
href
=
"javascript:document.getElementById('logoutForm').submit()"
>Sign out</
a
>
}
</
text
>
<
input
data-val
=
"true"
data-val-date
=
"The field FechaInicio must be a date."
data-val-required
=
"El campo FechaInicio es obligatorio."
id
=
"FechaInicio"
name
=
"FechaInicio"
type
=
"date"
value
=
"2013-07-20T15:00:00.000Z"
/>
<
input
data-val
=
"true"
data-val-date
=
"The field FechaInicio must be a date."
data-val-required
=
"El campo FechaInicio es obligatorio."
id
=
"FechaInicio"
name
=
"FechaInicio"
type
=
"date"
value
=
"15/07/2013"
/>
date.toISOString()