Activating a cell after addrow

[hrcParticipant]

Dear Sirs,

I’m trying to activate the first cell of the ‘top’ row of a grid, following the code snippet for the addButton:

                        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');
                                $("#jqxgrid").jqxGrid('begincelledit', rowid, 'VariantDefaultDescriptionText');
                                // I need to activate the input box inside the grid!
                             
                                log("Virtual clicking");
                                $('#textboxeditorjqxgridVariantDefaultDescriptionText').show();
                                $('#textboxeditorjqxgridVariantDefaultDescriptionText').focus();
                                $('#textboxeditorjqxgridVariantDefaultDescriptionText').click();
                                $("#textboxeditorjqxgridVariantDefaultDescriptionText").click();
                            }

following the code for the begin and end on the cell:

                        $("#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;
                            // Check inAdd flag, if is true we was in adding row, then check for the content of the new line
                            inEdit = false;
                        });

May you sudgest me a working solution? What I’m trying to achive is to add a new row in top of the grid, and setting a flag like inAdd = true, disabling all other controls in the grid, focus the user in the activated cell/row, and if the user click somewhere outside this row, if valid sent as update the line to the database, if invalid I cancel it. The problem is that if I cannot activate the input, the cellbeginedit don’t fire and then the logic cannot go on. Also I noticed that cellendedit is not triggered when the user click on the sort arrows and in some other parts of the grid, is possible to be fired always when an user click outside the cell?

Thank you for your help.

D.

[Peter StoevKeymaster]

Hi hrc,

cellbeginedit is raised when a cell goes into edit mode, not when a row is added. You can look at the “begincelledit” method in the API documentation for bringing a cell into edit mode.

Best Regards,
Peter Stoev

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

[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.

[Peter StoevKeymaster]

Hi hrc,

If the cursor is not flashing in your editor after calling “begincelledit”, that means that the editor is not on Focus. To put it on focus, you will have to click in it.

Best Regards,
Peter Stoev

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

[Author]

Posts