Update ViewModel after appending a template to div

4 posts, 0 answers
  1. Anil
    Anil avatar
    2 posts
    Member since:
    Sep 2020

    Posted 13 Sep Link to this post

    Hi,

    I am new to Kendo and running into below issue.

    I have a row with two textboxes (Phone Number & Email Address). I have a UserContactViewModel with these entries as PhNumber1 & Email1.  But I need to added additional rows on button click, so I created a template which will add the Phone NUmber and email address textbox on each click for user to provide additional information.

    Issue is every time I click, I am able to add the template but the UserContactViewModel will not reflect any new elements that I have added through Template. I can only see the first element that was loaded initially. 

     

    Can I get some help on how to update "UserContactViewModel" everytime I add a new row to the div. So that all existing options on the two textboxes applies to new textboxes that I have added through kendo UI template.

    JS:

     

    function addUserContact() {
               var template = kendo.template($("#AddUserContact").html());
             // Here I am just passing the counter or no. of clicks the user made so we need that number next to variable like Email2,
                 Email3 etc
               var data = [
                  { userCount:   no. of btn click }
                ];
               var result = kendo.render(template,data);
               $("#replicate").append(result);
             // I tried to use kendo.bind("#myviewname",userViewModel);
    }

     

     

    UserContactViewModel:

    Class UserContactViewModel {
            public users: knockoutObservableArray<any> = ko.obsevableArray([]);
            public PhNumber1: knockoutObservable<int>  = ko.observable('');
            public  Email1: knockoutObservable<string>     = ko.observable('');
            public  isBeingUpdated: knockoutObservable<boolean> = ko.observable<false);
            public  isLoading: knockoutObservable<boolean> = ko.observable<false);
            public  isEditing: knockoutObservable<boolean> = ko.observable<false);
            public  isEditEnabled: knockoutObservable<boolean> = ko.observable<false);
            public  isModified: knockoutObservable<boolean> = ko.observable<false);
     
             public  UserContactViewModelGroup: knockoutValidationError;
     
          constructor() {
     
                let self = this;
                 self.PhNumber1.extend({
                 required: { message: 'Phone Number is required', onlyIf: () => { return self.Email1 ! == '';} }
                  });
                 self.userViewModelGroup = ko.validation.group([
                          this.phNumber1,
                          this.Email1
                   ]);
              }
     
    }

     

    Thanks,

    AG

  2. Ianko
    Admin
    Ianko avatar
    1940 posts

    Posted 15 Sep Link to this post

    Hi Anil,

    I am not sure I properly understand what the case is. However, I see that you are using knockout.js for observable, which is typically not a supported approach. You should use the Kendo Observables: https://docs.telerik.com/kendo-ui/framework/mvvm/observableobject

    If you need to just append new instances of a template bound to new data you can follow this example: https://dojo.telerik.com/EwIQoYIV.  

    If, however, you require to change the data of the DOM elements, you need to change the observable objects. Thus, you will need to store them in some sort of dictionary or array.

    Regards,
    Ianko
    Progress Telerik

    Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

  3. Anil
    Anil avatar
    2 posts
    Member since:
    Sep 2020

    Posted 17 Sep in reply to Ianko Link to this post

    Hi lanko, 

    I made some progress based on the link and also lot of google as I am learning Knockout & Kendo. Below is where I got stuck. I am not getting any error but new textboxes are not getting added to view. I attached some code.

     

    jsFiddle to sample code

     

    Thanks,

    Anil

  4. Ianko
    Admin
    Ianko avatar
    1940 posts

    Posted 18 Sep Link to this post

    Hi Anil,

    With the jsfiddle sent I see JS errors regarding the KO bindings. After fixing them, I saw that the script element is passed to the template and not its HTML. This fixed the template rendering and HTML is now rendered using the kendo.render method (https://jsfiddle.net/brd6kyfq/22/). Further the valueAccessor method throws a JS error that is not defined. However, I have no clue what this method should do in this example. I believe this is some KO logic, but as knockout.js is not part of Kendo I suggest you to continue with the knockout.js documentation available on the topic. 

    As alternative I can suggest you switching to MVVM which is a Kendo product and it is supported with the Kendo Template syntax: https://docs.telerik.com/kendo-ui/framework/mvvm/overview.  

    Regards,
    Ianko
    Progress Telerik

    Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Back to Top