Hi,
We are totally lost here. We've been able to create a page that has a grid and uses a remote datasource with inline editing without problems. Now we discovered the 'batch editing' fascility of the grid and would like to use that.
We have however no clue how to receive the updated, created and deleted rows from the view and process them to the DB. We've been searching the web, documentation and examples for many hours now and are just plain stuck.
Who can help us?
Regards
Paul Sinnema
Here's the manually coded view that we use:
And the DataSource we generate:
And finally the controller we generate:
We are totally lost here. We've been able to create a page that has a grid and uses a remote datasource with inline editing without problems. Now we discovered the 'batch editing' fascility of the grid and would like to use that.
We have however no clue how to receive the updated, created and deleted rows from the view and process them to the DB. We've been searching the web, documentation and examples for many hours now and are just plain stuck.
Who can help us?
Regards
Paul Sinnema
Here's the manually coded view that we use:
<
script
src
=
"@Url.Content("
~/DataSources/ProjectOnderhoudDataSource.generated.js")"
type
=
"text/javascript"
></
script
>
<
div
id
=
"projectEditForm"
>
<
input
id
=
"DatumAanvang"
data-bind
=
"value: selectedProject.DatumAanvang"
/>
<
hr
/>
<
div
id
=
"projectRegelGrid"
class
=
"k-content"
/>
<
script
type
=
"text/javascript"
>
$(function ()
{
$("#DatumAanvang").width(220).kendoDatePicker();
ProjectOnderhoudDataSource.bind("change", function (data)
{
ProjectOnderhoudViewModel.set("selectedProject", this.view()[0]); // not nice yet
});
ProjectOnderhoudDataSource.read();
kendo.bind($("#projectEditForm"), ProjectOnderhoudViewModel);
ProjectOnderhoudProjectRegelListDataSource.options.transport.read.parentId = 1;
$("#projectRegelGrid").kendoGrid
({
dataSource: ProjectOnderhoudProjectRegelListDataSource,
navigatable: true,
// deletable: true,
pageable: true,
// sortable: true,
height: 400,
toolbar: ["create", "save", "cancel"],
columns:
[
{ field: "Aantal", title: "Aantal" },
{ field: "Prijs", title: "Prijs", format: "{0:c}" },
{ field: "BTW", title: "BTW", format: "{0:c}" },
{ field: "CreatedOn", title: "Datum aangemaakt", template: '#= kendo.toString(CreatedOn, "dd MMMM yyyy") #' },
{ field: "ChangedOn", title: "Datum gewijzigd", format: "{0:dd MM yyyy}" },
{ command: ["destroy"], title: " ", width: "110px" }
],
editable: true
});
});
</
script
>
</
div
>
And the DataSource we generate:
var
ProjectOnderhoudDataSource =
new
kendo.data.DataSource
({
transport:
{
read:
{
url:
"../ProjectOnderhoud/Get"
},
update:
{
url:
function
(item)
{
return
"../ProjectOnderhoud/Update/"
+ item.Id;
},
type:
"POST"
},
destroy:
{
url:
function
(item)
{
return
"../ProjectOnderhoud/Delete/"
+ item.Id;
},
type:
"DELETE"
},
create:
{
url:
"../ProjectOnderhoud/Create"
,
type:
"POST"
},
parameterMap:
function
(data, operation)
{
if
(operation ===
"update"
)
{
var
date;
date =
new
Date(data.DatumAanvang);
data.DatumAanvang = kendo.toString(
new
Date(data.DatumAanvang),
"dd-MM-yyyy HH:mm:ss"
);
date =
new
Date(data.DatumFaktuur);
data.DatumFaktuur = kendo.toString(
new
Date(data.DatumFaktuur),
"dd-MM-yyyy HH:mm:ss"
);
date =
new
Date(data.CreatedOn);
data.CreatedOn = kendo.toString(
new
Date(data.CreatedOn),
"dd-MM-yyyy HH:mm:ss"
);
date =
new
Date(data.ChangedOn);
data.ChangedOn = kendo.toString(
new
Date(data.ChangedOn),
"dd-MM-yyyy HH:mm:ss"
);
}
return
data;
}
},
schema:
{
model:
{
id:
"Id"
,
fields:
{
DatumAanvang:
{
type:
"date"
,
validation: { required :
true
}
},
DatumFaktuur:
{
type:
"date"
,
validation: { required :
true
}
},
Name:
{
type:
"string"
,
validation: { required :
true
}
},
Id:
{
type:
"int"
,
validation: { required :
true
}
},
CreatedOn:
{
type:
"date"
,
validation: { required :
true
}
},
CreatedBy:
{
type:
"int"
,
validation: { required :
true
}
},
ChangedOn:
{
type:
"date"
,
validation: { required :
true
}
},
ChangedBy:
{
type:
"int"
,
validation: { required :
true
}
}
}
}
}
});
var
ProjectOnderhoudViewModel =
new
kendo.observable
({
projectSource: ProjectOnderhoudDataSource,
selectedProjectOnderhoud:
null
});
var
ProjectOnderhoudProjectRegelListDataSource =
new
kendo.data.DataSource
({
transport:
{
read:
{
url:
function
()
{
var
parentId = ProjectOnderhoudProjectRegelListDataSource.options.transport.read.parentId;
return
"../ProjectOnderhoud/GetProjectRegelList/"
+ parentId;
},
parentId:
null
},
update:
{
url:
function
(item)
{
if
(item !=
null
&& item.Id != undefined)
{
return
"../ProjectRegel/Update/"
+ item.Id;
}
return
"../ProjectRegel/Update/-1"
;
},
type:
"POST"
},
destroy:
{
url:
function
(item)
{
return
"../ProjectRegel/Delete/"
+ item.Id;
},
type:
"DELETE"
},
create:
{
url:
"../ProjectRegel/Create"
,
type:
"POST"
},
parameterMap:
function
(data, operation)
{
if
(operation ===
"update"
)
{
var
date;
date =
new
Date(data.CreatedOn);
data.CreatedOn = kendo.toString(
new
Date(data.CreatedOn),
"dd-MM-yyyy HH:mm:ss"
);
date =
new
Date(data.ChangedOn);
data.ChangedOn = kendo.toString(
new
Date(data.ChangedOn),
"dd-MM-yyyy HH:mm:ss"
);
}
return
data;
}
},
batch:
true
,
pageSize: 15,
schema:
{
model:
{
id:
"Id"
,
fields:
{
Aantal:
{
type:
"int"
,
validation: { required :
true
},
editable:
true
},
Prijs:
{
type:
"float"
,
validation: { required :
true
},
editable:
true
},
BTW:
{
type:
"float"
,
validation: { required :
true
},
editable:
true
},
Id:
{
type:
"int"
,
validation: { required :
true
},
editable:
true
},
CreatedOn:
{
type:
"date"
,
validation: { required :
true
},
editable:
true
},
CreatedBy:
{
type:
"int"
,
validation: { required :
true
},
editable:
true
},
ChangedOn:
{
type:
"date"
,
validation: { required :
true
},
editable:
true
},
ChangedBy:
{
type:
"int"
,
validation: { required :
true
},
editable:
true
}
}
}
}
});
And finally the controller we generate:
using
System;
using
System.Collections.Generic;
using
System.Collections.ObjectModel;
using
System.Net.Http.Formatting;
using
System.Net.Http;
using
MVC3DOViewmodel;
using
System.Web;
using
System.Web.Mvc;
using
Xtensive.Orm;
using
Xtensive.Orm.Web;
using
System.Net;
namespace
MVC3DOApp.Controllers
{
public
partial
class
ProjectOnderhoudController : MainController
{
public
ActionResult Index()
{
return
this
.View();
}
public
object
Get()
// List<PCProjectOnderhoud>
{
if
(HasId)
{
return
Json(VMProjectOnderhoud.GetById(
this
, Id), JsonRequestBehavior.AllowGet);
}
else
{
return
Json(VMProjectOnderhoud.AllVMProjectOnderhoudList(
this
), JsonRequestBehavior.AllowGet);
}
}
public
HttpResponseMessage Update(
int
id)
{
HttpResponseMessage response =
new
HttpResponseMessage();
if
(id == -1)
// Batch update
{
response.StatusCode = HttpStatusCode.OK;
}
else
{
using
(var entity = VMProjectOnderhoud.GetById(
this
, Id))
{
entity.DatumAanvang = Convert.ToDateTime(Request[
"DatumAanvang"
]);
entity.DatumFaktuur = Convert.ToDateTime(Request[
"DatumFaktuur"
]);
entity.Name = Request[
"Name"
];
entity.CreatedOn = Convert.ToDateTime(Request[
"CreatedOn"
]);
entity.CreatedBy = Convert.ToInt32(Request[
"CreatedBy"
]);
entity.ChangedOn = Convert.ToDateTime(Request[
"ChangedOn"
]);
entity.ChangedBy = Convert.ToInt32(Request[
"ChangedBy"
]);
SaveChanges();
response.StatusCode = HttpStatusCode.OK;
}
}
return
response;
}
public
object
Delete(
int
id)
{
HttpResponseMessage response =
new
HttpResponseMessage();
using
(var entity = VMProjectOnderhoud.GetById(
this
, Id))
{
entity.Delete();
SaveChanges();
response.StatusCode = HttpStatusCode.OK;
}
return
response;
}
public
object
Create()
{
return
null
;
}
public
object
GetProjectRegelList (
int
id)
{
VMProjectOnderhoud entity = VMProjectOnderhoud.GetById(
this
, id);
entity.LoadProjectRegelList();
return
Json(entity.ProjectRegelList, JsonRequestBehavior.AllowGet);
}
}
}