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.
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
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