Hello seang,

Thank you for posting in our community.

It's been a while since your last request, but if you still need assistance I'll be glad to help you.

Regarding your question about getting the grid data and displaying it in an array on the page, I would suggest you to use rowsRendered event and get reference to the grid datasource by

ui.owner.dataSource.data(), then iterate through this data, which is represented as array of objects, access the respective grid data fields by their data keys and save them to an array. As result this array might be displayed in a simple div element on the page. Here is a code snippet for your reference:

rowsRendered: function(evt, ui) {

            var grid = ui.owner;    

            var data = grid.dataSource.data();

            var output = document.getElementById("dataOutput");

            var dataArray = new Array();   

            for (var i = 0; i < data.length; i++) {

                dataArray.push("[" + data[i].ProductID, data[i].Name, data[i].ProductNumber + "]<br/>");

            }

            output.innerHTML += dataArray.toString();

        },

 Please let me know if I didn't understand your question properly.

Attached is also a sample with similar scenario for your reference.

If you have any further questions, feel free to contact me.

Sincerely,

Tsanna

found one wa rowHeader = new Array();
        colHeader = new Array();
        data = new Array();
        data[0] = "";//reserve
        data[1] = "";

        for ( var rows = 0; rows < this.gridIDMap.allRows().length; rows++ )
        {
            datarow = new Array();
            for ( var c = 0; c < this.gridIDMap.option( "columns" ).length ; c++ )
            {
                colHeader.push ( this.gridIDMap.option( "columns" )[c].headerText );
                if ( c == 0 ) rowHeader.push( this.gridIDMap.cellAt( c, rows ).innerHTML );
                else datarow.push( this.gridIDMap.cellAt( c, rows ).innerHTML );
            }
            data.push( datarow );//add row
        }

        while ( $( this.gridIDMap.headersTable ).find( "tr:eq(0) > th:eq(" + x + ") " )[0] )//loop all cells in the header
        {
            data = $( ui.table ).find( "tr:eq(0) > th:eq(" + x + ") " );//get the html element of the cell from jquery
           alert( data[0].innerHTML)
        }

        data[0] = rowHeader;//put this in first
        data[1] = colHeader;//put this in second
//data[2 ....] contain the data.

looking for better but this may work. Still no column header ideas yet.