Author Topic: In-Grid Edit is not working  (Read 1447 times)

SDS

  • Pro Enterprise
  • Newbie
  • *
  • Posts: 9
  • Suresh
    • View Profile
In-Grid Edit is not working
« on: January 03, 2026, 09:08:03 pm »
Till date, we have been using the option to edit data in-grid. but it suddenly stopped without any code changes. I am not able to trace the error. please find below the code which we use and guide. Surprisingly, i am able to paste (Ctrl-V) into the editable cells and able to delete existing content (Del key), but not able to type anything. Columns are of different types (Text, Numeric and Date). none of them are working. I tried breakpoint at editorBegin: event but it doesn't hit too. (I have attached the ColModel for your reference)

Thanks in advance.

    function GridReload() {
        //$('.spinner').show();
        try { $("#list").pqGrid("destroy"); } catch { }
        var mcolModel, ColTypes, ClrCond;
        var mtotalrec = 0;
        mallowEdit = false;
        if ("@ViewBag.Header" == "My Menu" || "@ViewBag.Header" == "Dashboard Objects" || '@Model.ViewDataId' == 'MyMenu' || '@Model.ViewDataId' == 'DashboardObjects' || '@Model.OptionCode' == "OFWFormDesigner" || '@Model.OptionCode' == "OFWDocDesigner")
        {
            var murlcolModel = "/Setup/MasterGrid/GetGridStructureRecords/[email protected]&mformatcode=" + $("#formats").val() + '&TableName=' + '@ViewBag.Table' + '&AcType=' + '@Model.MainType' + '&MainType=' + $("#Modules").val();
            $("#hdnparastring").val('&mParaString=AcType^' + '@Model.MainType' + '~MainType^' + $("#Modules").val());
        }else
        {
            var murlcolModel = "/Setup/MasterGrid/GetGridStructureRecords/[email protected]&mformatcode=" + $("#formats").val() + '&TableName=' + '@ViewBag.Table' + '&AcType=' + '@Model.MainType' + '&MainType=' + '@Model.MainType';
            $("#hdnparastring").val('&mParaString=AcType^' + '@Model.MainType' + '~MainType^' + '@Model.MainType');
        }
        $.ajax({
            url: murlcolModel,
            type: "POST",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {
                var obj = $.parseJSON(data);
                mallowEdit = obj[0].substring(0, 1) == "Y";
                mcolModel = obj[1];
                //ColTypes = obj[3].split(",");
                //ClrCond = obj[4].split(",");
                CreateGridData();
                $('.spinner').hide();
            },
            error: function (jqXHR, textStatus, errorThrown) {
                alert("Server Side Error!");
            }
        });

        function CreateGridData() {
            //for (var i = 0; i < mcolModel.length - 1; ++i) {
            //    if (mcolModel["type"] != null && mcolModel["type"] == "checkbox") {
            //        mcolModel["cb"] = JSON.parse('{ "all": "false", "header": "false"}');
            //    }
            //}
            var mgroupModel = {
                on: true,
                merge: false,
                fixCols: true,
                showSummary: [true], //to display summary at end of every group.
                grandSummary: true
            };
            if ("@ViewBag.Header" == "My Menu" || "@ViewBag.Header" == "Dashboard Objects" || '@Model.ViewDataId' == 'MyMenu' || '@Model.ViewDataId' == 'DashboardObjects' || '@Model.OptionCode' == "OFWFormDesigner" || '@Model.OptionCode' == "OFWDocDesigner")
            {
                var murldataModel = "/Setup/MasterGrid/[email protected]&MainType=" + $("#Modules").val() + "&ViewDataId=" + $("#formats").val() + '&searchField=' + $('#searchField').val() + '&searchString=' + $('#searchString').val() + '&searchOper=' + $('#searchOper').val();
            }else
            {
                var murldataModel = "/Setup/MasterGrid/[email protected]&[email protected]&ViewDataId=" + $("#formats").val() + '&searchField=' + $('#searchField').val() + '&searchString=' + $('#searchString').val() + '&searchOper=' + $('#searchOper').val();
            }
            var mdataModel = {
                location: "remote",
                dataType: "JSON",
                method: "POST",
                url: murldataModel,
                sorting: "local",
                paging: "local",
                recIndx: "Document",
                getData: function (dataJSON, textStatus, jqXHR) {
                    mtotalrec = dataJSON.totalRecords;
                    return { curPage: dataJSON.curPage, totalRecords: dataJSON.totalRecords, data: dataJSON.data };
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    var mmsg = jqXHR.responseText.replace('{', '').replace('}', '');
                    mmsg = mmsg.replace('"Message":"', '');
                    mmsg = mmsg.replace('"', '')
                    alert('Error!\n' + mmsg);
                    //alert(errorThrown);
                }
            };
            // edit
            mcolModel[0].skipFocus = true;
            if (mallowEdit == false) {
                mcolModel[0].render = Function("ui", "return \"<button type = 'button' style='width:35px;height:20px;' class= 'edit_btn' >Edit</button>\";");
            } else {
                mcolModel[0].render = Function("ui", "return \"<button type = 'button' style='width:35px;height:20px;' class= 'edit_btn' >Save</button>\";");
            }
            //mcolModel[0].render = Function("ui", "return \"<button type = 'button' style='width:40px;height:20px;' class= 'edit_btn' >Edit<i class='ui-icon-pencil'></i>\";");
            var mfunc = "var rowIndx = ui.rowIndx,grid = this,$cell = grid.getCell(ui);";
            mfunc += "$cell.find(\".edit_btn\").button()";
            mfunc += ".on(\"click\"," + Function("evt", "editRow(rowIndx, grid);") + ");";
            //mfunc += ".on(\"click\"," + Function("evt", "if (isEditing(grid)) {return false;} editRow(rowIndx, grid, true);") + ");if (grid.hasClass({ rowData: ui.rowData, cls: 'pq-row-edit' })) { editRow(rowIndx, grid);} ";
            mcolModel[0].postRender = Function("ui", mfunc);
            // delete
            mcolModel[1].skipFocus = true;
            mcolModel[1].render = Function("return \"<button type = 'button' style='width:35px;height:20px;' class= 'delete_btn' >Del</button>\";");
            var mfunc = "var rowIndx = ui.rowIndx,grid = this,$cell = grid.getCell(ui);";
            mfunc += "$cell.find(\".delete_btn\").button({ icons: { primary: 'ui-icon-scissors'} })";
            mfunc += ".on(\"click\"," + Function("evt", "deleteRow(rowIndx, grid);") + ");";
            mcolModel[1].postRender = Function("ui", mfunc);
            if (mallowEdit == false) {
                // view
                mcolModel[2].skipFocus = true;
                mcolModel[2].render = Function("return \"<button type = 'button' style='width:35px;height:20px;' class= 'view_btn' >View</button>\";");
                var mfunc = "var rowIndx = ui.rowIndx,grid = this,$cell = grid.getCell(ui);";
                mfunc += "$cell.find(\".view_btn\").button({ icons: { primary: 'ui-icon-search'} })";
                mfunc += ".on(\"click\"," + Function("evt", "viewRow(rowIndx, grid);") + ");";
                mcolModel[2].postRender = Function("ui", mfunc);
                // Print
                mcolModel[3].skipFocus = true;
                mcolModel[3].render = Function("return \"<button type = 'button' style='width:35px;height:20px;' class= 'print_btn' >Print</button>\";");
                var mfunc = "var rowIndx = ui.rowIndx,grid = this,$cell = grid.getCell(ui);";
                mfunc += "$cell.find(\".print_btn\").button({ icons: { primary: 'ui-icon-print'} })";
                mfunc += ".on(\"click\"," + Function("evt", "printRow(rowIndx, grid);") + ");";
                mcolModel[3].postRender = Function("ui", mfunc);
            }

            var gridobj = {
                colModel: mcolModel,
                dataModel: mdataModel,
                postRenderInterval: -1, //synchronous post rendering.
                collapsible: false,
                showTitle: false,
                showToolbar: false,
                roundCorners: true,
                menuIcon: true,
                freezeCols: 0,
                freezeRows: 0,
                scrollModel: { autoFit: false },
                height: $(window).height() - 154,/*38 for search panel*/
                numberCell: { resizable: false, width: 30, title: "#" },
                resizable: false,
                editable: true,
                wrap: true,
                flex: { one: true },
                pageModel: { type: "remote", height: 30, strRpp: "{0}", strDisplay: "{0} to {1} of {2}", rPP: 100, rPPOptions: [20, 50, 100, 200, 500, 1000, 5000, 10000] },
                //pageModel: { type: "local", rPP: 50, strRpp: "{0}", strDisplay: "{0} to {1} of {2}" },
                //editor: { type: 'textbox', select: true, style: 'outline:none;' },
                //validation: { icon: 'ui-icon-info' },
                rowInit: function (ui) {
                    //$('.edit_btn').html('<img src="/Content/Images/edit-icon.png" />');
                    //$('.delete_btn').html('<img src="/Content/Images/delete-icon.ico" />');
                    //$('.view_btn').html('<img src="/Content/Images/print-icon.ico" />');
                    return {
                        //style: { "background": "yellow" } //can also return attr (for attributes) and cls (for css classes) properties.
                    };
                },
                editorBegin: function (evt, ui) {
                    debugger;
                },
                rowClick: function (event, ui) {
                    currentrow = ui.rowIndx;
                    $("#page-subgrid").hide();
                    $('#SelectedDocument').val(this.pdata[ui.rowIndx]["Document"]);
                    if ("@ViewBag.DrillQuery" != "")
                        GridReload2(this.pdata[ui.rowIndx]["Document"]);
                        //GridReload2($.trim(this.pdata[ui.rowIndx]["Document"]));
                    //GridReload2($.trim(pq.grid("#list").pdata[ui.rowIndx]["Document"]));
                },
                cellDblClick: function (event, ui) {
                    currentrow = ui.rowIndx;
                },
                complete: function (event, ui) {
                    if ("@ViewBag.DrillQuery" != "") {
                        //var mdoc = $.trim(this.pdata[1]["Document"]);
                        var mdoc = this.pdata[0]["Document"];
                        GridReload2(mdoc);
                    }
                    //$('.edit_btn').html('<img src="/Content/Images/edit-icon.png" />');
                    //$('.delete_btn').html('<img src="/Content/Images/delete-icon.ico" />');
                    //$('.view_btn').html('<img src="/Content/Images/print-icon.ico" />');
                    //for (var i = 0; i < mtotalrec; i++) {
                    //    var ed = "<button type='button' href='' id='btnEdit" + i + "' value='" + i + "' style='padding:0px;font-size:20px;' class='btn editdelete' tooltip='Edit' , title='Edit' , attr='" + i + "'><i class='fa fa-edit'></i>";
                    //    jQuery("#list").pqGrid('setRowData', i, { .XEdit: ed });
                    //}
                    //    var column = grid.getColumn({ dataIndx: ".XEdit" });
                    //    var rows = grid.getRowsByClass({ cls: 'pq-grid-row' });
                    //    rowData = grid.getRowData({ rowIndx: rowIndx })
                    //    return null;
                }
                //,create: function () {
                //    var obj = $.paramquery.tableToArray($("#list"));
                //    obj.colModel[0].render = function (ui) {
                //        return "<button type='button' class='edit_btn'>Edit</button>\<button type='button' class='delete_btn' id='btnUpd'>Delete</button>";
                //    }
                //}
            };
            //$("#list").pqGrid(gridobj);
            //var grid = pq.grid("#list", gridobj);
            pq.grid("#list", gridobj);
        }
    }
« Last Edit: January 03, 2026, 09:17:52 pm by SDS »

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6552
    • View Profile
Re: In-Grid Edit is not working
« Reply #1 on: January 05, 2026, 10:49:11 am »
it's difficult to detect issue without a jsfiddle.

Kindly share a small test case with reproducible issue on jsfiddle or stackblitz.