Virtual Data + paging with custom query and format

[bouyoulMember]

Hello,

I am trying to use the jqxGrid control with paging, virtual data and a remote web service (that I do not control). However, I have the following restrictions:
– My data is accessible via POST only: I need to send a somewhat large document as the query
– The document does not stay constant between pages: It contains fields equivalent to pagenum and pagesize that need to be replaced for every page change
– I need to set some HTTP headers in the query
– The returned format is custom (i.e. neither XML or JSON): I need to transform the received data into a format supported by jqxGrid

I am not really clear on how to achieve that. Are such restrictions workable?
I was thinking of using a source and a dataAdapter but I am not sure how to indicate if the request is GET or POST or how to change headers or how to format the result. Is there a sample that would show how to achieve this? (Maybe one that shows how to use a completely custom ajax query i.e. $.ajax(…) for the fetching).

(also is there documentation for jqx.dataAdapter?)

Thanks for your help.

B.

[Peter StoevKeymaster]

Hi bouyoul,

To learn how to use the jqx.dataAdapter, you can take a look at the help topics about the Grid and Chart about data binding – jquery-grid-datasources.htm, jquery-grid-php-server-side-processing.htm and jquery-chart-data-source.htm. jqx.dataAdapter supports binding to the following formats: tsv, csv, xml, json and data array. If your data is in a custom format, its better to make a standard ajax call and map your data to any of the supported data types and store it in an array. In virtual mode, the Grid expects the user to return an array of the visible rows in the ‘rendergridrows’ function(see the virtualdata.htm demo).

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[bouyoulMember]

I saw that “virtualdata.htm” example. The problem with it is that it does not retrieve data asynchronously so that the rendergridrows can return the new data when it is called. However, if I have to make an asynchronous Ajax call to get my data, there is no way for rendergridrows to return anything at the time it is called. Is there a callback for the asynchronous case? If not, what should be done?

Thanks for your help.

B.

[Peter StoevKeymaster]

Hi bouyoul,

In your ajax’s success callback function, you can call the jqxGrid’s ‘updatebounddata’ function. This will ensure that the ‘rendergridrows’ function is called.

Best Regards,
Peter Stoev

jQwidgets Team
http://www.jqwidgets.com

[tamaraOntMember]

Sorry, I’, trying to do that, and I can’t. I have the following code:

<script type="text/javascript">
    $(document).ready(function () {
        // generate sample data.
        var generatedata = function (startindex, endindex) {
            $.get("index.php", { startindex: startindex, endindex: endindex },function(result){                                                      
                var data = JSON.parse(result);
                return data;
            });
        }
        
        var source =
        {
            datatype: "array",
            localdata: {},
            totalrecords: 1000000
        };
        // load virtual data.
        var rendergridrows = function (params) {
            var data = generatedata(params.startindex, params.endindex);
            return data;
        }
        var dataAdapter = new $.jqx.dataAdapter(source);
        $("#gridUser_1").jqxGrid(
        {
            width: 670,
            autoheight: true,
            source: dataAdapter,
            theme: 'ui-start',
            virtualmode: true,
            pageable: true,
            rendergridrows: rendergridrows,
            columns: [
                { text: 'id', datafield: 'id', width: 100 },
                { text: 'idProfile', datafield: 'idProfile', width: 100 },
                { text: 'user', datafield: 'user', width: 120 },
                { text: 'password', datafield: 'password', width: 120 }              ]
        });        
    });
</script>
<div id='contenidoTab1'>
    <div>
        <div id="gridUser">
        </div>
    </div>
</div>

In the index.php, I have the following code, to simulate asking for data

if (isset($_GET["startindex"])) {
    $result = Array();
    
    for($i = 0; $i < 10; ++$i){
        $row = Array();
        $row["id"] = $i;
        $row['user'] = 'tamara';
        $row['password'] = '12345';
        $row['idProfile'] = 1;
        $result[$i] = $row;
    }
    echo json_encode((object)$result);    
}

I don’t know where I have to put the jqxGrid’s ‘updatebounddata’ function.

If a show the content of the var ‘data’ in the rendergridrows after the call ‘generatedata’, says ‘undefined’.

Thanks for your help

[Peter StoevKeymaster]

Hi tamaraOnt,

We have online examples in the PHP section which demonstrate how to implement Server Paging. See here: serverpaging.htm.

Best Regards,
Peter Stoev

jQwidgets Team
http://www.jqwidgets.com

[tamaraOntMember]

Thanks a lot. I haven’t seen that example.

It works now.

[Author]

Posts