jQuery UI Widgets Forums Grid select all in virtual mode

This topic contains 5 replies, has 3 voices, and was last updated by  Dimitar 7 years, 6 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • select all in virtual mode #28133


    Hi team,

    Can you please tell me how to select all rows in grid when it is in virtual mode.

    thank you

    select all in virtual mode #28135


    Hello ahmad,

    To select all rows, please call the selectallrows method.

    Best Regards,

    jQWidgets team

    select all in virtual mode #28148


    Thanks for your reply dimitar,

    with selectallrows only the visible elements are getting selected in virtual mode.

    my requirement to select all the rows which are yet to load in grid..

    select all in virtual mode #28150


    Hi ahmad,

    Here is an example. It uses the latest version of jQWidgets (3.0.2).

    <!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.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: 10000
    // load virtual data.
    var rendergridrows = function (params) {
    var data = generatedata(params.startindex, params.endindex);
    return data;
    var dataAdapter = new $.jqx.dataAdapter(source);
    width: 670,
    source: dataAdapter,
    theme: theme,
    virtualmode: true,
    selectionmode: "multiplerows",
    rendergridrows: rendergridrows,
    columns: [
    { text: 'Id', datafield: 'id', width: 100 },
    { 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: 80, cellsalign: 'right' },
    { text: 'Unit Price', datafield: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
    { text: 'Total', datafield: 'total', width: 100, cellsalign: 'right', cellsformat: 'c2' }
    $("#selectAll").click(function () {
    $("#getIndexes").click(function () {
    var selectedRowIndexes = $("#jqxgrid").jqxGrid("getselectedrowindexes");
    <body class='default'>
    <button id="selectAll">
    Select all rows</button>
    <button id="getIndexes">
    Get selected indexes</button>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
    <div id="jqxgrid">

    Best Regards,

    jQWidgets team

    select all in virtual mode #87903


    I’m having a similar problem, but with multiselection. It will only select the rows it can see, not the rows I’m telling it to select. With Dimitar’s demo for instance, select the first row then scroll down a little (row 30 should do it) and then click another row while holding shift to select the range. Now scroll up and you will notice that the first rows beyond the grid’s internal visibility are not selected.

    Do I need to implement a superficial selection system that manages the selections and signals the grid for presentation to select the really selected rows when they come into visibility? I’ve already coded out similar workarounds for things like this that don’t work.

    edit: I put Dimitar’s demo into a fiddle here where you can see the behavior I describe: http://jsfiddle.net/L9x0L0jv/

    • This reply was modified 7 years, 6 months ago by  TP_DTNA. Reason: added link
    select all in virtual mode #87914

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

You must be logged in to reply to this topic.