jQuery UI Widgets Forums Grid Nested Grid

This topic contains 2 replies, has 2 voices, and was last updated by  lisandro.boas 8 years, 7 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Nested Grid Posts
  • Nested Grid #76583

    lisandro.boas
    Participant

    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>

    Nested Grid #76592

    Dimitar
    Participant

    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,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    Nested Grid #76657

    lisandro.boas
    Participant

    It worked like a charm.Thank you.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.