I created a grid using kendo grid that looks like that
I also use a "SelfAssesmentEditor" Template that looks like that
01.
<div>
02.
@(Html.Kendo().Grid<MvcApplication2.Areas.Admin.Models.SelfAssessmentModel>()
03.
.Name(
"grid"
)
04.
.Columns(columns =>
05.
{
06.
columns.Bound(c => c.QuestionSortOrder).Width(40);
07.
columns.Bound(c => c.ModuleName).Width(100);
08.
columns.Bound(c => c.QuestionText).Width(300); ;
09.
columns.Bound(c => c.QuestionGraded).Template(@<text>@((
bool
)item.QuestionGraded?
"Yes"
:
"No"
)</text>).ClientTemplate(@
"#=QuestionGraded ? 'Yes' : 'No' #"
); ;
10.
columns.Bound(c => c.QuestionAnswerTypeName);
11.
columns.Bound(c => c.PartName);
12.
columns.Command(cmd => cmd.Edit());
13.
14.
})
15.
.DataSource(dataSource => dataSource
16.
.Ajax()
17.
.PageSize(20)
18.
.Model(model =>{ model.Id(m => m.QuestionID);})
19.
.Read(read => read.Action(
"Editing_ReadSelf"
,
"SelfAssesmentAdmin"
,
new
{id =1}))
20.
.Update(up => up.Action(
"Editing_UpdateSelf"
,
"SelfAssesmentAdmin"
))
21.
)
22.
.Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName(
"SelfAssesmentEditor"
).Window( w => w.Width(700)))
23.
.Pageable()
24.
.Sortable()
25.
)
26.
</div>
I also use a "SelfAssesmentEditor" Template that looks like that
01.
@model MvcApplication2.Areas.Admin.Models.SelfAssessmentModel
02.
@{
03.
Layout =
null
;
04.
}
05.
<style>
06.
.selftable
07.
{
08.
margin-left:40px;
09.
width:600px;
10.
}
11.
.selftable, td
12.
{
13.
height:70px;
14.
}
15.
#QuestionText
16.
{ width:300px;
17.
height:100px;
18.
}
19.
</style>
20.
21.
<table
class
=
"selftable"
>
22.
<tr>
23.
<td>Question Sort Order</td>
24.
<td>@Html.TextBoxFor(model=>model.QuestionSortOrder)</td>
25.
</tr>
26.
<tr>
27.
<td>Question</td>
28.
<td>@Html.TextAreaFor(model=>model.QuestionText)<br /></td>
29.
</tr>
30.
<tr>
31.
<td>Question Graded</td>
32.
<td valign=
"center"
> <label>@Html.RadioButtonFor(model =>model.QuestionGraded ,
"true"
) Yes</label>
33.
<label>@Html.RadioButtonFor(model => model.QuestionGraded,
"false"
) No</label></td>
34.
</tr>
35.
<tr>
36.
<td>Number of Correct Responses</td>
37.
<td>@Html.TextBoxFor(model=>model.NumberOfCorrectResponses)</td>
38.
</tr>
39.
<tr>
40.
<td>Part</td>
41.
<td>@Html.DropDownListFor(x =>x.PartID, (SelectList)ViewBag.Partlist)</td>
42.
</tr>
43.
<tr>
44.
<td>Question Answe Type</td>
45.
<td>@Html.DropDownListFor(x =>x.QuestionAnswerTypeID, (SelectList)ViewBag.QuestionAnswerTypelist)</td>
46.
</tr>
47.
</table>
I am now trying to inset a kendo MVVM inside my template but it not working, it does works on the same page as grid just not on the same page editor template here is my MVVM
01.
<div id=
"peopleList"
>
02.
<div id=
"commands"
>
03.
<button data-bind=
"click: add"
class
=
"k-button"
>Add</button>
04.
</div>
05.
06.
<table>
07.
<thead>
08.
<tr>
09.
<th>First Name</th>
10.
<th>Last Name</th>
11.
<th>Full Name</th>
12.
<th></th>
13.
</tr>
14.
</thead>
15.
<tbody data-bind=
"source: people"
data-template=
"personTemplate"
>
16.
</tbody>
17.
</table>
18.
</div>
19.
20.
<script type=
"text/x-kendo-template"
id=
"personTemplate"
>
21.
<tr>
22.
<td><input data-bind=
"value: firstName"
/></td>
23.
<td><input data-bind=
"value: lastName"
/></td>
24.
<td><span data-bind=
"text: fullName"
/></td>
25.
<td><button
class
=
"k-button"
data-bind=
"click: delete"
>X</button></td>
26.
</tr>
27.
</script>
28.
29.
<script type=
"text/javascript"
>
30.
31.
// Define a Person model.
32.
var Person = kendo.data.Model.define({
33.
fields: {
34.
"firstName"
: {
35.
type:
"string"
36.
},
37.
"lastName"
: {
38.
type:
"string"
39.
}
40.
},
41.
42.
// Define a function for fullName to get the firstName and lastName
43.
// and concatenate them together.
44.
fullName: function () {
45.
return
this
.
get
(
"firstName"
) +
" "
+
this
.
get
(
"lastName"
);
46.
}
47.
});
48.
49.
// Create an observable object with an obserable array where each item
50.
// in the array is an instance of a Person model.
51.
var vm = kendo.observable({
52.
people: [
53.
new
Person({
54.
firstName:
""
,
55.
lastName:
""
56.
})
57.
],
58.
59.
// Add a new person to the array.
60.
add: function () {
61.
this
.people.push(
new
Person());
62.
},
63.
64.
// Delete the person from the array.
65.
delete: function (e) {
66.
var that =
this
;
67.
$.each(that.people, function (idx, person) {
68.
if
(e.data.uid === person.uid) {
69.
that.people.splice(idx, 1);
70.
return
true
;
71.
}
72.
});
73.
}
74.
});
75.
76.
kendo.bind($(
"#peopleList"
), vm);
77.
</script>
Can Anyone please help me on how to run kendo MVVM from the editor template of the grid.
Thank you.