jQuery UI Widgets Forums Grid jqxgrid return empty source

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

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
  • jqxgrid return empty source #76741

    sathiyaseelan8
    Participant

    this is my code. is there a way for me to block grid from display if the return source is empty(no data return from ctrl_no_status.php).

    var getCtrlNoStatus = function(ctrl_no) {
    			var url = "lib/ctrl_no_status.php?ctrl_no="+ctrl_no;
                // prepare the data
                var source =
                {
    				datatype: "json",
                    datafields: [
                        { name: 'ControlNo' },
                        { name: 'Title' },
                        { name: 'Item' },
    					{ name: 'Action' }
                    ],
    				id: 'id',
                    url: url,
                    root: 'data'
                };
                var dataAdapter = new $.jqx.dataAdapter(source);
                $("#status").jqxGrid(
                {
                    width: 870,
                    autoheight: true,
                    source: dataAdapter,
                    theme: theme,
    				sortable: true,
    				rowsheight: 40,
                    //filterable: true,
                    keyboardnavigation: false,
                    columns: [
                        { text: 'Control No', datafield: 'ControlNo', width: 100 },
                        { text: 'Title', datafield: 'Title', width: 500 },
                        { text: 'Item', datafield: 'Item', width: 150 },
    					{ text: 'Action', datafield: 'Action', width: 150 }
                    ]
                });
    			
    			enable();
    		}
    jqxgrid return empty source #76745

    Dimitar
    Participant

    Hello sathiyaseelan8,

    You can try the following:

    var getCtrlNoStatus = function(ctrl_no) {
        var url = "lib/ctrl_no_status.php?ctrl_no=" + ctrl_no;
        // prepare the data
        var source = {
            datatype: "json",
            datafields: [{
                name: 'ControlNo'
            }, {
                name: 'Title'
            }, {
                name: 'Item'
            }, {
                name: 'Action'
            }],
            id: 'id',
            url: url,
            root: 'data'
        };
        var dataAdapter = new $.jqx.dataAdapter(source, {
            beforeLoadComplete: function(records) {
                if (records.length === 0) {
                    $("#status").css('visibility', 'hidden');
                }
            }
        });
        $("#status").jqxGrid({
            width: 870,
            autoheight: true,
            source: dataAdapter,
            theme: theme,
            sortable: true,
            rowsheight: 40,
            //filterable: true,
            keyboardnavigation: false,
            columns: [{
                text: 'Control No',
                datafield: 'ControlNo',
                width: 100
            }, {
                text: 'Title',
                datafield: 'Title',
                width: 500
            }, {
                text: 'Item',
                datafield: 'Item',
                width: 150
            }, {
                text: 'Action',
                datafield: 'Action',
                width: 150
            }]
        });
    
        enable();
    }

    Best Regards,
    Dimitar

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

    jqxgrid return empty source #76748

    sathiyaseelan8
    Participant

    thank for your response.

    its not working. it still displaying the grid with no data to display message.

    from where you get the ‘records’. do i need to declare it somewhere?

    jqxgrid return empty source #76750

    Dimitar
    Participant

    Hi sathiyaseelan8,

    records is an argument of the beforeLoadComplete callback function. Please take a closer look at the proposed dataAdapter definition:

    var dataAdapter = new $.jqx.dataAdapter(source, {
        beforeLoadComplete: function(records) {
            if (records.length === 0) {
                $("#status").css('visibility', 'hidden');
            }
        }
    });

    Best Regards,
    Dimitar

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

    jqxgrid return empty source #76751

    sathiyaseelan8
    Participant

    is there a way where i can call a function when the returned data is NULL?

    jqxgrid return empty source #76753

    Dimitar
    Participant

    Hi sathiyaseelan8,

    Alternatively, you can try the following:

    $("#status").jqxGrid({
        width: 870,
        autoheight: true,
        source: dataAdapter,
        theme: theme,
        sortable: true,
        rowsheight: 40,
        //filterable: true,
        keyboardnavigation: false,
        ready: function() {
            var rows = $("#status").jqxGrid('getrows');
            if (rows.length === 0) {
                $("#status").css('visibility', 'hidden');
            }
        },
        columns: [{
            text: 'Control No',
            datafield: 'ControlNo',
            width: 100
        }, {
            text: 'Title',
            datafield: 'Title',
            width: 500
        }, {
            text: 'Item',
            datafield: 'Item',
            width: 150
        }, {
            text: 'Action',
            datafield: 'Action',
            width: 150
        }]
    });

    This approach should work when the data returned is null and there is no need to implement beforeLoadComplete.

    Best Regards,
    Dimitar

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

    jqxgrid return empty source #76938

    sathiyaseelan8
    Participant

    hi dimitar,

    sometimes jqxgrid refused to load data if there are more than 5000 records. in this case, is there a way to customize “no data to display” to any other message?

    jqxgrid return empty source #76945

    Dimitar
    Participant

    Hi sathiyaseelan8,

    Maybe you should make use of the virtualmode functionality, which allows the grid to load very large numbers of rows on-demand. Here are two examples with it: Virtual Paging and Virtual Scrolling.

    As for the “No data to display” message, it can be changed/localized by modifying the value of the emptydatastring localization member.

    Best Regards,
    Dimitar

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

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

You must be logged in to reply to this topic.