problem with templating and MVVM

4 posts, 0 answers
  1. daljit
    daljit avatar
    2 posts
    Member since:
    Aug 2012

    Posted 09 Aug 2012 Link to this post

    Hi,

    Urgent Please,
     I am evaluating Kendo UI for my company, so please answer it, very urgent please thanks.
    Following is the simple example of my problem. I get json data using REST services.
    Following is the summary for the problem -
    After i ran sample, program display three text boxes, without any value and on editing value, I get the following error in the browser console window -
    Uncaught TypeError: Cannot set property 'Name' of undefined 

    Following is sample code

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script type = "text/javascript">
            // this is the structure of the data comes from server
            function Employee(Name, Age)
            {
                this.Name = Name;
                this.Age = Age;
            }
            $(document).ready(function ()
            {
                var em1 = new Employee("Daljit", 23);
                var em2 = new Employee("Manjit", 20);
                var em3 = new Employee("Joga", 25);
                var Department =
                {
                    Name: "Question Name",
                    Employees: new Array(em1, em2, em3)
                };
                var departmentVM = kendo.observable
    					(
    	                	Department
    	                );
                var templateContent = $("#myTemplate").html();
                var template = kendo.template(templateContent);
                $("#daljitControls").append(template(departmentVM.Employees));
                kendo.bind($("#daljitControls"), departmentVM);
            });        
        </script>
        </head>
    <body>
        <div id = "daljitControls"> 
                <input type="text" data-bind="value:Name" class="k-textbox" name="Name" /> 
        </div>
        <script type="text/x-kendo-template" id="myTemplate">
               # for (var i = 0; i < data.length; i++) { #
                    # var employee = data[i]; #
                     <input data-bind="value: employee.Name" class="k-textbox"/> 
               # } # 
               </script>
    </body>
    </html>
    

    Thanks,
  2. daljit
    daljit avatar
    2 posts
    Member since:
    Aug 2012

    Posted 10 Aug 2012 Link to this post

    can any one please answer this question or atleast put me in some direction.

    Thanks
  3. Kendo UI is VS 2017 Ready
  4. Rich
    Rich avatar
    65 posts
    Member since:
    Jul 2012

    Posted 27 Aug 2012 Link to this post

    wouldn't be something like:

    <script type="text/x-kendo-template" id="myTemplate">
               # for (var i = 0; i < data.Employees.length; i++) { #
                    # var employee = data.Employees[i]; #
                     <input data-bind="value: employee.Name" class="k-textbox"/> 
               # } # 
               </script>
  5. Jeremy Wiebe
    Jeremy Wiebe avatar
    11 posts
    Member since:
    Jun 2012

    Posted 19 Sep 2012 Link to this post

    You are going about this in a much more difficult way than you need to. 

    Check out this jsFiddle:  http://jsfiddle.net/jeremy_wiebe/bJPST/ 

    Also, check out this documentation page on the 'source' and 'template' bindings: http://demos.kendoui.com/web/mvvm/source.html 
Back to Top
Kendo UI is VS 2017 Ready