select all in virtual mode - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: all, grid, jqxgrid, row, select, selectallrows, virtual, virtualmode

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

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

Author

select all in virtual mode Posts

September 2, 2013 at 6:11 am 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

September 2, 2013 at 6:33 am 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/

September 2, 2013 at 9:40 am 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..

September 2, 2013 at 10:04 am 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/

October 4, 2016 at 6:04 pm 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/

October 5, 2016 at 6:08 am select all in virtual mode #87914

Dimitar

Participant

Duplicate post: http://www.jqwidgets.com/community/topic/multiselect-in-virtualmode/.

Author

Posts

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

You must be logged in to reply to this topic.