jQWidgets Forums

jQuery UI Widgets Forums Grid Loader does not show when using virtual paging

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

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

  • sherlyn
    Participant

    Hi,

    I am using virtual mode with paging. Source from ajax.
    However, the loader is not show while waiting data return from ajax. How can we do this?

    var source =
    {
    datatype: “json”,
    datafields: [
    { name: ‘RowNum’, type: ‘int’ }
    ],
    id: ‘RowNum’,
    localdata: ‘[{}]’,
    totalrecords: 0
    };

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

    var rendergridrows = function (params) {
    return AjaxApp.getDataFromServer(params.startindex, params.endindex);
    }

    $(“#searchResultGrid”).jqxGrid(
    {
    width: “100%”,
    pagermode: ‘default’,
    autoheight: true,
    source: dataAdapter,
    columnsresize: true,
    virtualmode: true,
    pageable: true,
    rendergridrows: rendergridrows,
    altrows: true, autoshowloadelement: true,
    columns: [
    { text: ‘No’, datafield: ‘RowNum’, width: “5%” }
    ]
    });


    sherlyn
    Participant

    continues code above…

    var AjaxApp = (function () {
    var first = true;

    var getFormData = function (start_rec, end_rec) {
    var params = {};
    if (start_rec != null) {
    params.sta_rec_num = start_rec;
    }
    if (end_rec != null) {
    params.end_rec_num = end_rec;
    }

    return (params);
    };

    var getDataFromServer = function (startindex, endindex) {
    var svr_data = [];
    $.ajax({
    url: ‘@Request.ApplicationPath/…./doSearch’,
    data: getFormData(startindex, endindex),
    type: “GET”,
    async: false,
    dataType: ‘json’,
    cache: false,
    contentType: “application/json; charset=utf-8”,
    success: function (result) {
    svr_data = result;
    },
    error: function (xhr, status, error) {

    }
    });
    return svr_data;
    }

    var getTotRec = (function () {
    var tot_rec = ‘0’;
    $.ajax({
    url: ‘@Request.ApplicationPath/…./doGetTotalRec’,
    data: getFormData(),
    type: “GET”,
    async: false,
    dataType: ‘json’,
    cache: false,
    success: function (result) {
    tot_rec = result;
    },
    error: function (xhr, status, error) {

    }
    });
    return (tot_rec);
    });

    return {
    getTotRec:getTotRec,
    getDataFromServer: getDataFromServer
    };
    }());

    function refresh()
    {
    source.totalrecords = AjaxApp.getTotRec();
    $(‘#searchResultGrid’).jqxGrid(‘gotopage’, 0);
    $(“#searchResultGrid”).jqxGrid(‘updatebounddata’);
    }


    Hristo
    Participant

    Hello sherlyn,

    You could use the showloadelement method of the jqxGrid.
    Also, bind to the bindingcomplete event and when it is fired use the hideloadelement method.

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com

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

You must be logged in to reply to this topic.