jQuery UI Widgets Forums Grid select all in virtual mode

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

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

    ahmed2
    Member

    Hi team,

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

    thank you
    ahmad

    select all in virtual mode #28135

    Dimitar
    Participant

    Hello ahmad,

    To select all rows, please call the selectallrows method.

    Best Regards,
    Dimitar

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

    select all in virtual mode #28148

    ahmed2
    Member

    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

    Dimitar
    Participant

    Hi ahmad,

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

    <!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.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);
    $("#jqxgrid").jqxGrid(
    {
    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 () {
    $("#jqxgrid").jqxGrid("selectallrows");
    });
    $("#getIndexes").click(function () {
    var selectedRowIndexes = $("#jqxgrid").jqxGrid("getselectedrowindexes");
    });
    });
    </script>
    </head>
    <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">
    </div>
    </div>
    </body>
    </html>

    Best Regards,
    Dimitar

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

    select all in virtual mode #87903

    TP_DTNA
    Participant

    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 3 years, 9 months ago by  TP_DTNA. Reason: added link
    select all in virtual mode #87914

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

You must be logged in to reply to this topic.