0

我使用剑道网格创建了一个网格，看起来像这样

  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>

我还使用了一个看起来像这样的“SelfAssesmentEditor”模板

   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>

我现在正试图在我的模板中插入一个剑道 MVVM，但它不起作用，它确实与网格在同一页面上工作，只是不在同一页面编辑器模板上这是我的 MVVM

.<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>

任何人都可以帮助我了解如何从网格的编辑器模板运行 kendo MVVM。

谢谢你。

4

0 回答 0