Error in jqxgrid when hiding columns

[NovatoParticipant]

My problem is that I load a grid into a popup, the grid shows perfectly but I just want to show 3 columns and hide the other columns.

When I hide the columns I want to hide, only one is hidden and the rest are not. I have also used beginupdate and endupdate but it makes me an error.

Can you tell me how to solve this?

Thank you.

This is my code.

function Historico_Aclaracion(id_bonos, id_metrica) {

        var valores_historico_aclaracion;
        var datafields_historico_aclaracion = new Array();
        var columns_historico_aclaracion = new Array();
        var columnsArray_historico_aclaracion = [];

        $.ajax({
            type: "POST",
            dataType: "json",
            url: "frmBI.aspx/Historico_Aclaracion",
            contentType: "application/json; charset=utf-8",
            data: '{id_bonos:"' + id_bonos + '",id_metrica:"' + id_metrica + '"}',
            async: false,

            success: function(data) {

                if (data != '') {

                    valores_historico_aclaracion = data.d;
                    valores_historico_aclaracion = JSON.parse(valores_historico_aclaracion);

                    for (var i in valores_historico_aclaracion[0]) {
                        datafields_historico_aclaracion.push({ name: i, type: 'string' });
                        columns_historico_aclaracion.push({ text: i, datafield: i, filtercondition: 'CONTAINS', align: 'center', minwidth: 100 });

                    }

                    for (var n = 0; n < datafields_historico_aclaracion.length; n++) {
                        datafields_historico_aclaracion[1].type = 'date';
                    }
                    for (var c = 0; c < columns_historico_aclaracion.length; c++) {
                        columns_historico_aclaracion[1].cellsformat = 'dd/MM/yyyy'; //({ cellsformat: 'dd/MM/yyyy' });
                        //console.log("cellsformat ", columns_historico_aclaracion[c]);
                    }

                    for (var j = 1; j < columns_historico_aclaracion.length; j++) {
                        columnsArray_historico_aclaracion.push(columns_historico_aclaracion[j]);
                    }

                }

                var gridSource =
                {

                    datatype: "json",
                    datafields: datafields_historico_aclaracion,
                    localdata: valores_historico_aclaracion,
                    async: false

                };

                var gridDataAdapter = new $.jqx.dataAdapter(gridSource);             
                

                columnsArray_historico_aclaracion.push({ text: 'Ver', datafield: 'Ver', align: 'center', minwidth: 100, columntype: 'button', cellclassname: "color_aclaraciones", 
                    cellsrenderer: function() { },
                    buttonclick: function(row) {

                      

                    }
                });
              

                $("#gvHistorico_AclaracionProm2").jqxGrid(
                {
                    source: gridDataAdapter,
                    width: '100%',
                    columnsresize: true,
                    autorowheight: false,
                    altrows: true,
                    pageable: true,
                    filterable: true,
                    columns: columnsArray_historico_aclaracion

                });

    /******** Removing beginupdate and endupdate only hides a column and using begin update and endupate shows me an error ************/
               $("#gvHistorico_AclaracionProm2").jqxGrid('beginupdate');

                var id_datos_metrica = columnsArray_historico_aclaracion[1].datafield;
                var col_objetivo = columnsArray_historico_aclaracion[3].datafield;
                var col_Actual = columnsArray_historico_aclaracion[4].datafield;
                var col_porcentaje_bono_normal = columnsArray_historico_aclaracion[5].datafield;
                var col_bono_adicional = columnsArray_historico_aclaracion[6].datafield;
                var col_monto_proxxi = columnsArray_historico_aclaracion[7].datafield;
                var col_comentarios = columnsArray_historico_aclaracion[8].datafield;

                console.log("col_objetivo ", col_objetivo);
                console.log("actual ", col_Actual);

                $("#gvHistorico_AclaracionProm2").jqxGrid('hidecolumn', id_datos_metrica);
                $("#gvHistorico_AclaracionProm2").jqxGrid('hidecolumn', col_objetivo);
                $("#gvHistorico_AclaracionProm2").jqxGrid('hidecolumn', col_Actual);
                $("#gvHistorico_AclaracionProm2").jqxGrid('hidecolumn', col_porcentaje_bono_normal);
                $("#gvHistorico_AclaracionProm2").jqxGrid('hidecolumn', col_bono_adicional);
                $("#gvHistorico_AclaracionProm2").jqxGrid('hidecolumn', col_monto_proxxi);
                $("#gvHistorico_AclaracionProm2").jqxGrid('hidecolumn', col_comentarios);

                $("#gvHistorico_AclaracionProm2").jqxGrid('endupdate');
                //                }

            },
            error: function(error) {
                alert(error.responseText);
                console.log(error.responseText);
                jsonValue = jQuery.parseJSON(Error.responseText);
                alert(error.respose.Text);
                alert("Error");
            }

        });

    }

This is the error I get when using beginupdate and endupdate

Uncaught TypeError: Cannot read property 'find' of undefined  jqxgrid.js:8
    at c.<computed>._rendercolumnheaders (jqxgrid.js:8)
    at c.<computed>.rendergridcontent (jqxgrid.js:8)
    at c.<computed>.resumeupdate (jqxgrid.js:8)
    at c.<computed>.endupdate (jqxgrid.js:8)
    at Object.b.jqx.invoke (jqxcore.js:15)
    at Object.b.jqx.jqxWidgetProxy (jqxcore.js:15)
    at HTMLDivElement.<anonymous> (jqxcore.js:15)
    at Function.each (jquery-3.3.1.min.js:2)
    at w.fn.init.each (jquery-3.3.1.min.js:2)
    at w.fn.init.b.fn.<computed> [as jqxGrid] (jqxcore.js:15)

[TodorParticipant]

Hello Novato,

Try to set hidden property to true for the columns which you want to hide.
For example:

columns: [
    { text: 'First Name', groupable: true, datafield: 'firstname', width: 90, hidden: true },
....

Let us know if you need further assistance.

Best Regards,
Todor

jQWidgets Team
https://www.jqwidgets.com

[NovatoParticipant]

Hi Todor

Thanks for your help this works well.

[Author]

Posts