jQWidgets Forums

Tagged: #jqwidgets-grid, grid, javascript grid, jquery grid

This topic contains 8 replies, has 2 voices, and was last updated by Hristo 8 years, 1 month ago.

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

Author

jqxgrid rowselect selectsallrows in nested grid Posts

June 14, 2017 at 3:54 pm jqxgrid rowselect selectsallrows in nested grid #94317

dan123

Participant

Hi i was wondering if there an example of jqxgrid rowselect event where it would selectallrows in the nested grid. I really want to figure this one out.

Here is the jsfiddle:
https://www.jseditor.io/?key=jqwidgets-nested-grid-new-row

June 15, 2017 at 11:59 am jqxgrid rowselect selectsallrows in nested grid #94341

Hristo

Participant

Hello dan123,

Could you clarify it?
You want to select all rows in one Nested Grid or all rows in all Nested Grids?

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

June 15, 2017 at 1:40 pm jqxgrid rowselect selectsallrows in nested grid #94347

dan123

Participant

Select all rows in one nested grid. So suppose in parent grid, I selected row 1 and now it should also select all rows of its nested grid too.

June 20, 2017 at 8:23 am jqxgrid rowselect selectsallrows in nested grid #94432

Hristo

Participant

Hello dan123,

Please, take a look at this example, it is based on “Nested Grids” demo:

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>This example shows how to display nested Grid plugins.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.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/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var url = "../sampledata/employees.xml";

            var source =
            {
                datafields: [
                    { name: 'FirstName' },
                    { name: 'LastName' },
                    { name: 'Title' },
                    { name: 'Address' },
                    { name: 'City' }
                ],
                root: "Employees",
                record: "Employee",
                id: 'EmployeeID',
                datatype: "xml",
                async: false,
                url: url
            };

            var employeesAdapter = new $.jqx.dataAdapter(source);

            var orderdetailsurl = "../sampledata/orderdetails.xml";

            var ordersSource =
            {
                datafields: [
                    { name: 'EmployeeID', type: 'string' },
                    { name: 'ShipName', type: 'string' },
                    { name: 'ShipAddress', type: 'string' },
                    { name: 'ShipCity', type: 'string' },
                    { name: 'ShipCountry', type: 'string' },
                    { name: 'ShippedDate', type: 'date' }
                ],
                root: "Orders",
                record: "Order",
                datatype: "xml",
                url: orderdetailsurl,
                async: false
            };

            var ordersDataAdapter = new $.jqx.dataAdapter(ordersSource, { autoBind: true });
            orders = ordersDataAdapter.records;
            var nestedGrids = new Array();

            // create nested grid.
            var initrowdetails = function (index, parentElement, gridElement, record) {
                var id = record.uid.toString();
                var grid = $($(parentElement).children()[0]);
                nestedGrids.push(grid);

                var filtergroup = new $.jqx.filter();
                var filter_or_operator = 1;
                var filtervalue = id;
                var filtercondition = 'equal';
                var filter = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
                // fill the orders depending on the id.
                var ordersbyid = [];
                for (var m = 0; m < orders.length; m++) {
                    var result = filter.evaluate(orders[m]["EmployeeID"]);
                    if (result)
                        ordersbyid.push(orders[m]);
                }

                var orderssource = { datafields: [
                    { name: 'EmployeeID', type: 'string' },
                    { name: 'ShipName', type: 'string' },
                    { name: 'ShipAddress', type: 'string' },
                    { name: 'ShipCity', type: 'string' },
                    { name: 'ShipCountry', type: 'string' },
                    { name: 'ShippedDate', type: 'date' }
                ],
                    id: 'OrderID',
                    localdata: ordersbyid
                }
                var nestedGridAdapter = new $.jqx.dataAdapter(orderssource);

                if (grid != null) {
                    grid.jqxGrid({
                        selectionmode: 'multiplerows',
                        source: nestedGridAdapter, width: 780, height: 200,
                        columns: [
                          { text: 'Ship Name', datafield: 'ShipName', width: 200 },
                          { text: 'Ship Address', datafield: 'ShipAddress', width: 200 },
                          { text: 'Ship City', datafield: 'ShipCity', width: 150 },
                          { text: 'Ship Country', datafield: 'ShipCountry', width: 150 },
                          { text: 'Shipped Date', datafield: 'ShippedDate', width: 200 }
                       ]
                    });
                }
            }
            

            var photorenderer = function (row, column, value) {
                var name = $('#jqxgrid').jqxGrid('getrowdata', row).FirstName;
                var imgurl = '../../images/' + name.toLowerCase() + '.png';
                var img = '<div style="background: white;"><img style="margin:2px; margin-left: 10px;" width="32" height="32" src="' + imgurl + '"></div>';
                return img;
            }

            var renderer = function (row, column, value) {
                return '<span style="margin-left: 4px; margin-top: 9px; float: left;">' + value + '</span>';
            }

            // creage jqxgrid
            $("#jqxgrid").jqxGrid(
            {
                width: 850,
                height: 365,
                source: source,
                rowdetails: true,
                rowsheight: 35,
                initrowdetails: initrowdetails,
                rowdetailstemplate: { rowdetails: "<div id='grid' style='margin: 10px;'></div>", rowdetailsheight: 220, rowdetailshidden: true },
                ready: function () {
                    $("#jqxgrid").jqxGrid('showrowdetails', 1);
                },
                columns: [
                      { text: 'Photo', width: 50, cellsrenderer: photorenderer },
                      { text: 'First Name', datafield: 'FirstName', width: 100, cellsrenderer: renderer },
                      { text: 'Last Name', datafield: 'LastName', width: 100, cellsrenderer: renderer },
                      { text: 'Title', datafield: 'Title', width: 180, cellsrenderer: renderer },
                      { text: 'Address', datafield: 'Address', width: 300, cellsrenderer: renderer },
                      { text: 'City', datafield: 'City', width: 170, cellsrenderer: renderer }
                  ]
                });
            
            $('#jqxgrid').on('rowselect', function (event) {
                // event arguments.
                var args = event.args;
                // row's bound index.
                var rowBoundIndex = args.rowindex;
                // row's data. The row's data object or null(when all rows are being selected or unselected with a single action). If you have a datafield called "firstName", to access the row's firstName, use var firstName = rowData.firstName;
                var rowData = args.row;

                var isMasterGrid = event.target.id == "jqxgrid";

                if (isMasterGrid) {
                    var nestedGridSelector = '#grid' + rowBoundIndex;
                    $(nestedGridSelector).jqxGrid('selectallrows');
                }
            });

            // TODO: It should create logic when unselect row. Also need to decide what will happen when unselect one row of the Nested Grid

        });
    </script>
