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, 1 month ago.

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

  • preetam
    Participant

    Hi,
    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.


    Dimitar
    Participant

    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">
    <head>
    <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);
    $("#jqxgrid").jqxGrid(
    {
    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 });
    });
    });
    </script>
    </head>
    <body class='default'>
    <button id="change">
    Change properties</button>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
    <div id="jqxgrid">
    </div>
    </div>
    </body>
    </html>

    Best Regards,
    Dimitar

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


    Reksy
    Participant

    Thank you!

    set pagesize and totalrecords dynamically #103293

    ashpak-reveur
    Participant

    Hi,

    can you guys share the same solution for angular 7.

    set pagesize and totalrecords dynamically #103294

    Peter Stoev
    Keymaster

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

    source.totalrecords = 100;
    myGrid.pagesize(5);

    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
    https://www.jqwidgets.com/

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

You must be logged in to reply to this topic.