jQuery UI Widgets › Forums › Grid › Nested Grid
Tagged: angular grid, grid, jquery grid, jqxgrid, nested grids, parameter, refresh, source, url
This topic contains 2 replies, has 2 voices, and was last updated by lisandro.boas 9 years, 1 month ago.
-
AuthorNested Grid Posts
-
Hi!
I’m trying to implement a nested grid , I’m using two json objects from webservices to get the data. When i load the page for fist time everything works great, but when I try to refresh the grids whith a new requisition from web services the page FROZES , I’m usin chrome but when I use firefox the page frozens for some seconds then the results are load fine.
thats my code:
<!DOCTYPE html>
<html lang=”en”>
<head>
<title id=’Description’>Clientes Preferenciais</title>
<link rel=”stylesheet” href=”../resources/css/jqx.base.css” type=”text/css” />
<meta charset=”utf-8″>
<script type=”text/javascript” src=”../resources/scripts/jquery-1.11.1.min.js”></script>
<link rel=”stylesheet” href=”../resources/css/jqx.office.css” type=”text/css” />
<script type=”text/javascript” src=”../jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”../jqwidgets/jqxbuttons.js”></script>
<script type=”text/javascript” src=”../jqwidgets/jqxscrollbar.js”></script>
<script type=”text/javascript” src=”../jqwidgets/jqxmenu.js”></script>
<script type=”text/javascript” src=”../jqwidgets/jqxcheckbox.js”></script>
<script type=”text/javascript” src=”../jqwidgets/jqxgrid.js”></script>
<script type=”text/javascript” src=”../jqwidgets/jqxgrid.selection.js”></script>
<script type=”text/javascript” src=”../jqwidgets/jqxgrid.columnsresize.js”></script>
<script type=”text/javascript” src=”../jqwidgets/jqxdata.js”></script>
<script type=”text/javascript” src=”../jqwidgets/jqxdata.export.js”></script>
<script type=”text/javascript” src=”../jqwidgets/jqxgrid.export.js”></script>
<script type=”text/javascript” src=”../jqwidgets/jqxgrid.sort.js”></script>
<script type=”text/javascript” src=”../jqwidgets/jqxgrid.edit.js”></script>
<script type=”text/javascript” src=”../jqwidgets/jqxgrid.grouping.js”></script>
<script type=”text/javascript” src=”../jqwidgets/jqxgrid.aggregates.js”></script>
<script type=”text/javascript” src=”../jqwidgets/jqxlistbox.js”></script>
<script type=”text/javascript” src=”../jqwidgets/jqxdropdownlist.js”></script>
<script type=”text/javascript” src=”../jqwidgets/jqxdatetimeinput.js”></script>
<script type=”text/javascript” src=”../jqwidgets/jqxcalendar.js”></script>
<script type=”text/javascript” src=”../jqwidgets/jqxgrid.columnsresize.js”></script>
<script type=”text/javascript” src=”../jqwidgets/jqxgrid.filter.js”></script>
<script type=”text/javascript” src=”../jqwidgets/jqxpanel.js”></script>
<script type=”text/javascript” src=”../jqwidgets/jqxgrid.pager.js”></script>
<script type=”text/javascript” src=”../jqwidgets/jqxbuttons.js”></script>
<script type=”text/javascript” src=”../jqwidgets/jqxwindow.js”></script>
<script type=”text/javascript” src=”../jqwidgets/jqxinput.js”></script>
<script src=”../jqwidgets/jqxresponse.js”></script>
<script type=”text/javascript” src=”../resources/scripts/demos.js”></script><script type=”text/javascript”>
var theme = ‘office’;var urlClientes = “var containing some url”;
var urlVisitas = “var containing some url”;function onLoad() {
getClientes(“3”);
$(“#search”).jqxButton({width: ‘100’, height: ’25’, theme: ‘office’});
//ToolTip no inputtext
$(“#filial”).jqxInput({placeHolder: “Filial:”, width: ‘150’, height: ’23’, maxLength: 3, theme: ‘office’});
//ao teclar enter no inputtext”filial” dispara evento que efetua click no botão “search”$(“#filial”).on(‘keyup’, function (event) {
if (event.which == ’13’) {
$(“#search”).click();
}
});
}
function getFilial() {
var filial = document.getElementById(“filial”).value;
if (filial === “”) {
alert(“Informe o número de uma filial para efetuar a busca!”);
} else if (filial === “999”) {
$(“#filial”).val(“”);
var filial2 = “”;
getClientes(filial2);
} else {
$(“#filial”).val(“”);
getClientes(filial);
}}
function getClientes(filial) {
var sourceClientes =
{
datatype: “json”,
datafields: [
{name: ‘id’, type: ‘number’}, // id
{name: ‘id_cliente’, type: ‘string’}, // id_cliente
{name: ‘nome_cliente’, type: ‘string’}, // nome_cliente
{name: ‘data_ultima_visita’, type: ‘date’, format: ‘dd/MM/yy’}, // nome_cliente
{name: ‘cpf’, type: ‘string’}, // cpf
{name: ‘filial_cliente’, type: ‘string’}, // filial_cliente
{name: ‘conta’, type: ‘string’}, // conta
{name: ‘ddd_telefone’, type: ‘string’}, // ddd_telefone
{name: ‘telefone’, type: ‘string’}, // telefone
{name: ‘ddd_celular’, type: ‘string’}, // ddd_celular
{name: ‘celular’, type: ‘string’}, // celular
{name: ‘limite’, type: ‘number’}, // limite
{name: ‘vendedor_ult_compra’, type: ‘string’}, // vendedor_ult_compra
{name: ‘data_ult_compra’, type: ‘date’, format: ‘dd/MM/yy’}, // data_ult_compra
{name: ‘cidade’, type: ‘string’}, // cidade
{name: ‘estado’, type: ‘string’}, // estado
{name: ‘bairro’, type: ‘string’}, // bairro
{name: ‘logradouro’, type: ‘string’}, // logradouro
{name: ‘numero’, type: ‘number’}, // numero
{name: ‘potencial_compra’, type: ‘string’}, // potencial_compra
{name: ‘fase_obra’, type: ‘string’}, // fase_obra
{name: ‘distancia_loja’, type: ‘string’}, // distancia_loja
{name: ‘vendedor_favorito’, type: ‘string’}, // vendedor_favorito
{name: ’email’, type: ‘string’}, // email
{name: ‘data_ult_atualizacao’, type: ‘date’, format: ‘dd/MM/yy’}, // data_ult_atualizacao
{name: ‘favorito_desde’, type: ‘date’, format: ‘dd/MM/yy’}, // favorito_desde
{name: ‘agenda_visita’, type: ‘date’, format: ‘dd/MM/yy’}, // agenda_visita
{name: ‘segmento_mercantil’, type: ‘string’}, // segmento_mercantil
{name: ‘cliente_preferencial’, type: ‘string’} // cliente_preferencial],
id: ‘cpf’,
url: urlClientes.concat(filial), //concatena url com prametro (), que é digitado no imputtext”filial”
pager: function (pagenum, pagesize, oldpagenum) {
// callback called when a page or page size is changed.
}
};
var clienteDataAdapter = new $.jqx.dataAdapter(sourceClientes, {});
var sourceVisitas =
{
datatype: “json”,
datafields: [
{name: ‘id’, type: ‘number’},
{name: ‘cpf’, type: ‘string’},
{name: ‘vendedor_favorito’, type: ‘number’},
{name: ‘nome_vendedor’, type: ‘string’},
{name: ‘filial’, type: ‘number’},
{name: ‘id_status_visita’},
{name: ‘data_visita’, type: ‘date’, format: ‘dd/MM/yy’},
{name: ‘observacao’},
{name: ‘latitude’},
{name: ‘longitude’},
{name: ‘endereco_visita’},
{name: ‘status_visita’}
],
id: “id”,
async: false,
url: urlVisitas.concat(filial), //concatena url com prametro (), que é digitado no imputtext”filial”
pager: function (pagenum, pagesize, oldpagenum) {
// callback called when a page or page size is changed.
}
};var visitaDataAdapter = new $.jqx.dataAdapter(sourceVisitas, {autoBind: true});
visitas = visitaDataAdapter.records;
///////////////////
var nestedGrids = new Array();
// create nested grid.
var initrowdetails = function (index, parentElement, gridElement, record) {
var id = record.uid.toString();
var gridVisita = $($(parentElement).children()[0]);
nestedGrids[index] = gridVisita;
var filtergroup = new $.jqx.filter();
var filter_or_operator = 1;
var filtervalue = id;
var filtercondition = ‘equal’;
var filter = filtergroup.createfilter(‘stringfilter’, filtervalue, filtercondition);
// fill the orders depending on the id.
var ordersbyid = [];
for (var m = 0; m < visitas.length; m++) {
var result = filter.evaluate(visitas[m][“cpf”]);
if (result)
ordersbyid.push(visitas[m]);
}
var visitassource = {datafields: [
{name: ‘id’, type: ‘number’},
{name: ‘cpf’, type: ‘string’},
{name: ‘vendedor_favorito’, type: ‘number’},
{name: ‘nome_vendedor’, type: ‘string’},
{name: ‘filial’, type: ‘number’},
{name: ‘id_status_visita’, type: ‘number’},
{name: ‘data_visita’, type: ‘date’, format: ‘dd/MM/yy’},
{name: ‘observacao’, type: ‘string’},
{name: ‘latitude’, type: ‘number’},
{name: ‘longitude’, type: ‘number’},
{name: ‘endereco_visita’, type: ‘string’},
{name: ‘status_visita’, type: ‘string’}
],
id: ‘id’,
localdata: ordersbyid
};
var nestedGridAdapter = new $.jqx.dataAdapter(visitassource);
if (gridVisita != null) {
gridVisita.jqxGrid({
enabletooltips: true,
source: nestedGridAdapter,
theme: ‘office’,
// rowdetails: true, //In nested grids you’ll more than one div to show rowdetails
localization: getLocalization(),
width: ‘95%’,
height: ‘80%’,
columnsresize: true,
groupsrenderer: groupsrenderer2,
showaggregates: true,
showstatusbar: false,
showdefaultloadelement: false,
statusbarheight: 18,
sortable: true,
//groupable: true,
altrows: true,
columns: [
{
text: ‘#’, pinned: false, sortable: false, filterable: false, editable: false,
groupable: false, draggable: false, resizable: false, renderer: columnrenderer,
datafield: ”, columntype: ‘number’, align: ‘center’, cellsalign: ‘center’, width: 20,
cellsrenderer: function (row, column, value) {
return “<div style=’margin:4px;’>” + (value + 1) + “</div>”;
}
},
//{text: ‘id’, renderer: columnrenderer, resizable: false, columntype: ‘number’, groupable: false, datafield: ‘id’, cellsalign: ‘left’, width: 50, align: ‘center’},
{text: ‘CPF’, renderer: columnrenderer, resizable: false, columntype: ‘string’, groupable: false, datafield: ‘cpf’, cellsalign: ‘center’, width: 80, align: ‘center’},
{text: ‘Vendedor’, groupable: true, renderer: columnrenderer, resizable: false, datafield: ‘vendedor_favorito’, width: 80, align: ‘center’, cellsalign: ‘center’},
{text: ‘Nome Vendedor’, groupable: true, renderer: columnrenderer, resizable: true, datafield: ‘nome_vendedor’, width: 250, align: ‘center’, cellsalign: ‘left’},
{text: ‘Data Visita’, groupable: true, renderer: columnrenderer, resizable: false, datafield: ‘data_visita’, width: 80, align: ‘center’, cellsalign: ‘center’, columntype: ‘datetimeinput’, cellsformat: ‘dd/MM/yy’},
{text: ‘Observacao’, groupable: false, renderer: columnrenderer, resizable: true, datafield: ‘observacao’, width: 200, align: ‘center’, cellsalign: ‘center’},
{text: ‘Endereco Visita’, groupable: true, renderer: columnrenderer, resizable: true, datafield: ‘endereco_visita’, width: 200, align: ‘center’, cellsalign: ‘center’},
{text: ‘Status Visita’, groupable: true, renderer: columnrenderer, resizable: false, datafield: ‘status_visita’, width: 200, align: ‘center’, cellsalign: ‘center’},
{text: ‘Latitude’, groupable: false, renderer: columnrenderer, resizable: false, datafield: ‘latitude’, width: 80, align: ‘center’, cellsalign: ‘center’},
{text: ‘Longitude’, groupable: false, renderer: columnrenderer, resizable: false, datafield: ‘longitude’, width: 80, align: ‘center’, cellsalign: ‘center’}
]
});
}
};
/////////////////////
var getLocalization = function () {
var localizationobj = {};
localizationobj.groupsheaderstring = “Para agrupar, arraste uma coluna para essa área”;
localizationobj.currencysymbol = “R$ “;
localizationobj.decimalseparator = “,”;
localizationobj.thousandsseparator = “.”;
localizationobj.emptydatastring = “Não há dados para serem visualizados. Revise os parâmetros informados!”;
return localizationobj;
};
var groupsrenderer = function (text, group, expanded, data) {
var level = data.level;
str = data.groupcolumn.columntype.trimRight();
if (str == ‘datetimeinput’) {
var number = clienteDataAdapter.formatDate(group, data.groupcolumn.cellsformat);
} else
var number = clienteDataAdapter.formatNumber(group, data.groupcolumn.cellsformat);
var text = data.groupcolumn.text + ‘: ‘ + number;if (data.subItems.length > 0) {
var agg1 = this.getcolumnaggregateddata(‘cpf’, [‘count’], true, data.subItems);
} else {
var rows = new Array();
var getRows = function (group, rows) {
if (group.subGroups.length > 0) {
for (var i = 0; i < group.subGroups.length; i++) {
getRows(group.subGroups[i], rows);
}
} else {
for (var i = 0; i < group.subItems.length; i++) {
rows.push(group.subItems[i]);
}
}
};
getRows(data, rows);
var agg1 = this.getcolumnaggregateddata(‘cpf’, [‘count’], true, rows);
}
var t2 = ”;
if (level == 0) {
var t1 = ‘<span style=”font-weight: bold; color: darkblue”>’ + text + ” ( Qtde: ” + agg1.count + ” )” + “</span>”;
} else if (level == 1) {
var t1 = ‘<span style=”font-weight: bold; color: green”>’ + text + ” ( Qtde: ” + agg1.count + ” )” + “</span>”;
} else
var t1 = ‘<span style=”font-weight: bold; color: red”>’ + text + ” ( Qtde: ” + agg1.count + ” )” + “</span>”;
return t1;
};var groupsrenderer2 = function (text, group, expanded, data) {
var level = data.level;
alert(data.groupcolumn.columntype);
str = data.groupcolumn.columntype.trimRight();
if (str == ‘datetimeinput’) {
//
var number = nestedGridAdapter.formatDate(group, data.groupcolumn.cellsformat);
} else
var number = nestedGridAdapter.formatNumber(group, data.groupcolumn.cellsformat);
var text = data.groupcolumn.text + ‘: ‘ + number;if (data.subItems.length > 0) {
var agg1 = this.getcolumnaggregateddata(‘cpf’, [‘count’], true, data.subItems);
} else {
var rows = new Array();
var getRows = function (group, rows) {
if (group.subGroups.length > 0) {
for (var i = 0; i < group.subGroups.length; i++) {
getRows(group.subGroups[i], rows);
}
} else {
for (var i = 0; i < group.subItems.length; i++) {
rows.push(group.subItems[i]);
}
}
};
getRows(data, rows);
var agg1 = this.getcolumnaggregateddata(‘cpf’, [‘count’], true, rows);
}
var t2 = ”;
if (level == 0) {
var t1 = ‘<span style=”font-weight: bold; color: darkblue”>’ + text + ” ( Qtde: ” + agg1.count + ” )” + “</span>”;
} else if (level == 1) {
var t1 = ‘<span style=”font-weight: bold; color: green”>’ + text + ” ( Qtde: ” + agg1.count + ” )” + “</span>”;
} else
var t1 = ‘<span style=”font-weight: bold; color: red”>’ + text + ” ( Qtde: ” + agg1.count + ” )” + “</span>”;
return t1;
};// var groupsrenderer3 = function (text, group, expanded, data) {
// if (data.groupcolumn.datafield == ‘data_ultima_visita’ || data.groupcolumn.datafield == ‘data_ultima_visita’ || data.groupcolumn.datafield == ‘data_ultima_visita’) {
// var number = dataAdapter.formatNumber(group, data.groupcolumn.cellsformat);
// var text = data.groupcolumn.text + ‘: ‘ + number;
// if (data.subItems.length > 0) {
// var aggregate = this.getcolumnaggregateddata(“REAL_DIA”, [‘sum’], true, data.subItems);
// } else {
// var rows = new Array();
// var getRows = function (group, rows) {
// if (group.subGroups.length > 0) {
// for (var i = 0; i < group.subGroups.length; i++) {
// getRows(group.subGroups[i], rows);
// }
// } else {
// for (var i = 0; i < group.subItems.length; i++) {
// rows.push(group.subItems[i]);
// }
// }
// }
// getRows(data, rows);
// var aggregate = this.getcolumnaggregateddata(“REAL_DIA”, [‘sum’], true, rows);
// }
// return ‘<div class=”‘ + toThemeProperty(‘jqx-grid-groups-row’) + ‘” style=”position: absolute;”><span>’ + text + ‘</span>’ + ‘<span class=”‘ + toThemeProperty(‘jqx-grid-groups-row-details’) + ‘”>’ + “” + ‘ (‘ + aggregate.sum + ‘)’ + ‘</span></div>’;
// } else {
// return ‘<div class=”‘ + toThemeProperty(‘jqx-grid-groups-row’) + ‘” style=”position: absolute;”><span>’ + text + ‘</span>’;
// }
// }var columnrenderer = function (value) {
return ‘<div style=”text-align: center; margin-top: 12px;”>’ + value + ‘</div>’;
};
// initialize jqxgridCliente
$(“#jqxgridCliente”).jqxGrid(
{
rowdetails: true,
source: clienteDataAdapter,
theme: ‘office’,
enabletooltips: true,
// width: device.availWidth – 160,
// height: device.availHeight – 260,
width: ‘99%’,
// height: ‘40%’,
// pageable: true,
// pagesize: 30,
// pagesizeoptions: [’30’, ’50’, ‘100’, ‘200’],
showstatusbar: false,
statusbarheight: 26,
sortable: true,
showaggregates: true,
columnsresize: true,
altrows: true,
groupable: true,
localization: getLocalization(),
groupsrenderer: groupsrenderer,
showdefaultloadelement: false,
initrowdetails: initrowdetails,
rowdetailstemplate: {rowdetails: “<div id=’grid’ style=’margin: 10px;’></div>”, rowdetailsheight: 220, rowdetailshidden: true},
ready: function () {
$(“#jqxgridCliente”).jqxGrid(‘showrowdetails’, 1);
},
columns: [
{
text: ‘#’, pinned: false, sortable: false, filterable: false, editable: false,
groupable: false, draggable: false, resizable: false, renderer: columnrenderer,
datafield: ”, columntype: ‘number’, align: ‘center’, cellsalign: ‘center’, width: 20,
cellsrenderer: function (row, column, value) {
return “<div style=’margin:4px;’>” + (value + 1) + “</div>”;
}
},
{text: ‘Nome Cliente’, renderer: columnrenderer, resizable: false, pinned: false, columntype: ‘string’, groupable: false, datafield: ‘nome_cliente’, cellsalign: ‘left’, width: 250, align: ‘center’},
{text: ‘Última Visita’, renderer: columnrenderer, groupable: true, datafield: ‘data_ultima_visita’, cellsalign: ‘center’, width: 80, align: ‘center’, columntype: ‘datetimeinput’, cellsformat: ‘dd/MM/yy’},
{text: ‘CPF’, renderer: columnrenderer, columntype: ‘string’, groupable: false, datafield: ‘cpf’, cellsalign: ‘center’, width: 80, align: ‘center’},
{text: ‘Filial’, renderer: columnrenderer, columntype: ‘string’, groupable: false, datafield: ‘filial_cliente’, cellsalign: ‘center’, width: 40, align: ‘center’},
{text: ‘Conta’, renderer: columnrenderer, columntype: ‘string’, groupable: false, datafield: ‘conta’, cellsalign: ‘center’, width: 60, align: ‘center’},
{text: ‘DDD Tel’, groupable: false, datafield: ‘ddd_telefone’, cellsalign: ‘center’, width: 40, align: ‘center’, columntype: ‘datetimeinput’, cellsformat: ‘dd/MM/yy’},
{text: ‘Telefone’, renderer: columnrenderer, columntype: ‘string’, groupable: false, datafield: ‘telefone’, cellsalign: ‘center’, width: 70, align: ‘center’},
{text: ‘DDD Cel’, groupable: false, datafield: ‘ddd_celular’, cellsalign: ‘center’, width: 40, align: ‘center’, columntype: ‘datetimeinput’, cellsformat: ‘dd/MM/yy’},
{text: ‘Celular’, renderer: columnrenderer, columntype: ‘string’, groupable: false, datafield: ‘celular’, cellsalign: ‘center’, width: 70, align: ‘center’},
{text: ‘Limite’, renderer: columnrenderer, columntype: ‘string’, groupable: false, datafield: ‘limite’, cellsalign: ‘center’, width: 70, align: ‘center’, cellsformat: ‘c2’},
{text: ‘Vend Ult Compra’, columntype: ‘string’, groupable: true, datafield: ‘vendedor_ult_compra’, cellsalign: ‘center’, width: 70, align: ‘center’},
{text: ‘Data Ult Compra’, groupable: true, datafield: ‘data_ult_compra’, cellsalign: ‘center’, width: 70, align: ‘center’, columntype: ‘datetimeinput’, cellsformat: ‘dd/MM/yy’},
{text: ‘Cidade’, renderer: columnrenderer, columntype: ‘string’, groupable: true, datafield: ‘cidade’, cellsalign: ‘left’, width: 200, align: ‘center’},
{text: ‘UF’, renderer: columnrenderer, columntype: ‘string’, groupable: false, datafield: ‘estado’, cellsalign: ‘center’, width: 10, align: ‘center’},
{text: ‘Bairro’, renderer: columnrenderer, columntype: ‘string’, groupable: false, datafield: ‘bairro’, cellsalign: ‘left’, width: 150, align: ‘center’},
{text: ‘Logradouro’, renderer: columnrenderer, columntype: ‘string’, groupable: false, datafield: ‘logradouro’, cellsalign: ‘left’, width: 250, align: ‘center’},
{text: ‘Nº’, renderer: columnrenderer, columntype: ‘string’, groupable: false, datafield: ‘numero’, cellsalign: ‘center’, width: 50, align: ‘center’},
{text: ‘PC’, renderer: columnrenderer, columntype: ‘string’, groupable: false, datafield: ‘potencial_compra’, cellsalign: ‘center’, width: 10, align: ‘center’},
{text: ‘FO’, renderer: columnrenderer, columntype: ‘string’, groupable: false, datafield: ‘fase_obra’, cellsalign: ‘center’, width: 10, align: ‘center’},
{text: ‘Distância’, renderer: columnrenderer, columntype: ‘string’, groupable: false, datafield: ‘distancia_loja’, cellsalign: ‘center’, width: 60, align: ‘center’},
{text: ‘Vend Favorito’, renderer: columnrenderer, columntype: ‘string’, groupable: true, datafield: ‘vendedor_favorito’, cellsalign: ‘center’, width: 150, align: ‘center’},
{text: ‘Email’, renderer: columnrenderer, columntype: ‘string’, groupable: false, datafield: ’email’, cellsalign: ‘left’, width: 250, align: ‘center’},
{text: ‘Ultima Atualiz’, renderer: columnrenderer, groupable: true, datafield: ‘data_ult_atualizacao’, cellsalign: ‘center’, width: 100, align: ‘center’, columntype: ‘datetimeinput’, cellsformat: ‘dd/MM/yy’},
{text: ‘Favorito desde’, renderer: columnrenderer, groupable: false, datafield: ‘favorito_desde’, cellsalign: ‘center’, width: 100, align: ‘center’, columntype: ‘datetimeinput’, cellsformat: ‘dd/MM/yy’},
{text: ‘Agenda’, renderer: columnrenderer, groupable: false, datafield: ‘agenda_visita’, cellsalign: ‘center’, width: 100, align: ‘center’, columntype: ‘datetimeinput’, cellsformat: ‘dd/MM/yy’},
{text: ‘Segmento’, renderer: columnrenderer, groupable: true, datafield: ‘segmento_mercantil’, cellsalign: ‘center’, width: 100, align: ‘center’, columntype: ‘datetimeinput’, cellsformat: ‘dd/MM/yy’},
{text: ‘Cliente’, renderer: columnrenderer, columntype: ‘string’, groupable: true, datafield: ‘cliente_preferencial’, cellsalign: ‘center’, width: 60, align: ‘center’}
]
});
/////////////////////////////imprime conteudo da grid//////////////////////////////
$(“#print”).jqxButton({width: ‘100’, theme: ‘office’});
$(“#print”).click(function () {
var gridContent = $(“#jqxgridCliente”).jqxGrid(‘exportdata’, ‘html’);
var newWindow = window.open(”, ”, ‘width=800, height=500’),
document = newWindow.document.open(),
pageContent =
‘<!DOCTYPE html>\n’ +
‘<html>\n’ +
‘<head>\n’ +
‘<meta charset=”utf-8″ />\n’ +
‘<title>Vendex Clientes Preferenciais</title>\n’ +
‘</head>\n’ +
‘<body>\n’ + gridContent + ‘\n</body>\n</html>’;
document.write(pageContent);
document.close();
newWindow.print();
});
/////Exporta conteudo da grid para um arquivo excel//////////////////////////
$(“#excelExport”).jqxButton({width: ‘100’, theme: ‘office’});
$(“#excelExport”).click(function () {
$(jqxgridCliente).jqxGrid(‘exportdata’, ‘xls’, ‘vendex’, true, null, false, ‘http://172.22.2.27/save-file.php’);
});
}
;
</script>
<!–/////////////////////////////////////////////////////////////////////////////////////////////////–>
<style type=”text/css”>#jqxButton .jqx-fill-state-normal
{
color: floralwhite;
}.jqx-grid-cell-pinned
{
background-color: floralwhite;
}.jqx-grid-header
{
color: floralwhite;
height: 40px !important;
}.jqx-grid-column-header
{
font-weight: bold;
white-space: normal;
text-align: center
}.jqx-grid-group-cell {
border-width:0 1px 1px 0;
}
.jqx-grid-load
{
background-image: url(‘../resources/gif/spinner.gif’);
}
</style>
</head>
<!–///////////////////////////////////////////////////////////////////////////////////////////////////–>
<body class=’default’ onload=”onLoad()”>
<div style=”margin-top: 10px;”>
<input id=”filial” type=”text”/>
<input id=”search” type=”button” value=”Buscar” onclick=”getFilial()” />
</div>
<br>
<div id=”jqxgridCliente” style=”font-size: 13px; font-family: Verdana; float: left;”>
</div>
<br>
<div style=’margin-top: 20px;’>
<div style=’margin-left: 10px; float: left;’>
<br>
<input type=”button” value=”Salvar” id=’excelExport’ />
<input type=”button” value=”Imprimir” id=’print’ />
<br>
</div>
</div>
</body>
</html>Hello lisandro.boas,
When you wish to refresh the grids, you should not try to “initialize” them again (by calling getClientes). This often leads to unexpected behaviour. Are there any errors thrown in your browser’s console when refreshing? I think that only a data update will suffice in your case, i.e.:
function refresh(filial) { sourceClientes.url = urlClientes.concat(filial); clienteDataAdapter.dataBind(); $('#jqxgridCliente').jqxGrid('updatebounddata'); sourceVisitas.url = urlVisitas.concat(filial); visitaDataAdapter.dataBind(); visitas = visitaDataAdapter.records; }
Of course, you may need to make adjustments to this code.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/It worked like a charm.Thank you.
-
AuthorPosts
You must be logged in to reply to this topic.