title: Django + JQuery - Interactive Gantt Chart
body: <p>Im working on an interactive gantt chart with django and jquery.</p>
  
  <p>I build the table like this:</p>
  
  <pre><code>&lt;div class="gantt"&gt;
  &lt;div class="gantt-labels"&gt;
      {% for item in items2 %}
      &lt;tr&gt;
      &lt;div class="gantt-labels" id="labels"&gt; &lt;/div&gt; 
      &lt;/tr&gt; 
      {% endfor %}
  &lt;/div&gt;
  &lt;div class="gantt_timeline"&gt;        
  &lt;div class="table gantt_table" id="myTable"&gt;
  &lt;thead&gt;
  &lt;div class="gantt-tr time-bar"&gt; 
      {% for item in items2 %}
      &lt;div class="gantt-td chart-values"&gt;{{ item.y|date:"D" }}&lt;/div&gt;
      {% endfor %}                                
      &lt;/div&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;      
  {% include "datamodel3.html" %}
      {% for item in items2 %}
      &lt;div class="tr gantt-tr rows" id="row{{ forloop.counter }}" &gt;
          {% for item in items2 %}
          &lt;div class="td gantt-td"&gt; &lt;/div&gt;
          {% endfor %}
      &lt;/div&gt;
      {% endfor %}
  &lt;/tbody&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The queryset "items2" holds the data for the table (amount of rows and cells in dates)</p>
  
  <p>Example:</p>
  
  <p>row1 01/01/2012</p>
  
  <p>row2 02/01/2012 </p>
  
  <p>...</p>
  
  <p>row31 31/01/2012</p>
  
  <hr>
  
  <p>datamodel3.html</p>
  
  <p>Here are the bars:</p>
  
  <pre><code>{% for item in items3 %}
  &lt;div class='bar resizable bars' style="pointer-events:visible;" id="bar{{ forloop.counter }}" data-duration="{{ item.start|date:'D' }}-{{ item.end|date:'D' }}"&gt;
  &lt;div class='resizers'&gt;
      &lt;div class='resizer top-left'&gt;&lt;/div&gt;
      &lt;div class='resizer top-right'&gt;&lt;/div&gt;
      &lt;div class='resizer bottom-left'&gt;&lt;/div&gt;
      &lt;div class='resizer bottom-right'&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  {% endfor %}
  </code></pre>
  
  <p>The queryset "items3" holds the data for the bars (name, start- and finish-date)</p>
  
  <p>Example:</p>
  
  <p>bar1 01/01/2012 10/01/2012</p>
  
  <p>bar2 08/01/2012 14/01/2012</p>
  
  <hr>
  
  <p>I use this to make the bars draggable:</p>
  
  <pre><code>(function() {
      $(".bar").draggable({
      containment: "parent"
      });
  })();
  </code></pre>
  
  <hr>
  
  <p>I use this to make the bars resizable:</p>
  
  <p><a href="https://codepen.io/ZeroX-DG/pen/vjdoYe" rel="noreferrer">https://codepen.io/ZeroX-DG/pen/vjdoYe</a></p>
  
  <hr>
  
  <p>I use this to schedule them:</p>
  
  <p><a href="https://codepen.io/tutsplus/pen/ZEzerNB" rel="noreferrer">https://codepen.io/tutsplus/pen/ZEzerNB</a></p>
  
  <hr>
  
  <p>I use this to assign a label to each row:</p>
  
  <pre><code>var iLabel = 0;
  document.querySelectorAll('#labels').forEach(function (element, index) {
  element.innerHTML = iLabel &lt; labels.length ?
  labels[iLabel] :
  '';
  iLabel++;
  })
  </code></pre>
  
  <hr>
  
  <p>So far, the bars have the right length (start and finish date), are draggable and resizable.</p>
  
  <p>The only thing for now is to append each bar to its row (first bar to first row and so on....)</p>
  
  <p>I tried different ways, but ended up assigning each row and bar an ID and attaching them to one another:</p>
  
  <pre><code>$(document).ready(function(){
  newfunction();
  });
  
  function newfunction(){
      var thisrows = $("#row1");
      var thisbars = $("#bar1");
      /* var fragment = document.createDocumentFragment(); fragment.appendChild(thisbars); */
  $(thisrows).html(thisbars);
  }
  </code></pre>
  
  <p>When I try to use fragments, I get: TypeError: Argument 1 ('node') to Node.appendChild must be an instance of Node.</p>
  
  <p>Now, instead of hard-coding every id, I tried to do something like this:</p>
  
  <pre><code>function newfunction(){
  var n = 0;
  var e = 0;
  $(".rows").each(function(){
  var thisrows = $(this).attr("id") + n;
  n++;
  });
  $(".bars").each(function(){
  var thisbars = $(this).attr("id") + e;
  var fragment = document.createDocumentFragment();
  fragment.appendChild(thisbars);
  e++;
  });
  $(thisrows).appendChild(fragment);
  };
  </code></pre>
  
  <p>Which doesnt work, even without using fragments. Any suggestions?</p>
  
  <hr>
  
  <p>Also, I want to save the new position and length of the bar when I move/resize it.</p>
  
  <p>What would be the best approach to do this? </p>
  
  <p>Thank you in advance</p>
  
  <p>Here is my first post about this with an image of the table:</p>
  
  <p><a href="https://stackoverflow.com/questions/58747926/django-jquery-append-bars-to-table-rows">Django + JQuery - Append bars to table rows</a></p>