or
@(Html.Kendo().Grid<
PoLineItemModel
>().Name("grdPoLines")
.DataSource(dataSource => dataSource
.Ajax()
.Model(model => model.Id(m => m.Id))
.Batch(true)
.ServerOperation(false)
.PageSize(20)
.Events(events =>
{
events.RequestEnd("onRequestEnd");
events.Change("onRequestEnd");
})
.Create(create => create.Action("Ajax_CreatePoLines","PoHeaders", new { poid = Model.Id}))
.Read(read => read.Action("Ajax_ReadPoLines", "PoHeaders", new { poid = Model.Id }))
.Update(update => update.Action("Ajax_UpdatePoLines", "PoHeaders", new { poid = Model.Id }))
)
.Columns(columns =>
{
columns.Bound(m => m.PoHeaderId).Visible(false);
columns.Bound(m => m.Id);
columns.Bound(m => m.PartId);
columns.Bound(m => m.Quantity);
columns.Bound(m => m.UnitPrice);
})
.ToolBar(toolbar =>
{
toolbar.Save();
toolbar.Create();
})
.Navigatable()
.Sortable()
.Filterable()
.Groupable()
.Editable(edit => edit.Mode(GridEditMode.InCell))
)
public
ActionResult Ajax_CreatePoLines([DataSourceRequest] DataSourceRequest request, [Bind(Prefix =
"models"
)]IEnumerable<PoLineItemModel> poItems)
{
var poid = Int32.Parse(Request.QueryString[
"poid"
]);
var ldb =
new
ShopTrackEntities();
foreach
(var newitem
in
poItems)
{
var newline =
new
PoLine
{
PoHeaderId = poid,
PartId = newitem.PartId,
Quantity = newitem.Quantity,
UnitPrice = newitem.UnitPrice
};
ldb.PoLines.Add(newline);
}
ldb.SaveChanges();
var allitems = GetPoLineItems(poid);
var lines =
new
List<PoLineItemModel>();
foreach
(var item
in
allitems)
{
var additem =
new
PoLineItemModel
{
Id = item.Id,
PoHeaderId = item.PoHeaderId,
PartId = (
int
)item.PartId,
Quantity = (
int
)item.Quantity,
UnitPrice = (
decimal
)item.UnitPrice
};
lines.Add(additem);
}
return
Json(lines.ToDataSourceResult(request,ModelState));
}
@{
Layout = "~/Areas/razor/Views/Shared/_MobileLayout.cshtml";
}
<!DOCTYPE html>
<
html
>
<
head
>
<
title
></
title
>
<
link
href
=
"~/Content/kendo/2013.2.716/kendo.common.min.css"
rel
=
"stylesheet"
/>
<
link
href
=
"~/Content/kendo/2013.2.716/kendo.default.min.css"
rel
=
"stylesheet"
/>
<
link
href
=
"~/Content/kendo/2013.2.716/kendo.mobile.flat.min.css"
/
rel
=
"stylesheet"
>
<
script
src
=
"~/Scripts/kendo/2013.2.716/jquery.min.js"
></
script
>
<
script
src
=
"~/Scripts/kendo/2013.2.716/kendo.all.min.js"
></
script
>
</
head
>
<
body
>
@RenderBody()
</
body
>
</
html
>
@(Html.Kendo().MobileView()
.Name("loginView")
.Title("Stimline Mobile")
.Content(
@<
text
>
<
h2
>New login form goes here</
h2
>
</
text
>
)
)
<!DOCTYPE html>
<
html
>
<
head
>
<
title
></
title
>
<
link
href
=
"/Content/kendo/2013.2.716/kendo.common.min.css"
rel
=
"stylesheet"
/>
<
link
href
=
"/Content/kendo/2013.2.716/kendo.default.min.css"
rel
=
"stylesheet"
/>
<
link
href
=
"/Content/kendo/2013.2.716/kendo.mobile.flat.min.css"
/
rel
=
"stylesheet"
>
<
script
src
=
"/Scripts/kendo/2013.2.716/jquery.min.js"
></
script
>
<
script
src
=
"/Scripts/kendo/2013.2.716/kendo.all.min.js"
></
script
>
</
head
>
<
body
>
<
div
data-reload
=
"false"
data-role
=
"view"
data-stretch
=
"false"
data-title
=
"Stimline Mobile"
data-use-native-scrolling
=
"false"
data-zoom
=
"false"
id
=
"loginView"
><
div
data-role
=
"content"
>
<
h2
>New login form goes here</
h2
>
</
div
></
div
>
</
body
>
</
html
>
@(Html.Kendo()
.Grid<
TestFilterTemplate.Models.Model
>()
.Name("MainGrid")
.Columns(cols => {
cols.Bound(e => e.Id);
cols.Bound(e => e.Name);
})
.ClientDetailTemplateId("testtemplate")
.DataSource(data => {
data.Ajax().Read(read => read.Action("ListA", "Value"));
})
)
<
script
type
=
"text/html"
id
=
"testtemplate"
>
@(Html.Kendo()
.Grid<
TestFilterTemplate.Models.Model
>()
.Name("InnerGrid")
.Filterable() //<--- remove me and i work.
.Columns(cols => {
cols.Bound(e => e.Id);
cols.Bound(e => e.Name);
})
.DataSource(data => {
data.Ajax().Read(read => read.Action("ListA", "Value"));
}).ToClientTemplate()
)
</
script
>
@(Html.Kendo().TabStrip()
.Name("tabstrip")
.Items(tabstrip =>
{
foreach (var tab in @Model)
{
tabstrip.Add().Text(tab.ComponentTypes).Content(@<
text
>
@(Html.Kendo().Grid<
Portal.Entity.ComponentProperty
>().Name("grids" + tab.ComponentTypes)
//+ DateTime.Now.ToString().Replace(" ", ""))
.Columns(columns =>
{
}) .HtmlAttributes(new { style = "width: 980px;height: 800px" })
.Scrollable().Sortable().Pageable().DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("GetDetails", "ComponentProperties", new { PropertyName = tab.ComponentTypes } ))
.ServerOperation(false) ))
</
text
>
);
}
})
<
div
class
=
"row"
>
<
div
class
=
"form-group col-md-6 "
>
@Html.LabelFor(model => model.TeamCode)
@Html.EditorFor(model => model.TeamCode)
@Html.ValidationMessageFor(model => model.TeamCode)
</
div
>
</
div
>
<
div
class
=
"row"
>
<
div
class
=
"form-group col-md-6 "
>
@Html.LabelFor(model => model.TeamName)
@Html.EditorFor(model => model.TeamName)
@Html.ValidationMessageFor(model => model.TeamName)
</
div
>
</
div
>
<
div
class
=
"row"
>
<
div
class
=
"form-group col-md-12 "
>
@Html.LabelFor(model => model.TeamDesc)
@Html.EditorFor(model => model.TeamDesc)
@Html.ValidationMessageFor(model => model.TeamDesc)
</
div
>
</
div
>
<
div
class
=
"row"
>
<
div
class
=
"form-group col-md-12"
>
@Html.Partial("~/Areas/Teams/Views/TeamMember/_List.cshtml", this.Model.Members, null)
@Html.ValidationMessageFor(model => model.Members)
</
div
>
</
div
>
<
script
type
=
"text/javascript"
>
function buildData() {
// Get the form values into simple key value array
var formData = getFormObj();
var gridData = $("#teamMemberGrid").data("kendoGrid").dataSource.data();
// Prepare the model
return {
TeamDetailId: formData["TeamDetailId"],
TeamCode: formData["TeamCode"],
TeamDesc: formData["TeamDesc"],
TeamName: formData["TeamName"],
Members: gridData,
Dto: formData["Dto"]
};
}
$(function () {
$("form").on("submit", function (event) {
event.preventDefault();
var request = buildData();
submitForm(request, this.action);
});
});
</
script
>
<
div
>
@(Html.AjaxGridFor<
TeamMemberModel
>("teamMemberGrid", "Teams", "TeamMember")
.ToolBar
(
toolbar =>
{
if (Html.ShowEditControls())
{
toolbar.Template("<
a
class
=
'k-button k-button-icontext '
href
=
''
id
=
'customGridAdd'
><
span
></
span
>New</
a
><
span
></
span
>");
}
}
)
.Columns
(
columns =>
{
if (Html.ShowEditControls())
{
columns.Command(commands =>
{
commands.Custom("Edit").Text("Edit").Click("onGridEdit");
commands.Custom("Delete").Text("Delete").Click("onGridDelete");
});
}
}
)
.BuildAjaxDataSource<
TeamMemberModel
>("TeamMember", updateAction: "UpdateMember", createAction: "AddMember", destroyAction: "RemoveMember")
)
<
script
type
=
"text/javascript"
>
function onGridEditing(e) {
var id = $('#TeamDetailId').val();
if (e.model.isNew()) {
e.model.set("TeamDetailId", id);
e.model.set("TeamMemberId", kendo.guid());
}
setPopupTitle(e);
setGridPopupButtons(e);
}
//set username, first name, last name
function onGridSaving(e) {
var data = e.sender.dataSource.data();
for (var i = 0; i <
data.length
; i++) {
var
item
=
data
[i];
if (item.TeamMemberId === e.model.TeamMemberId) {
item.set('Username', $('Username').val());
}
}
}
function onGridDelete(e) {
var grid = $("#teamMemberGrid").data("kendoGrid");
var row = $(e.currentTarget).closest("tr");
grid.removeRow(row);
}
</script>
</
div
>
<
div
class
=
"form-group col-md-11"
>
@Html.LabelFor(model => model.UserDetailId)
@Html.EditorFor(model => model.UserDetailId)
@Html.ValidationMessageFor(model => model.UserDetailId)
</
div
>
<
div
class
=
"form-group col-md-11"
>
@Html.LabelFor(model => model.EffectiveFromDate)
@Html.EditorFor(model => model.EffectiveFromDate)
@Html.ValidationMessageFor(model => model.EffectiveFromDate)
</
div
>
<
div
class
=
"form-group col-md-11"
>
@Html.LabelFor(model => model.EffectiveToDate)
@Html.EditorFor(model => model.EffectiveToDate)
@Html.ValidationMessageFor(model => model.EffectiveToDate)
</
div
>
<
div
class
=
"form-group col-md-11"
>
@Html.LabelFor(model => model.FirstName)
@Html.EditorFor(model => model.FirstName)
@Html.ValidationMessageFor(model => model.FirstName)
</
div
>
@Html.HiddenFor(model => model.TeamMemberId)
@Html.KendoScripts()
<
input
id
=
"Username"
name
=
"Username"
data-val
=
"true"
data-bind
=
"value:Username"
type
=
"hidden"
value
=
""
>
<
input
id
=
"FirstName"
name
=
"FirstName"
data-val
=
"true"
data-bind
=
"value:FirstName"
type
=
"hidden"
value
=
""
>
<
input
id
=
"LastName"
name
=
"LastName"
data-val
=
"true"
data-bind
=
"value:LastName"
type
=
"hidden"
value
=
""
>
function onUserAutoCompleteChange(e) {
var dataItem = $("#@this.ViewData.ModelMetadata.PropertyName").data("kendoDropDownList").dataItem();
$("#Username").val(dataItem.Username);
$("#FirstName").val(dataItem.FirstName);
$("#LastName").val(dataItem.LastName);
}
</
script
>
/// <summary>
/// For use with Kendo Grid ajax binding
/// Creates new models by inserting the data posted by the Kendo Grid into the grid datasource.
/// </summary>
/// <param name="products">The model created by the user.</param>
/// <returns>The inserted model so the Kendo Grid is aware of the newly generated model</returns>
[HttpPost]
public
virtual
ActionResult AddMember([DataSourceRequest]DataSourceRequest request, TeamMemberModel model)
{
return
Json(
new
[] { model }.ToDataSourceResult(request, ModelState));
}