How to display the text "No data to display" when the jqxgrid has no data?

[NovatoParticipant]

Hello community I hope you can help me with this problem that seems simple, thank you very much.

I have a jqxgrid grid that filled it dynamically but my problem is that when I don’t have data I hide the watch column. By hiding this column my grid does not show the text “No data to display”.

If the watch column does not hide it and the grid has no data, the text “No data to display” is displayed but the watch column heading is also shown and I do not want its header to be displayed.

Could someone help me solve this thanks?

This is my code:

    function consult_people(id_persona) {

        var values; 
        var datafields_person;
        var columns_person; 
        var columnsArray_person; 

        if (id_persona !== undefined) {

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

                success: function(data) {

                    if (data != '') {

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

                        for (var i in values[0]) {
                            datafields_person.push({ name: i, type: 'string' });
                            columns_person.push({ text: i, datafield: i, filtercondition: 'CONTAINS', align: 'center', width: '35%' });

                        }                     

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

                    
                        if (columnsArray_person.length > 0) {

                            columnsArray_person[1].hidden = true;
                            columnsArray_person[3].hidden = true;
                            columnsArray_person[4].hidden = true;
                            columnsArray_person[5].hidden = true;
                            columnsArray_person[6].hidden = true;
                            columnsArray_person[7].hidden = true;
                            columnsArray_person[8].hidden = true;
                            columnsArray_person[9].hidden = true;

                        }

                    }

                    var gridSource =
                {

                    datatype: "json",
                    datafields: datafields_person,
                    localdata: values,
                    async: false

                };

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

                    columnsArray_person.push({ text: 'watch', datafield: 'watch', align: 'center', columntype: 'button', cellclassname: "color",  
                        cellsrenderer: function() { },
                        buttonclick: function(row) {
							
                            editrow = row;

                            var datarecord = $("#gvData").jqxGrid('getrowdata', editrow);
                          
                            var Name = $("#gvData").jqxGrid('getcolumnat', 0).datafield;
                            var FirstName = $("#gvData").jqxGrid('getcolumnat', 1).datafield;
                            var LastName = $("#gvData").jqxGrid('getcolumnat', 2).datafield;                     
                          
                            $("#txtName").val(datarecord[Name]);
                            $("#txtFirstName").val(datarecord[FirstName]);
                            $("#txtLastName").val(datarecord[LastName]);
							
                        }
                    });

                   
               // Here I hide the watch column when the grid has no data and no longer shows me the text "No data to display"
                    if (columnsArray_person.length == 0 || columnsArray_person == 1) {
                       
                       columnsArray_person[0].hidden = true;                       

                      // I use the showheader property that hides the header and shows me the text but error comes out.
                        //$('#gvData').jqxGrid({ showheader: false });
                        
                    }
                 
                    $("#gvData").jqxGrid(
                {
                    source: gridDataAdapter,
                    width: '100%',
                    columnsresize: true,
                    autorowheight: false,
                    altrows: true,
                    pageable: true,
                    filterable: true,
                    columns: columnsArray_person

                });

                    

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

            });

        }

    }

The error I get when I use the showheader property is the following:

Uncaught TypeError: Cannot read property 'css' of undefined
    at c.<computed>.propertyChangedHandler (jqxgrid.js:8)
    at Object.b.jqx.setvalueraiseevent (jqxcore.js:15)
    at Boolean.<anonymous> (jqxcore.js:15)
    at Function.each (jquery-3.3.1.min.js:2)
    at Object.b.jqx.set (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)

[adminKeymaster]

Hi Novato,

The Grid displays “no data to display” when the grid’s rows collection is empty. Otherwise, even if your columns are hidden, it will not display that message.

As a solution, you can set the Grid’s source property to null, when you hide all columns and reset it after you show any column.

Regards,
Peter

jQWidgets Team
https://www.jqwidgets.com

[NovatoParticipant]

Hi admin,

Hi, can you give me an example with the code I published?

Thank you very much

[Author]

Posts