or
I just want to use Kendo grid and when I select a row I want to take the details to the edit section and user do the modifications finally he should be able to click the save button and then changes should apply to the gird.
I try to do this up to some level. Here is the sample
http://jsfiddle.net/QWwnR/38/
Please suggest me a better approach to do this.
Thanks
Seminda
model:{
fields:{
idx:{ type:"string" },
classification:{ type:"string" },
creator:{ type:"string" },
date:{ type:"string" },
elevation:{ type:"number" },
datum:{ type:"string" },
size:{ type:"number" },
type:{ type:"string" },
description:{ type:"string" },
dirLocation:{ type:"string" },
distributor:{ type:"string" },
egplDate:{ type:"date" },
handling:{ type:"string" },
product:{ type:"string" },
uniqID:{ type:"string" }
}
columns:[
{
field:"creator",
width:220
},
{
field:"date",
width:170
}, (// etc.)
var
crudServiceBaseUrl =
"/Admin/"
,
dataSource =
new
kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl +
"UserEditorRead"
,
dataType:
"json"
,
type:
"POST"
},
update: {
url: crudServiceBaseUrl +
"UserEditorUpdate"
,
dataType:
"json"
,
type:
"POST"
},
destroy: {
url: crudServiceBaseUrl +
"UserEditorDestroy"
,
dataType:
"json"
,
type:
"POST"
},
create: {
url: crudServiceBaseUrl +
"UserEditorCreate"
,
dataType:
"json"
,
type:
"POST"
},
parameterMap:
function
(options, operation) {
if
(operation !==
"read"
&& options.models) {
return
{ models: kendo.stringify(options.models) };
}
}
},
batch:
true
,
pageSize: 30,
schema: {
model: {
id:
"UserID"
,
fields: {
UserID: { editable:
false
, nullable:
true
},
UserFirstName: { editable:
true
, validation: { required:
true
} },
UserLastName: { editable:
true
, validation: { required:
true
} },
UserGroupID: { editable:
true
, validation: { required:
true
} },
UserLastActivityDate: { editable:
false
, type:
"date"
},
UserCreateDate: { editable:
false
, type:
"date"
}
}
}
}
});
$(
"#gridUserManage"
).kendoGrid({
dataSource: dataSource,
pageable:
true
,
height: 600,
toolbar: [
"create"
],
columns: [
{ title:
"ID"
, field:
"UserID"
, width: 40 },
{ title:
"First"
, field:
"UserFirstName"
, width: 100 },
{ title:
"Last"
, field:
"UserLastName"
, width: 100 },
{ title:
"Group"
, field:
"UserGroupID"
, width: 200,
editor:
function
(container, options) {
$(
'<input name="'
+ options.field +
'"/>'
).appendTo(container).kendoComboBox({
dataSource:
new
kendo.data.DataSource({
data: [
{ Id:
"1"
, title:
"Guest"
},
{ Id:
"2"
, title:
"Employee"
}
]
}),
dataValueField:
"Id"
,
dataTextField:
"title"
,
autobind:
false
});
}
},
{ command: [
"edit"
,
"destroy"
], title:
" "
, width:
"210px"
}],
editable: { mode:
"popup"
, confirmation:
false
},
remove:
function
(e) {
// also can we e.cancel=true here?
}
});