jQuery UI Widgets Forums Grid set pagesize and totalrecords dynamically

This topic contains 4 replies, has 5 voices, and was last updated by  Peter Stoev 5 years, 6 months ago.

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

  • preetam

    I have a requirement where in I need to set page size and total records dynamically.
    Basically I make an ajax call on pagechanged event of jqxgrid and refresh the data into the grid,
    the way grid is being refreshed I need a way to refresh the properties of the jqxgrid i.e page size and total records.

    I am already using virtual mode.


    Hello preetam,

    Pagesize and totalrecords can easily be changed dynamically. Here is an example, based on the demo Virtual Paging:

    <!DOCTYPE html>
    <html lang="en">
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
    var theme = "";
    // prepare the data
    var data = new Array();
    var firstNames =
    "Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"
    var lastNames =
    "Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"
    var productNames =
    "Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Cramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist"
    var priceValues =
    "2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"
    // generate sample data.
    var generatedata = function (startindex, endindex) {
    var data = {};
    for (var i = startindex; i < endindex; i++) {
    var row = {};
    var productindex = Math.floor(Math.random() * productNames.length);
    var price = parseFloat(priceValues[productindex]);
    var quantity = 1 + Math.round(Math.random() * 10);
    row["id"] = i;
    row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
    row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
    row["productname"] = productNames[productindex];
    row["price"] = price;
    row["quantity"] = quantity;
    row["total"] = price * quantity;
    data[i] = row;
    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 totalcolumnrenderer = function (row, column, cellvalue) {
    var cellvalue = $.jqx.dataFormat.formatnumber(cellvalue, 'c2');
    return '<span style="margin: 6px 3px; font-size: 12px; float: right; font-weight: bold;">' + cellvalue + '</span>';
    var dataAdapter = new $.jqx.dataAdapter(source);
    width: 670,
    autoheight: true,
    source: dataAdapter,
    theme: theme,
    virtualmode: true,
    pageable: true,
    rendergridrows: rendergridrows,
    columns: [
    { text: 'Id', datafield: 'id', width: 50 },
    { text: 'First Name', datafield: 'firstname', width: 100 },
    { text: 'Last Name', datafield: 'lastname', width: 100 },
    { text: 'Product', datafield: 'productname', width: 180 },
    { text: 'Quantity', datafield: 'quantity', width: 70, cellsalign: 'right' },
    { text: 'Unit Price', datafield: 'price', width: 70, cellsalign: 'right', cellsformat: 'c2' },
    { text: 'Total', datafield: 'total', cellsrenderer: totalcolumnrenderer, width: 100, cellsalign: 'right' }
    $("#change").click(function () {
    source.totalrecords = 100;
    $("#jqxgrid").jqxGrid({ pagesize: 5 });
    <body class='default'>
    <button id="change">
    Change properties</button>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
    <div id="jqxgrid">

    Best Regards,

    jQWidgets team


    Thank you!

    set pagesize and totalrecords dynamically #103293



    can you guys share the same solution for angular 7.

    set pagesize and totalrecords dynamically #103294

    Peter Stoev

    As it shares the same API for Javascript and Angular, you can use:

    source.totalrecords = 100;

    The dataAdapter is plain Javascript object and setting the totalrecords is the same.
    myGrid is the jqxGrid’s ViewChild element. pagesize is the property name and that’s the way to set it in Angular.

    Best Regards,
    Peter Stoev

    jQWidgets Team

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

You must be logged in to reply to this topic.