Update ViewModel after appending a template to div

[Anil]

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

[Ianko]

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

[Anil]

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

[Ianko]

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