This is a migrated thread and some comments may be shown as answers.

Duplicating controls

0 Answers 163 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Christian
Top achievements
Rank 1
Christian asked on 25 Sep 2012, 04:40 AM
HI,
I made an interface with some controls, from Kendo. It's a number, textbox and dropdownlist. What it does it's create many copies of itself by the press of the "+" button and delete a row by the press of it's "-" button.

Here's the code:
{% extends "saloons/templates/base.html" %}
{% from "ui/forms/macro.html" import wtform %}
{% block content %}
  <form method="POST" action="">
    <table>
        <tr>
            <td>{{ form.order_date.label }}</td>
            <td>{{ form.order_date }}</td>
        </tr>
    </table>
  <div id="grid-users"  class="grid-content" style="text-align: center; width: 100%!important">
      <table id="grid">
    <thead>
      <tr>
        <th data-field="number" style="text-align: center">Nro.</th>
        <th data-field="item" style="text-align: center">Articulo</th>
        <th data-field="staff" style="text-align: center">Usuario</th>
        <th data-field="button" style="text-align: center">AƱadir/Remover</th>
      </tr>
    </thead>
    <tbody id="pedidos">
      <tr>
        <td>1.</td>
        <td>{{ form.item }}</td>
        <td>{{ form.staff }}</td>
        <td><button type="button" id="add_textbox">+</button></td>
      </tr>
    </tbody>
      </table>
      <center>
     <div class="buttons">{{ form.save }}</div>
      </center>
  </div>
  </form>
<script type="text/javascript">
    $(function() {
        $("#save").attr('class','k-button');
        $("#c0").attr('class', 'k-input');
        var sel = $("#t0").clone();
        var sel2 = $("#c0").clone();
        var i = 1;
        var data = "{{ inventory }}".replace("[", "").replace("]", "");
                var a = data.split(",");
                for(j=0;j<a.length;j++)
                {
                  if(j == 0){
                   a[j] = a[j].substring(2,a[j].length -1);
                  }
                  else
                  {
                    a[j] = a[j].substring(3,a[j].length -1);
                  }
                }
        $("#add_textbox").attr('class', 'k-button');
        $("#add_textbox").live('click', function() {               
            i++;
            $("#pedidos").append('<tr>' +
                        '<td>'+ i +'. </td>' +
            '<td id="c'+ i +'"></td>' +
            '<td id="t'+ i +'"></td>' +
            '<td><button type="button" rel="del" class="k-button">-</button></td>' +
            '</tr>');
            $(sel2).attr('id',"tc"+i);
            $(sel).attr('id',"ts"+i);
            $(sel2).appendTo("#c"+i);
            $(sel).appendTo("#t"+i);
            $("#tc"+i).css('width', 180);
            $("#tc"+i).kendoAutoComplete({
                   dataSource: a
                        });
            sel = $(sel).clone();
            sel2 = $(sel2).clone();
            $("#ts"+i).css('width', 270);
            $("#ts"+i).kendoDropDownList();
        });
                 
                $("button[rel=del]").live('click', function() {
                   $(this).parent().parent().remove();
                   i--;
                    
                   var a2 = 0;
                   $("#pedidos tr").each(function(i){
                      a2++;
                      $(this).find("td:first").html(a2);                     
                   });                  
        });
                 
                 
     
        $("#order_date").kendoDatePicker({
             min: new Date(),
             value: new Date(),
                     format: "dd/MM/yyyy"
          });
        $("#order_date").attr('disabled','disabled');
         
        $("#grid").kendoGrid({
          height: 460,
          sortable: false,
          columns: [{field:"number", width:40},
                {field:"item", width:40},
                {field:"staff", width:80, editor: function(container, options){
                  }},
                {field:"button", width:40}]
 
          });
        $("#t0").css('width', 270);
        $("#t0").kendoDropDownList();
         
        $("#c0").css('width', 180);
        $("#c0").kendoAutoComplete({
                    dataSource: a
                });
        });
</script>
{% endblock %}

Happens that at some point when you start deleting rows, some dropdowns and textboxes are assigned to the wrong rows. At first I thought that it was because some ids didn't match when making the recount in the minus button, but I already tried that.

Can you help on this one, please?

No answers yet. Maybe you can help?

Tags
Grid
Asked by
Christian
Top achievements
Rank 1
Share this question
or