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

Add or Remove Grid

0 Answers 61 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Christian
Top achievements
Rank 1
Christian asked on 27 Sep 2012, 02:03 AM
Hi,
I'm trying to recreate the grid on this page every 30 seconds or so. What i do empty the div "grid-users" and do a call to the server. It returns me a JSON with the reconstructed table (but with updated rows), so I put it back inside the div.

The table shows find, but in the same setInterval block, once the table is back in the div, I try to make the grid and its controls on Kendo.

{% extends "saloons/templates/base.html" %}
{% from "ui/forms/macro.html" import wtform %}
{% block content %}
        <form id="form1" method="POST" action="">
      <br/><br/>
      <div id="total" align="right">Total de pedidos en soles: S/.<div id="num" style="display:inline"></div></div>
      <div id="fecha" align="left">Fecha: <input type="text" id="search_date" name="search_date" />
      <button  id="filter" name="filter" type="submit">Filtrar</button>
      </div>
      <br/><br/><br/><br/>
          <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="requester" style="text-align: center">Solicitante</th>
                        <th data-field="client" style="text-align: center">Cliente</th>
                        <th data-field="price" style="text-align: center">Precio</th>
            <th data-field="date" style="text-align: center">Fecha del Pedido</th>
                        <th data-field="status" style="text-align: center">Estado</th>
                        <th data-field="save" style="text-align: center">Guardar Estado</th>
                    </tr>
                </thead>
                <tbody id="pedidos">
                    {% for i in orders %}
                    <tr id="{{ i.id }}">
                    <td>{{loop.index}}</td>
                    <td>{{ i.ItemName }}</td>
                    <td>{{i.user()}}</td>
                    <td>{{i.tab.user}}</td>
                    {% if i.isInventory %}
                        <td>S/. {{ i.ItemPrice }}</td>
                    {% else %}
                        <td><input type="text" id="price{{ i.id }}" value="{{ i.ItemPrice }}"/></td>
                    {% endif %}
            <td>{{ i.dateOrder }}</td>
                    <td>
                        <select id="cmb{{ i.id }}">
                            <option value="PENDIENTE" selected="true">PENDIENTE</option>
                            <option value="ATENDIDO">ATENDIDO</option>
                            <option value="DENEGADO">DENEGADO</option>
                        </select>
                    </td>
                    <td><a href="#" id="{{ i.id }}" rel="save">Grabar</a></td>
                    </tr>
                    {% endfor %}  
                </tbody>
              
            </table>
          </div>
        </form>
        <script>           
            $(function() {               
               $("a[rel=save]").live('click', function() {
                    var id = $(this).attr('id');
                     
                    var p = $(this).parent().parent().find("td:eq(4)").html();
                    var p2 = p.substring(4, p.length);
                    var p3 = parseFloat(p2);
                     
                    if (isNaN(p3) == true)
                    {
                        p3 = $("#price"+id).val();
                    }
                    var a = $("#cmb"+id).val();
            if (a == 'PENDIENTE')
            {
              alert('Debe cambiar el estado del pedido');
            }
            else
            {
              var res = confirm("Está seguro de este cambio de estado?");
              if (res){
              $.post("check_order",{status : a, cod : id, price : p3, flag : true}, function(data) {
                var d = JSON.parse(data);
                if (!d.cancel){
                $("#cmb"+id).parent().parent().parent().remove();
                $("#pedidos tr").each(function(i, v){                           
                    if (i+1 > 0) {
                    $(this).find("td:first").html(i+1);
                    }
                   });
                $("#num").text(d.total);
                }
                else{
                  alert("El pedido que trata de actualizar ha sido cancelado. Refrescando pagina...");
                  parent.location.href = parent.location.href;
                }
              });
              }
            }
                    return false;
               });
               
 
          $("#fecha").attr('class', 'k-header');
          $("#fecha").css({'width' : '290px',
                  'float' : 'left'});
           
          var f = new Date("{{ f }}");
           
          $("#search_date").kendoDatePicker({
             value: new Date(f),
                     format: "dd/MM/yyyy",
                     name: "search_date"
        });
           
          $("#search_date").attr('readonly', 'readonly');
              $("#grid").kendoGrid({
          height: 460,
          sortable: false,
          columns: [{field:"number", width:40},
                {field:"item", width:80},
                            {field:"requester", width:80},
                            {field:"client", width:80},
                            {field:"price", width:100},
                {field:"date", width:100},
                {field:"status", width:120},
                            {field:"save", width:80}]
 
          });
               
              var arr = [];
              $('a[rel=save]').each(function(){
                   arr.push($(this).attr('id'));
               });
               
              for(i =0; i<arr.length;i++)
              {
                 $("#pedidos tr")
                    .find("td:eq(4)")
                    .children("#price" + arr[i])
                    .kendoNumericTextBox({
                        min:0,
                        max:150,
                        decimals:2,
                        upArrowText:"Aumentar",
                        downArrowText:"Disminuir",
                        format: "c"
                    });
              }
              
         $("#total").css({'border-style' : 'solid',
                 'border-width': '3px',
                 'padding' : '10px',
                 'width' : '300px',
                 'float' : 'right',
                 'font-size' : '16px',
                 'font-weight' : 'bold'});
         $("#num").text("{{ total_orders }}");
         $("#total").attr('class', 'k-header');
              //FIXME: El combo en KendoUI debe integrar las opciones originales del combo
              $("#pedidos tr").each(function(i,v) {
                   $(this).find("td:eq(6)").children("select").kendoDropDownList();
                });
           
          setInterval(function(){
        $("#grid-users").empty();
        $.getJSON("/cafe/uco", function(json){
            $("#grid-users").html(json.ord);
          });
           
          console.log($("#grid"));
              $("#grid").kendoGrid({
          height: 460,
          sortable: false,
          columns: [{field:"number", width:40},
                {field:"item", width:80},
                            {field:"requester", width:80},
                            {field:"client", width:80},
                            {field:"price", width:100},
                {field:"date", width:100},
                {field:"status", width:120},
                            {field:"save", width:80}]
 
          });
           
              var arr2 = [];
              $('a[rel=save]').each(function(){
                   arr2.push($(this).attr('id'));
               });
               
              for(i =0; i<arr2.length;i++)
              {
                 $("#pedidos tr")
                    .find("td:eq(4)")
                    .children("#price" + arr[i])
                    .kendoNumericTextBox({
                        min:0,
                        max:150,
                        decimals:2,
                        upArrowText:"Aumentar",
                        downArrowText:"Disminuir",
                        format: "c"
                    });
              }
           
              $("#pedidos tr").each(function(i,v) {
                   $(this).find("td:eq(6)").children("select").kendoDropDownList();
              });
           
          },10000);
            });
        </script>
{% endblock %}

For some reason, the grid and the controls don't get to Kendo once the table is reconstructed. Can someone tell me why? Am I doing something wrong? =S

No answers yet. Maybe you can help?

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