Geting the view Template from the grid to work with kendo MVVM

[lauren]

I created a grid using kendo grid 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. 

[Alexander Popov]

Hello lauren,

Similar behavior could be achieved by using the Grid's edit event handler to call the kendo.bind method.

Regards,
Alexander Popov
Telerik

 

 

[lauren]

Can you please show an example I was looking for a similar answer and the link you send and it seems to have predefined solution in grid, But i want that situation to be independent from the grid. And it simply not working, and that link does not seems to help. 

[Alexander Popov]

Hi lauren,

I apologize for misleading you with my previous reply. I reviewed the provided code snippets again and noticed that the MVVM bindings do not match the Grid's fields. The Grid automatically calls the kendo.bind method once the popup editor is opened, so an error will occur, because the source binding is pointing to an undefined variable. Using MVVM to bind elements to data different from the Grid's item is not supported and would require the HTML to be injected to the popup container after the default binding has finished. This also could be done in the Grid's edit event handler, although I doubt if it has the benefits you expect to get otherwise. For example: 

<div id="peopleList">
    <table>
    <thead>
        <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Full Name</th>
            <th></th>
        </tr>
    </thead>
    @*<tbody data-bind="source: people" data-template="personTemplate"></tbody>*@
    <tbody > </tbody>
    </table>
</div>

...
//Grid's edit event handler:
<script>
    function onEdit(e) {
        var t = e.container.find("tbody");
        t.attr("data-bind", "source: people");
        t.attr("data-template", "personTemplate");
        var vm = kendo.observable({
            people: [
                {firstName: "John", lastName: "Doe"}
            ]
        });
        kendo.bind(e.container, vm);
    }
</script>

I also noticed that there are line comments, however templates are rendered on a single line, so I would suggest replacing all line comments with multi-line, for example: 

//replace this
/*with this*/

Regards,
Alexander Popov
Telerik