jQuery UI Widgets Forums ASP .NET MVC Error in jqxgrid when hiding columns

This topic contains 2 replies, has 2 voices, and was last updated by  Novato 2 years, 4 months ago.

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

  • Novato
    Participant

    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)
    
    

    Todor
    Participant

    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


    Novato
    Participant

    Hi Todor

    Thanks for your help this works well.

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

You must be logged in to reply to this topic.