This is a migrated thread and some comments may be shown as answers.

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

3 Answers 65 Views
Grid
This is a migrated thread and some comments may be shown as answers.
lauren
Top achievements
Rank 1
lauren asked on 21 Jul 2014, 03:58 PM
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. 





3 Answers, 1 is accepted

Sort by
0
Alexander Popov
Telerik team
answered on 23 Jul 2014, 12:33 PM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
lauren
Top achievements
Rank 1
answered on 24 Jul 2014, 04:16 PM
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. 
0
Alexander Popov
Telerik team
answered on 28 Jul 2014, 09:46 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Grid
Asked by
lauren
Top achievements
Rank 1
Answers by
Alexander Popov
Telerik team
lauren
Top achievements
Rank 1
Share this question
or