jQuery UI Widgets Forums Grid Total record count

This topic contains 8 replies, has 4 voices, and was last updated by  msoriano 4 years ago.

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
  • Total record count #69285

    nab054371
    Participant

    Hi,

    So I am implementing paging with jqxgrid. On the server side, I have implemented retrieveTotalRecCount method to get a counter of total number of rows matching user’s search filter. At the moment, I am invoking this method with each new page request (meaning request for pages 2,3,4, etc). How do I go about making sure that the retrieveTotalRecCount is invoked only once at the beginning of the user request? After the first page is loaded, I need to make sure that the grid somehow holds on to the total record count without having to invoke the retrieveTotalRecCount method on subsequent page calls.

    Any help would be highly appreciated.

    Regards.

    Total record count #69296

    Dimitar
    Participant

    Hi nab054371,

    A possible solution is to make an Ajax call and retrieve the total records count in the grid’s ready callback function (it is called only once) and store it in a variable.

    Best Regards,
    Dimitar

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

    Total record count #69315

    nab054371
    Participant

    Hi Dimitar,

    Thank you for your feedback. So is this what you are suggesting? It does not seem to be working! Thank you.

    ready: function(){
    source.totalrecords = rowcount_returned_from_server;
    },

    Regards.

    Total record count #69338

    Dimitar
    Participant

    Hi nab054371,

    As I said in my previous post, my suggestion is to make an Ajax call in ready, invoking your server-side method for retrieving the total records count and in the Ajax success callback – set a variable (in this case – source.totalrecords) to the value retrieved from the server.

    Best Regards,
    Dimitar

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

    Total record count #69348

    nab054371
    Participant

    Hi Dimitar,

    So all the ajax service would do is return the total row count. For now, I am hard-coding this total row count in the ready function as shared in my last post. However, now, with the ready function, when I click on next page in the grid, it doesn’t really take me to the next page! I have not changed the ajax service that retrieves next set of records when user clicks on next page in the grid.

    Regards

    Total record count #69353

    nab054371
    Participant

    So when I click on next page in the grid, it looks like the ajax service to retrieve next set of rows is being called twice, first with pagenum = 1 and then with pagenum = 0. The second call with pagenum = 0 brings back records currently displayed on page 0 and following error message:

    Error: jqxGrid: The data is still loading. When the data binding is completed, the Grid raises the ‘bindingcomplete’ event. Call this function in the ‘bindingcomplete’ event handler.

    Total record count #69355

    nab054371
    Participant

    I am sharing my code below. Why is retrievepymthistory being called twice when I click the next page on grid?

    var urlstr = ‘?fromDate=’ + fromdate + ‘&toDate=’ + todate;

    var source =
    {
    datatype: “json”,
    datafields: [
    { name: ‘creationdate’ },
    { name: ‘amount’ },
    { name: ‘id’}
    ],
    cache: false,
    url: ‘/retrievepymthistory’ + urlstr,
    root: ‘paymentrecords’,
    beforeprocessing: function (data) {
    source.totalrecords = data.totalrows;
    if(data.status == “FAIL”){
    $(‘#warningcontent’).html(data.message);
    $(‘#jqxwarningwindow’).jqxWindow({ title: ‘ATTENTION!’,height: 220,width: 180,isModal: true,modalOpacity: 0.3 });
    $(‘#jqxwarningwindow’).jqxWindow(‘open’);
    $(‘#jqxwarningwindow’).jqxWindow({ position: { x: 90, y: 400 }});
    x = document.getElementById(‘jqxwarningwindow’);
    x.style.visibility = ‘visible’;
    x.style.display = ‘block’;
    return;
    }//End of data.status == FAIL.
    }

    };

    var dataAdapter = new $.jqx.dataAdapter(source);

    var columnsrenderer = function (value) {
    return ‘<div style=”text-align: center; margin-top: 5px;”>’ + value + ‘</div>’;
    }

    var contentrenderer = function (row, column, value) {
    return ‘<div style=”text-align: center;”>’ + value + ‘</div>’;
    }

    $(‘#jqxgrid’).on(‘bindingcomplete’, function (event) {
    console.log(“inside binding complete”);
    var localizationobj = {};
    localizationobj.emptydatastring = ‘No matching payment records found.’;
    localizationobj.loadtext = “Loading Matching Payment Records”;
    $(‘#jqxgrid’).jqxGrid(‘localizestrings’, localizationobj);
    if(source.totalrecords <= 0){
    x = document.getElementById(‘xyzexpander’);
    x.style.visibility = ‘hidden’;
    x.style.display = ‘none’;
    x = document.getElementById(‘rcolumn3’);
    x.style.visibility = ‘hidden’;
    }
    });

    $(“#jqxgrid”).jqxGrid(
    {
    width: ‘99%’,
    height: ‘400px’,
    source: dataAdapter,
    pageable: true,
    virtualmode: true,
    rendergridrows: function()
    {
    return dataAdapter.records;
    },
    ready: function(){
    console.log(“inside ready”);
    source.totalrecords = 14;

    },
    rowdetails: false,
    selectionmode: ‘selectrow’,
    columnsheight: 55, //Sets header height.
    pagerheight: 50, //Sets the footer height.
    pagesize: 11, //Set the number of rows visible in a grid page.
    //rowsheight: 30,
    autorowheight: true,
    pagermode: ‘simple’,
    //pagesizeoptions:[’10’],
    theme: “ui-lightness”,

    Total record count #69362

    Peter Stoev
    Keymaster

    Hey nab054371,

    My suggestion is to set source.totalrecords only within the beforeprocessing function of the source object. It is incorrect to set it within the Grid’s “ready” callback because the Data Binding is completed there and this setting has no effect. For localization, I would also suggest you to look at the Localization example – http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/localization.htm?arctic i.e the “localization” property. By doing that, you will avoid the extra rendering required if you set it through method call after the binding is completed. Final suggestion – for server paging implementation, learn and look from: http://www.jqwidgets.com/jquery-widgets-demo/demos/php/serverfiltering_paging_and_sorting.htm?arctic. The sample shows how to combine server paging with server sorting & server filtering.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    Total record count #113411

    msoriano
    Participant

    Hi,

    I am experiencing the same issue. I think the problem here is that jqxAdapter by default uses asynchronous loading -> which means the value that we are expecting to put into the totalrecords might still be in process and cannot be used. I tried changing the jqxAdapter’s async property to false to solve the issue, but the behavior of the jqxgrid now since it is not asynchronous is a bit worrying for the grid waits for the data to load first before it shows anything — which may take a lot of time. Since it appears to be not responding, the user may conclude that an error had happen.

    Maybe it would be helpful if we could have a functionality that updates the totalrecords count (if it is in the server-side pagination state?). This would really help us a lot. ;( I hope this would be implemented. Thank you!!

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

You must be logged in to reply to this topic.