Cell incorrectly editable…

[njaParticipant]

Hey there,
I have interesting UI behavior/problem.

After adding a row to this grid if the user starts typing they are automatically in the first (period) field, even though the editmode is set to click.

Is there a way to set the focus and have the editor enabled for the 2nd column (adjustment amount) in the newly added row?

This seems doable, get the cell and then trigger the cell’s click event, but I am having trouble pulling the code together (and, of course, I don’t understand why the first column is editable without the user clicking…)

thanks,
nja

            $("#jqxgrid").jqxGrid({
                source: source,
                width: '98%',
                autorowheight: true,
                autoheight: true,
                editable: true,
                selectionmode: 'singlerow',
                editmode: 'click',
                sortable: true,
                showsortmenuitems: false,
                showsortcolumnbackground: false,
                columnsresize: true,
                showstatusbar: true,
                showaggregates: true,
                altrows: true,
                theme: 'office',
                enabletooltips: true,
                enableellipsis: true,
                showtoolbar: true,
                rendertoolbar: function (toolbar) {
                    // 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;' title='Add a new Adjustment.'><span class='glyphicon glyphicon glyphicon-plus-sign' aria-hidden='true'></span> Add </div>");
                    var deleteButton = $("<div style='float: left; margin-left: 5px;' title='Delete the selected Adjustment.'><span class='glyphicon glyphicon glyphicon-minus-sign' aria-hidden='true'></span> Delete</div>");
                    var reloadButton = $("<div style='float: left; margin-left: 5px;' title='Reload grid. This will cancel any unsaved adjustments.'><span class='glyphicon glyphicon glyphicon-refresh' aria-hidden='true'></span> Refresh</div>");
                    container.append(addButton);
                    container.append(deleteButton);
                    container.append(reloadButton);
                    toolbar.append(container);
                    addButton.jqxButton({  width: 60, height: 18, theme: 'office' });
                    deleteButton.jqxButton({  width: 70, height: 18, theme: 'office'  });
                    reloadButton.jqxButton({  width: 70, height: 18, theme: 'office'  });
                    // add new row.
                    addButton.click(function (event) {
                        var datarow = generateNewRowData();
                        var value = $("#jqxgrid").jqxGrid('addrow', null, datarow[0]);

                        // save our new row blank row to the database
                        var url = '/ProjectionAdjustments/CreateFromGrid';
                        var id = @ViewBag.PRrecord;
                        $.post(url, { id: id}, function(data) {
                            if (data == ""){
                                // empty string is good
                                $("#messageNotificationSuccess").jqxNotification("open");
                                reloadButton.click();
                                commit(true);
                            }
                            else {
                                // there was a error display results
                                $("#resultMessage").html(data);
                                reloadButton.click();
                                commit(false);
                            }

                        });

                        // select the new row and highlight it
                        var lastrowindex = $(jqxgrid).jqxGrid('getrows').length - 1;
                        $('#jqxgrid').jqxGrid('selectrow', lastrowindex);
                        $('#jqxgrid').jqxGrid('focus');

                    });
                    // delete selected row.
                    deleteButton.click(function (event) {
                        // show modal dialog box
                        $('#myModal').modal({ keyboard: false });

                        $('#okaytodelete').on('click',function(evt) {
                            var selectedrowindex = $("#jqxgrid").jqxGrid('getselectedrowindex');
                            var datarow = $("#jqxgrid").jqxGrid('getrowdata', selectedrowindex);
                            var rowscount = $("#jqxgrid").jqxGrid('getdatainformation').rowscount;
                            var id = $("#jqxgrid").jqxGrid('getrowid', selectedrowindex);
                            $("#jqxgrid").jqxGrid('deleterow', id);

                            var url = "/ProjectionAdjustments/DeleteFromGrid";
                            var id = datarow.AdjustmentId;
                            $.post(url, { id: id}, function(data) {
                                $("#resultMessage").html(data);
                                reloadButton.click();

                            });

                            // close the modal
                            $('#myModal').modal('hide');

                        });

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

                    });
                },
                columns: [
                    { text: 'Period', datafield: 'Period', width: '10%', hidden: false, editable: true, columntype: 'numberinput',
                        validation: function (cell, value) {
                            if (value < 1 || value > 13) {
                                return { result: false, message: "Period should be between 1-13." };
                            }
                            return true;
                        },
                        createeditor: function (row, cellvalue, editor) {
                            editor.jqxNumberInput({ decimalDigits: 0, digits: 2 });
                        },
                        cellbeginedit: cellbeginedit, cellsrenderer: cellsrenderer
                    },
                    { text: 'Adj. Amount', datafield: 'AdjustmentAmount', cellsformat: 'f2', cellsalign: 'right', width: '14%', hidden: false, editable: true,
                        aggregates: [{
                            'Total': function(aggregatedValue, currentValue, column, record) {
                                var total = parseFloat(record['AdjustmentAmount']);
                                if (isNaN(total)) {
                                    total = 0.00;
                                }
                                return aggregatedValue + total;
                            }}],
                        aggregatesrenderer: function(aggregates) {
                            var renderstring = aggregates["Total"];
                            return '<span class="allViewSummary" title="Total Projected">' + renderstring + '</span>';
                        },
                        cellbeginedit: cellbeginedit, cellsrenderer: cellsrenderer
                    },
                    { text: 'Comment', datafield: 'Comment', width: '56%', hidden: false, editable: true, cellbeginedit: cellbeginedit, cellsrenderer: cellsrenderer },
                    { text: 'Who', datafield: 'LastEditedBy', width: '10%', hidden: false, editable: false },
                    { text: 'When', datafield: 'LastEditedAt', cellsformat: 'MM-dd-yyyy hh:mm tt', width: '10%', hidden: false, editable: false },
                    { text: 'Active', datafield: 'Active', width: '10%', hidden: true, editable: false },
                    { text: 'Fiscal Year', datafield: 'FiscalYear', width: '10%', hidden: true, editable: false },
                    { text: 'AdjustmentId', datafield: 'AdjustmentId', width: '10%', hidden: true, editable: false },
                    { text: 'RecordId', datafield: 'RecordId', width: '10%', hidden: true, editable: false },
                    { text: 'CreatedAt', datafield: 'CreatedAt', width: '10%', hidden: true, editable: false },
                    { text: 'CreatedBy', datafield: 'CreatedBy', width: '10%', hidden: true, editable: false },
                ]
            });

            $('#jqxgrid').on('cellvaluechanged', function (event) {
                //var args = event.args; // event arguments.
                //var datafield = event.args.datafield;  // column data field.
                //var rowBoundIndex = args.rowindex; // row's bound index.
                //var value = args.newvalue;  // new cell value.
                //var oldvalue = args.oldvalue;  // old cell value.

                var rowBoundIndex = args.rowindex; // row's bound index.
                var datarow = $("#jqxgrid").jqxGrid('getrowdata', rowBoundIndex);
                var url = "/ProjectionAdjustments/EditFromGrid";
                var id = datarow['AdjustmentId'];
                var period = datarow['Period'];
                var amount = datarow['AdjustmentAmount'];
                var comment = datarow['Comment'];

                $.post(url, { id: id, period: period, amount: amount, comment: comment}, function(data) {
                    if (data == ""){
                        // empty string is good
                        $("#messageNotificationSuccess").jqxNotification("open");
                        commit(true);
                    }
                    else {
                        // there was a error, display results
                        $("#resultMessage").html(data);
                        commit(false);

                    }

                });

            });

[Peter StoevKeymaster]

Hi nja,

The code which you have posted contains things which are incorrectly written. For example – what is that commit call ? This is part of the updaterow callback of the source object which is not implemented at all. This should not be put within cellvaluechanged and this would Throw an Error and it should throw it because it’s incorrect. For editing cells on click, refer to http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/celleditmodes.htm?arctic. Clicking on a cell in the second column opens the cell’s editor and you can edit it.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[njaParticipant]

Hi Peter,
I am happy to pull out the commit() since you say it is wrong.

Functionally, what happens is when a cell is changed I run an ajax call to update the database and show a success or failure message to the user. That has been working fine. Can you explain why I should not do it in the cell changed event?

Even if I switch my grid to the select mode and edit mode that you use in the example the (selectionmode: ‘singlecell’, editmode: ‘click’,) if the user types a number they start editing in the first grid cell (after adding a new row).

If it was possible to select the cell and make the editor open/active that should address the users problem.

thanks,
nja

[Author]

Posts