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

Add or Remove Grid

0 Answers 161 Views

Grid

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

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

Add or Remove Grid

No answers yet. Maybe you can help?