jQWidgets Forums

Tagged: jqwidgets nested grids, nested grid editing

This topic contains 7 replies, has 2 voices, and was last updated by hrc 11 years, 4 months ago.

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

Author

editmode : click not working in subgrids with Firefox 26.0 Posts

January 22, 2014 at 7:12 pm editmode : click not working in subgrids with Firefox 26.0 #48230

hrc

Participant

Hi Peter,

I’m using firefox 26.0 browser and the clik editmode in the subgrid input field is not supported, I have to doubleclik it to let it work. May you check and see if some solution is available ?

PS
Tested working on Chrome 31 and IE 11.

Best regards,

January 22, 2014 at 8:54 pm editmode : click not working in subgrids with Firefox 26.0 #48233

Peter Stoev

Keymaster

Hi hrc,

Thanks for asking support from me. Btw, you may also ask my colleagues Maria and Dimitar someday, too They are experienced and helpful, too.

Unfortunately, I was not able to reproduce that behavior with jQWidgets 3.1.

My Test 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.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/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.edit.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[index] = 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({
                        editable: true, editmode: 'click', selectionmode: 'singlecell',
                        source: nestedGridAdapter, width: 600, 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: 670,
                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 }
                  ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id="jqxgrid">
    </div>
</body>
</html>

Best Regards,
Peter Stoev

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

January 22, 2014 at 11:58 pm editmode : click not working in subgrids with Firefox 26.0 #48240

hrc

Participant

Hi Peter,

please try this example:


$(document).ready(function () {

            var data = [];
            var firstNames = ["Nancy", "Andrew", "Janet", "Margaret", "Steven", "Michael", "Robert", "Laura", "Anne"];
            var lastNames = ["Davolio", "Fuller", "Leverling", "Peacock", "Buchanan", "Suyama", "King", "Callahan", "Dodsworth"];
            var titles = ["Sales Representative", "Vice President, Sales", "Sales Representative", "Sales Representative", "Sales Manager", "Sales Representative", "Sales Representative", "Inside Sales Coordinator", "Sales Representative"];
            var titleofcourtesy = ["Ms.", "Dr.", "Ms.", "Mrs.", "Mr.", "Mr.", "Mr.", "Ms.", "Ms."];
            var birthdate = ["08-Dec-48", "19-Feb-52", "30-Aug-63", "19-Sep-37", "04-Mar-55", "02-Jul-63", "29-May-60", "09-Jan-58", "27-Jan-66"];
            var hiredate = ["01-May-92", "14-Aug-92", "01-Apr-92", "03-May-93", "17-Oct-93", "17-Oct-93", "02-Jan-94", "05-Mar-94", "15-Nov-94"];
            var address = ["507 - 20th Ave. E. Apt. 2A", "908 W. Capital Way", "722 Moss Bay Blvd.", "4110 Old Redmond Rd.", "14 Garrett Hill", "Coventry House", "Miner Rd.", "Edgeham Hollow", "Winchester Way", "4726 - 11th Ave. N.E.", "7 Houndstooth Rd."];
            var city = ["Seattle", "Tacoma", "Kirkland", "Redmond", "London", "London", "London", "Seattle", "London"];

            var orders = [];
            var employeeID = ["1", "2", "3"];
            var shipNames = ["Peter", "Dimitar", "Maria"];
            var shipCities = ["New York", "Tokyo", "London"];

            var k = 0;
            for (var i = 0; i < firstNames.length; i++) {
                var row = {};
                row.EmployeeID = i + 1;
                row.FirstName = firstNames[k];
                row.LastName = lastNames[k];
                row.Title = titles[k];
                row.Address = address[k];
                row.City = city[k];
                data[i] = row;
                k++;
            }

            k = 0;
            for (i = 0; i < shipNames.length; i++) {
                var row2 = {};
                row2.EmployeeID = employeeID[k];
                row2.ShipName = shipNames[k];
                row2.ShipCity = shipCities[k];
                orders[i] = row2;
                k++;
            }

            var source = {
                localdata: data,
                datafields: [{
                    name: 'FirstName'
                }, {
                    name: 'LastName'
                }, {
                    name: 'Title'
                }, {
                    name: 'Address'
                }, {
                    name: 'City'
                }],
                id: 'EmployeeID',
                datatype: "array",
                async: false
            };

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

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

            var ordersSource = {
                localdata: orders,
                datafields: [{
                    name: 'EmployeeID',
                    type: 'string'
                }, {
                    name: 'ShipName',
                    type: 'string'
                }, {
                    name: 'ShipCity',
                    type: 'string'
                }],
                datatype: "array",
                async: false
            };

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

            // create nested grid.
            var initrowdetails = function (index, parentElement, gridElement, record) {
                var id = record.uid.toString();
                var grid = $($(parentElement).children()[0]);
                nestedGrids[index] = 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: 'ShipCity',
                        type: 'string'
                    }],
                    id: 'OrderID',
                    localdata: ordersbyid
                };

                var nestedGridAdapter = new $.jqx.dataAdapter(orderssource);

                if (grid !== null) {
                    grid.jqxGrid({
                        editable: true,
                        editmode: 'click',
                        selectionmode: 'singlecell',
                        source: nestedGridAdapter,
                        width: 600,
                        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: 670,
                height: 365,
                source: source,
                rowdetails: true,
                editable: true,
                editmode: 'click',
                selectionmode: 'singlecell',
                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
                }]
            });
        });

When the grid is rendered, please expand the 2nd row (the row with firstname Andrew), and click (just 1 click) on Peter and with Firefox 26 you will see that the cell don’t became edited, but remain fixed, if you click a second time, the cell begin to be edited.

If you click on Andrew, you will see that the cell will became immediately editable.

I hope to be of help.

Fiddle: http://jsfiddle.net/hrcsrl/QPb69/

Regards,

January 23, 2014 at 9:58 am editmode : click not working in subgrids with Firefox 26.0 #48267

hrc

Participant

Refreshed fiddle link: http://jsfiddle.net/hrcsrl/8AKJg/

January 23, 2014 at 1:03 pm editmode : click not working in subgrids with Firefox 26.0 #48283

Peter Stoev

Keymaster

Hi hrc,

The cell goes into edit mode as expected. However, the focus is not in the editor and that requires the additional click which puts the focus inside it. The solution is to call the editor’s focus method.

Example:

    columns: [{
                            text: 'Ship Name',
                            datafield: 'ShipName',
                            width: 200,
                            initeditor: function(row, column, editor)
                            {
                               setTimeout(function()
                               {editor.focus()}, 25);
                            }
                        }

or see the editor in the nested Grid’s first column: http://jsfiddle.net/Z8x8M/

Best Regards,
Peter Stoev

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

January 23, 2014 at 2:24 pm editmode : click not working in subgrids with Firefox 26.0 #48291

hrc

Participant

Hi Peter,

Thank you, now working. May I ask you why I have to insert the setTimeot with 25 millisecond wait?

Best regards,

January 23, 2014 at 2:37 pm editmode : click not working in subgrids with Firefox 26.0 #48292

Peter Stoev

Keymaster

Hi hrc,

Sometimes and in some browsers the Focusing of HTML Element requires a slight delay.

Best Regards,
Peter Stoev

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

January 23, 2014 at 3:11 pm editmode : click not working in subgrids with Firefox 26.0 #48295

hrc

Participant

Thank you SuperPeter!!!

Ciao,

Author

Posts

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

You must be logged in to reply to this topic.