jQuery UI Widgets Forums ASP .NET MVC How to display the text "No data to display" when the jqxgrid has no data?

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

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

  • Novato

    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) {
                    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++) {
                            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;                     
                   // 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 });
                        source: gridDataAdapter,
                        width: '100%',
                        columnsresize: true,
                        autorowheight: false,
                        altrows: true,
                        pageable: true,
                        filterable: true,
                        columns: columnsArray_person
                    error: function(error) {
                        jsonValue = jQuery.parseJSON(Error.responseText);

    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)


    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.


    jQWidgets Team


    Hi admin,

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

    Thank you very much

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

You must be logged in to reply to this topic.