title: Editable Table - Row Expander - Javascript / OJET
body: <p>I'm trying to implement an editable table with row expander in JS and OJET elements. I'm using knockout.js and I have an uncaught error :</p>
  
  <blockquote>
    <p>"Uncaught Error: You cannot apply bindings multiple times to the same element."</p>
  </blockquote>
  
  <p>I did not understand this error and where I'm mistaking. </p>
  
  <p>Here are my JS and HTML file :</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>          function TreeTableContentViewModel() {
                  var self = this;
                  var newJson = [];
                  //var file  = jQuery.getJSON(file);
                  var options= [];
                  self.datasource = ko.observable();
  
                  
  
                  //// EDITABLE
                  self.rowRenderer = function(context)
                  {
                      var mode = context['rowContext']['mode'];        
                      if (mode === 'edit') {
                          return oj.KnockoutTemplateUtils.getRenderer('row_template_editable', true)(context);
                      }
                      else if (mode === 'navigation')
                      {
                          return oj.KnockoutTemplateUtils.getRenderer('row_template', true)(context);
                      }
                  };
  
                  self.beforeRowEditEndListener = function(event)
                  {
                      var data = event.detail;
                      var rowIdx = data.rowContext.status.rowIndex;
                      self.datasource().at(rowIdx).then(function(rowObj)
                      {
                          $('#rowDataDump').val(JSON.stringify(rowObj['data']));  
                      });
                      return oj.DataCollectionEditUtils.basicHandleRowEditEnd(event, data);
                  }
  
                  ////////
  
  
                  $.getJSON("https://api.********",
                          function (data)
                          {
                              var treeData = [];
                              createSubLines(data, treeData);
                              sumTab(treeData, "nbPieces");
                              sumTab(treeData, "nbEmballages");
                              sumRan(treeData);
                              sumCommandes(treeData);
  
                              self.datasource(new oj.FlattenedTreeTableDataSource(new oj.FlattenedTreeDataSource(new oj.JsonTreeDataSource(treeData), options)));
                          }
                  );
  
  
              }
  
  
              $(
                  function() 
                  {
                      var vm = new TreeTableContentViewModel();
                      ko.applyBindings(vm, document.getElementById('table'));
                  }
              )</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="treetable"&gt;
    &lt;oj-table id="table" aria-label="Tasks Table" data="[[datasource]]" 
    row-renderer='[[oj.KnockoutTemplateUtils.getRenderer("row_template", true)]]'
    edit-mode='rowEdit'
    on-oj-before-row-edit-end="[[beforeRowEditEndListener]]"
      dnd='{"reorder": {"columns": "enabled"}}' scroll-policy='loadMoreOnScroll' 
      scroll-policy-options='{"fetchSize": 10}' selection-mode='{"row": "multiple", "column": "multiple"}'
      
      columns='[{"headerText": "ID Lieu Origine", "sortProperty": "idLieuOrigine","resizable": "enabled"},
                      {"headerText": "ID Lieu Destination", "sortProperty": "idLieuDestination","resizable": "enabled"},
                      {"headerText": "Date/Heure de mise à disposition", "sortProperty": "dateHeureDisposition","resizable": "enabled"},
                      {"headerText": "ID de la commande", "sortProperty": "idCommande","resizable": "enabled"},
                      {"headerText": "Article Reference", "sortProperty": "articleReference","resizable": "enabled"},
                      {"headerText": "Article (reference externe)", "sortProperty": "articleReferenceExterne","resizable": "enabled"},
                      {"headerText": "RAN", "sortProperty": "ran","resizable": "enabled"},
                      {"headerText": "Nombre Pièces", "sortProperty": "nombreDePiCes","resizable": "enabled"},
                      {"headerText": "Nombre Emballages", "sortProperty": "nbEmballages","resizable": "enabled"},
                      {"headerText": "Code UC/UM", "sortProperty": "codeUCUCM","resizable": "enabled"},
                      {"headerText": "Code UM", "sortProperty": "codeUM","resizable": "enabled"}]' style='width: 95%; height: 300px;'&gt;
    &lt;/oj-table&gt;
  &lt;/div&gt;
  &lt;textarea id="rowDataDump" style="height: 200px; width: 300px; box-sizing: border-box;"&gt;&lt;/textarea&gt;
  
  &lt;script type="text/html" id="row_template"&gt;
              &lt;tr&gt;
                &lt;td&gt;
                  &lt;oj-row-expander context="[[$context.rowContext]]"&gt;&lt;/oj-row-expander&gt;
                  &lt;span data-bind="text: idLieuOrigine"&gt;&lt;/span&gt;
                &lt;/td&gt;
                
                 &lt;td&gt;
                  &lt;span data-bind="text: nbEmballages"&gt;&lt;/span&gt;
                &lt;/td&gt;
                 &lt;td&gt;
                  &lt;span data-bind="text: codeUCUCM"&gt;&lt;/span&gt;
                &lt;/td&gt;
                 &lt;td&gt;
                  &lt;span data-bind="text: codeUM"&gt;&lt;/span&gt;
                &lt;/td&gt;
                
                
              &lt;/tr&gt;
          &lt;/script&gt;
          &lt;script type="text/html" id="row_template_editable"&gt;
            &lt;tr&gt;
              &lt;td&gt;
                &lt;oj-row-expander context="[[$context.rowContext]]"&gt;&lt;/oj-row-expander&gt;
                &lt;span data-bind="text: idLieuOrigine"&gt;&lt;/span&gt;
              &lt;/td&gt;
             
               &lt;td&gt;
                &lt;span data-bind="text: codeUCUCM"&gt;&lt;/span&gt;
              &lt;/td&gt;
               &lt;td&gt;
                &lt;span data-bind="text: codeUM"&gt;&lt;/span&gt;
              &lt;/td&gt;
              
              
            &lt;/tr&gt;
        &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Thank you for your help!</p>