Forums Ignite UI for jQuery
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Paul Decristoforo
2350
igGrid - GridEditMode.Row need to set readonly for columns depending on the data
posted

Hello,

I have a grid which I'm using editMode: "row" to edit the data. We have a requirement where the editable columns are dependent on the data. For example, we are sending an extra Field1Readonly and Field2Readonly fields with the grid data. If Filed1Readonly is true, then Field1 cannot be edited. The same goes for Field2. This can vary from row-to-row.

We had an implementation of this working in version 15.2. We are attempting to upgrade to version 17.1, but we are unable to get this functionality to work in 17.1. I couldn't find anything specifically in the release notes that indicated there was a change to the events we are using. One thing that happens now is that the Done button stays disabled most of the time. This appears to be happening because we are canceling the iggridupdatingeditcellstarting event for the fields that we don't want to edit; however, this wasn't an issue in 15.2.

Here is generally what we are doing in 15.2:

        $(document).delegate("#grid1", "iggridupdatingeditcellstarting", function (evt, ui) {
            var updatingFeature = GetGridFeature(ui.owner.grid, "Updating");
            if (updatingFeature) {
                var colSetting;
                for (var i = 0; i < updatingFeature.columnSettings.length; i++) {
                    colSetting = updatingFeature.columnSettings[i];
                    if (colSetting.columnKey == ui.columnKey) {
                        if (colSetting.editorOptions.readOnly) {
                            //We have to manually stop the edit mode.  For some reason the infragistics code does not do this automatically if this property changes back and forth
                            return false;
                        }
                        else {
                            $(ui.editor).find('input').removeAttr('readonly');
                        }
                    }
                }
            }
        });
        $(document).on("iggridupdatingeditrowstarted", "table.ui-iggrid-table", function (event, ui) {
            // Enable calculate button
            $('#grid1_updating_done').removeClass('ui-state-disabled').removeClass('ui-iggrid-buttondisabled');
           
            var updatingFeature = GetGridFeature(ui.owner.grid, "Updating");
            if (updatingFeature) {
                var colSetting;
                for (var i = 0; i < updatingFeature.columnSettings.length; i++) {
                    colSetting = updatingFeature.columnSettings[i];
                    if (colSetting.columnKey == ui.columnKey) {
                        //If the field we are clicking on is not read only, then focus that field. Otherwise, focus Field1
                        var editor;
                        if (!colSetting.editorOptions.readOnly) {
                            editor = ui.owner.editorForKey(ui.columnKey);
                        }
                        else
                        {
                            editor = ui.owner.editorForKey("Field1");
                        }
                        editor.igEditor("setFocus", true);
                        return;
                    }
                }
            }
        });
        //Bind after initialization
        $(document).delegate("#grid1", "iggridupdatingeditrowstarting", function (evt, ui) {
            var rowID = ui.rowID;
            var row = $('#grid1').igGrid("findRecordByKey", rowID);
            var updatingFeature = GetGridFeature(grid, "Updating");
            if (updatingFeature) {
                var colSetting;
                for (var i = 0; i < updatingFeature.columnSettings.length; i++) {
                    colSetting = updatingFeature.columnSettings[i];
                    if (colSetting.columnKey === 'Field1') {
                        colSetting.readOnly = row["Field1ReadOnly"];
                        colSetting.editorOptions.readOnly = row["Field1ReadOnly"];
                    }
                    else if (colSetting.columnKey === 'Field2')  {
                        colSetting.readOnly = row["Field2ReadOnly"];
                        colSetting.editorOptions.readOnly = row["Field2ReadOnly"];
                    }
                }
            }
        });
        function GetGridFeature(grid, feature) {
            if (typeof grid.options.features == 'undefined')
                return null;
            for (var i = 0, len = grid.options.features.length; i < len; i++) {
                if (grid.options.features[i].name === feature)
                    return grid.options.features[i];
            }
            return null;
        }

Thanks,

Paul