[hrcParticipant]

Thank you SuperPeter!!!

Ciao,

D.

[hrcParticipant]

Hi Peter,

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

Best regards,

D.

[hrcParticipant]

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

[hrcParticipant]

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,

D.

[hrcParticipant]

Hi Omer,

use $(“#jqxgrid”).jqxGrid(‘addrow’, 1 , row, ‘first’)

The last parameter of the addrow method is optional. You can use values like: “first” and “last”(default value). If you pass “first”, the new row will be added as a first row.

Regards,

D.

[hrcParticipant]

Hi Peter,

sorted out, I was creating a new field in the row, called id, I mispelled the case…

Now is all ok.

Thenk you!

D.

[hrcParticipant]

Hi Peter,

following is the complete code:

<div id="jqxgrid">
</div>
<textarea id="log" cols="80" rows="10"></textarea>

@section scripts
{   
    <link rel="stylesheet" type ="text/css" href="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/jqx.base.css"  />
    <script type="text/javascript" src="http://jqwidgets.com/jquery-widgets-demo/scripts/jquery-1.10.2.min.js"> </script>
    <script type="text/javascript" src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqx-all.js"> </script>

    <script type="text/javascript">
        $(document).ready(function() {

            var inEdit = false;
            var inAdd = false;
            var editColumn = null;
            var editRow = null;
            var editValue = null;
            var editOldValue = null;

            var nestedGrids = new Array();

            var initrowdetails = function(index, parentElement, gridElement, record) {

                var id = record.uid.toString();

                var grid = $($(parentElement).children()[0]);

                nestedGrids[index] = grid;

                var orderssource = {
                    datatype: "json",
                    datafields: [
                        { name: 'Id', type: 'number' },
                        { name: 'VariantId', type: 'number' },
                        { name: 'VariantLanguageISOCode', type: 'string' },
                        { name: 'VariantDescriptionText', type: 'string' }
                    ],
                    id: "Id",
                    url: 'Variant3/GetVariantDescriptions?id=' + id,

                    updaterow: function(rowid, rowdata, commit) {
                        var data = $.param(rowdata);
                        $.ajax({
                            cache: false,
                            dataType: 'json',
                            url: 'Variant3/EditVariantDescription',
                            type: "POST",
                            data: data,
                            success: function(data, status, xhr) {
                                log("data: " + data + " status: " + status + " xhr: " + xhr);
                                commit(true);
                            },
                            error: function(jqXHR, textStatus, errorThrown) {
                                alert(jqXHR.statusText);
                                log("jqXHR: " + jqXHR + " textStatus: " + textStatus + " Error: " + errorThrown);
                                commit(false);
                            }
                        });
                    }
                };

                var nestedGridAdapter = new $.jqx.dataAdapter(orderssource);
                if (grid != null) {
                    grid.jqxGrid({
                        source: nestedGridAdapter,
                        //autoheight: true,
                        height: 100,
                        width: 400,
                        editable: true,
                        selectionmode: 'singlecell',
                        editmode: 'click',
                        columns: [
                            { text: "Id", editable: false, datafield: "Id" },
                            { text: "Variant Language ISO Code", datafield: "VariantLanguageISOCode" },
                            { text: "Variant Description Text", datafield: "VariantDescriptionText" }
                        ],
                    });
                }
            };

            var source =
            {
                datatype: "json",
                datafields: [
                    { name: 'Id', type: 'number' },
                    { name: 'VariantDefaultDescriptionText', type: 'string' }
                ],
                id: "Id",
                url: 'Variant3/GetVariants',

                addrow: function(rowid, rowdata, position, commit) {
                    log("rowdata: " + rowdata.id);
                    var data = $.param(rowdata);
                    $.ajax({
                        cache: false,
                        dataType: 'json',
                        url: 'Variant3/AddVariant',
                        data: data,
                        type: "POST",
                        success: function(data, status, xhr) {
                            log("data: " + data + " status: " + status + " xhr: " + xhr);
                            commit(true);
                        },
                        error: function(jqXHR, textStatus, errorThrown) {
                            alert("Status: " + jqXHR.statusText + " Error: " + errorThrown);
                            log("jqXHR: " + jqXHR + " textStatus: " + textStatus + " Error: " + errorThrown);
                            commit(false);
                        }
                    });
                },

                deleterow: function(rowid, commit) {
                    log("rowid: " + rowid);
                    $.ajax({
                        dataType: 'json',
                        cache: false,
                        url: 'Variant3/Delete?id=' + rowid,
                        type: "POST",
                        success: function(data, status, xhr) {
                            log("data: " + data + " status: " + status + " xhr: " + xhr);
                            commit(true);
                        },
                        error: function(jqXHR, textStatus, errorThrown) {
                            alert("Status: " + jqXHR.statusText + " Error: " + errorThrown);
                            log("jqXHR: " + jqXHR + " textStatus: " + textStatus + " Error: " + errorThrown);
                            commit(false);
                        }
                    });
                },

                updaterow: function(rowid, rowdata, commit) {
                    var data = $.param(rowdata);
                    $.ajax({
                        cache: false,
                        dataType: 'json',
                        url: 'Variant3/EditVariant',
                        type: "POST",
                        data: data,
                        success: function(data, status, xhr) {
                            log("data: " + data + " status: " + status + " xhr: " + xhr);
                            commit(true);
                        },
                        error: function(jqXHR, textStatus, errorThrown) {
                            alert("Status: " + jqXHR.statusText + " Error: " + errorThrown);
                            log("jqXHR: " + jqXHR + " textStatus: " + textStatus + " Error: " + errorThrown);
                            commit(false);
                        }
                    });
                }
            };

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

            $("#jqxgrid").jqxGrid(
                {
                    width: 600,
                    height: 400,
                    //theme: 'energyblue',
                    altrows: true,
                    pageable: true,
                    sortable: true,
                    filterable: true,
                    //                    autoheight: true,
                    pagesizeoptions: ['10', '20', '30', '40'],
                    source: dataAdapter,
                    rowdetails: true,
                    //rowsheight: 35,
                    initrowdetails: initrowdetails,
                    rowdetailstemplate: { rowdetails: "<div id='grid' style='margin: 10px;'></div>", rowdetailsheight: 120, rowdetailshidden: true },
                    ready: function() {
                        //    $("#jqxgrid").jqxGrid('showrowdetails', 1);
                    },
                    editable: true,
                    selectionmode: 'singlecell',
                    editmode: 'click',
                    columns: [
                        { text: "Id", editable: false, datafield: "Id" },
                        { text: "Variant Default Description Text", datafield: "VariantDefaultDescriptionText" }
                    ],
                    showstatusbar: true,
                    renderstatusbar: function(statusbar) {
                        // appends buttons to the status bar.
                        var container = $("<div style='overflow: hidden; position: relative; margin: 5px;'></div>");
                        var addButton = $("<div style='float: left; margin-left: 5px;'><img style='position: relative; margin-top: 2px;' src='../../images/add.png'/><span style='margin-left: 4px; position: relative; top: -3px;'>Add</span></div>");
                        var deleteButton = $("<div style='float: left; margin-left: 5px;'><img style='position: relative; margin-top: 2px;' src='../../images/close.png'/><span style='margin-left: 4px; position: relative; top: -3px;'>Delete</span></div>");
                        var reloadButton = $("<div style='float: left; margin-left: 5px;'><img style='position: relative; margin-top: 2px;' src='../../images/refresh.png'/><span style='margin-left: 4px; position: relative; top: -3px;'>Reload</span></div>");
                        var searchButton = $("<div style='float: left; margin-left: 5px;'><img style='position: relative; margin-top: 2px;' src='../../images/search.png'/><span style='margin-left: 4px; position: relative; top: -3px;'>Find</span></div>");
                        container.append(addButton);
                        container.append(deleteButton);
                        container.append(reloadButton);
                        container.append(searchButton);
                        statusbar.append(container);
                        addButton.jqxButton({ width: 60, height: 20 });
                        deleteButton.jqxButton({ width: 65, height: 20 });
                        reloadButton.jqxButton({ width: 65, height: 20 });
                        searchButton.jqxButton({ width: 50, height: 20 });

                        // add new row.
                        addButton.click(function (event) {
                            log("isEditing: " + isEditing());
                            if (!inAdd) {
                                log("Adding row");
                                inAdd = true;
                                var rowid = $("#jqxgrid").jqxGrid('getdatainformation').rowscount + 1;
                                var row = new Object;
                                row["id"] = -1;
                                $("#jqxgrid").jqxGrid('addrow', rowid, row, 'top');
                                alert("Wait for new line");
                                $("#jqxgrid").jqxGrid('begincelledit', rowid, 'VariantDefaultDescriptionText');
                                // I need to activate the input box inside the grid!
                                $("#textboxeditorjqxgridVariantDefaultDescriptionText").trigger("click");
                                log("Virtual clicking");
                                $('#textboxeditorjqxgridVariantDefaultDescriptionText').show();
                                $('#textboxeditorjqxgridVariantDefaultDescriptionText').focus();
                                $('#textboxeditorjqxgridVariantDefaultDescriptionText').click();
                                $("#textboxeditorjqxgridVariantDefaultDescriptionText").click();
                            }
                        });

                        // delete selected row.
                        deleteButton.click(function(event) {
                            var selectedrowindex = $("#jqxgrid").jqxGrid('getselectedcell');
                            log("selectedrowindex.rowindex: " + selectedrowindex.rowindex);
                            var rowscount = $("#jqxgrid").jqxGrid('getdatainformation').rowscount;
                            log("rowscount: " + rowscount);
                            var id = $("#jqxgrid").jqxGrid('getrowid', selectedrowindex.rowindex);
                            log("Delete id: " + id);
                            $("#jqxgrid").jqxGrid('deleterow', id);
                        });

                        // reload grid data.
                        reloadButton.click(function(event) {
                            $("#jqxgrid").jqxGrid({ source: getAdapter() });
                        });

                        // search for a record.
                        searchButton.click(function(event) {
                            var offset = $("#jqxgrid").offset();
                            $("#jqxwindow").jqxWindow('open');
                            $("#jqxwindow").jqxWindow('move', offset.left + 30, offset.top + 30);
                        });

                        $("#jqxgrid").on('cellbeginedit', function(event) {
                            log("inEdit true");
                            inEdit = true;
                            editColumn = args.datafield;
                            editRow = args.rowindex;
                            editValue = args.value;
                        });
                        
                        $("#jqxgrid").on('cellendedit', function(event) {
                            log("inEdit false");
                            editColumn = args.datafield;
                            editRow = args.rowindex;
                            editValue = args.value;
                            editOldValue = args.oldvalue;
                            inEdit = false;
                            inAdd = false;
                        });
                    },
                });

            //to check whether any row is currently being edited.

            function isEditing() {
                if (inEdit) {
                    return true;
                }
                return false;
            }

            function log(message) {
                var log = $('#log'),
                    value = $.trim(log.val());

                $('#log').val($('#log').val() + (value.length ? '\n' : '') + message);
            }
        });

    </script>
}

As you can see, what I’m trying to do is that after the user clicked the AddButton, I would like to activate (with the cursor flashing into it) a cell of the new row. I’m trying this with inside the addbutton event. The problem thatI not able to activate this cell, even if I’m using the begincelledit method.

May you help me?

Best regards,

D.

[Author]

Posts