javascript - KendoSparklines inside table rows, where rows are added dynamically -

i have table rows added dynamically. 1 of cells in each row includes kendosparkline chart. every time new row added, charts in previous rows disappear , must redrawn. each row has knockout click binding sets context of configuration panel in right (see attached image) current viewmodel representing row. after inserting row can click on each row missing chart , click calculate , chart appear.

anyone can explain me behavior?

how can make sure when adding new row, charts in existing rows still there? traversing viewmodels in $.each() loop , calling refresh() on each chart, elegant solution?

i ended adding $.each() loop mentioned in question, function takes care of adding new rows in main viewmodel. loop through observablearry() of row viewmodels , call calculate function (except 1 added). works fine, , knew that. wanted avoid looping through array every time 1 adds new row table. here code:

    var rowvm = function () {       var self = this;        // data       ...       // state       ...       // operations      ...      self.calculate = function () {        // logic      }      }      var mainvm = function () {         var.self = this;         ...         // data         self.rowvms = ko.observablearray([]);          // operations         ...         self.addrow() {           var row = new rowvm();           self.rowvms.push(row);           self.setcurrentrow(row);            $.each(self.rowvms, function(index, vm) {             if(vm.bulletchart) // 1 added ignored                vm.calculate();           });         }          self.setcurrentrow(current) {           // update currentrow observable obj           // draw config. panel           ...         }      }