</head>
<body class='default'>
    <div id="jqxgrid">
    </div>
</body>
</html>

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

June 21, 2017 at 4:42 am jqxgrid rowselect selectsallrows in nested grid #94446

dan123

Participant

Hi Hristo, one more thing

So what if the nested grid has another nested grid. So the first nested grid will be set as “grid” and now another nested grid will be “grid2”. So will the rowselect event be like this for the first nested grid? Because I also want to bind the same function to both nested grids.

grid.on(‘rowselect’, function (event) {
// event arguments.
var args = event.args;
// row’s bound index.
var rowBoundIndex = args.rowindex;

var rowData = args.row;

var isMasterGrid = event.target.id == “grid”;

if (isMasterGrid) {
var nestedGridSelector = ‘#grid2’ + rowBoundIndex;
$(nestedGridSelector).jqxGrid(‘selectallrows’);
}
});

June 21, 2017 at 7:54 am jqxgrid rowselect selectsallrows in nested grid #94452

Hristo

Participant

Hello dan123,

It will be better to use another naming for the most inner NestedGrids because the first level of the NestedGrids are named “gridN” (‘grid1’, ‘grid2’, and etc.).
For example the second level could get name as ‘grid1-1’, ‘grid1-2’ and etc.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

June 21, 2017 at 1:29 pm jqxgrid rowselect selectsallrows in nested grid #94457

dan123

Participant

Hi Hristo,

I also noticed that onload the selection does not work it just shows this in the error

Error: Uncaught Error: Invalid Selector – #grid0! Please, check whether the used ID or CSS Class name is correct.
Error: Uncaught Error: Invalid Selector – #grid1! Please, check whether the used ID or CSS Class name is correct.

Here is my jsfiddle:
https://www.jseditor.io/?key=jqwidgets-nested-grid-new-row-1

June 21, 2017 at 1:59 pm jqxgrid rowselect selectsallrows in nested grid #94459

dan123

Participant

Adding to the previous post: I tried what you said about able to selecting the 3rd level nested grid, and I was not able to bind a rowselect. What did I do wrong here? I named the 3rd level grid as “grid1_2”

Here is the jsfiddle:
https://www.jseditor.io/?key=jqwidgets-nested-grid-new-row-1-2

June 23, 2017 at 7:53 am jqxgrid rowselect selectsallrows in nested grid #94501

Hristo

Participant

Hello dan123,

The examples that you provide are not ‘shared’ (you should check ‘Everyone’ option before you save the project).
Unfortunately, that does not issue with our widget and it is development process. We cannot spend a time to debug all private project.
I would suggest you look at this article:
http://www.jqwidgets.com/assembling-n-nested-jquery-grid/

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

Author

Posts

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

You must be logged in to reply to this topic.