Hello Indra,

I have been looking into your question and your requirements can be achieved by setting the columns in the igGrid initially to be not read-only but editable. This can be done by enabling the Updating feature and in the ColumnSettings set the columns not to be read-only.

features.Updating().
             ColumnSettings(settings =>
             {
                 settings.ColumnSetting().ColumnKey("CustomerID").ReadOnly(false);
                 settings.ColumnSetting().ColumnKey("CompanyName").ReadOnly(false);
             });

After that, the addition of rows in the igGrid as well as the editing of rows will be enabled. The editRowStarting event of the igGrid will also be handled by adding an AddClientEvent of type GridUpdatingClientEvents.EditRowStartin. Another event that should be handled is the editRowEnded event of the igGrid, also added with AddClientEvent of type GridUpdatingClientEvents.EditRowEnded.

features.Updating().
EnableAddRow(true).
AddClientEvent(GridUpdatingClientEvents.EditRowStarting, "editRowStarting").
AddClientEvent(GridUpdatingClientEvents.EditRowEnded, "editRowEnded").
EditMode(GridEditMode.Row)

A script tag in the view will be created and will handle editRowStarting by creating the function of the same name with the event and object parameters. After that, the column settings of the grid will be taken to check which columns are set not to be read-only.

The editRowStarting event is fired both when editing a row and when adding, so after firing the event, it will be checked if the event is executed for editing a row, and if so, the readOnly property of the given columns will be set to true and the changes will be applied with columnSettings scope.

function editRowStarting(evt, ui) {
         var grid = $("#grid1");
         var colSettings = $("#grid1").igGridUpdating("option", "columnSettings");
         if(ui.rowAdding === false){
             colSettings[0].readOnly = true;
             colSettings[1].readOnly = true;
             grid.igGridUpdating("option", "columnSettings", colSettings);
         }
     }

However, this, in turn, will cause the columns to be read-only for the future, so editRowEnded will be handled, and when the event is fired after adding or editing a row, the columns will return to their initial state in an identical way, as here the readOnly property will be set to false.

function editRowEnded(evt, ui) {
        var grid = $("#grid1");
        var colSettings = $("#grid1").igGridUpdating("option", "columnSettings");
        colSettings[0].readOnly = false;
        colSettings[1].readOnly = false;
        grid.igGridUpdating("option", "columnSettings", colSettings);
    }

The described scenario could be observed here:

In addition, I have prepared small sample illustrating this behavior which could be found attached here. Please test it on your side and let me know how it behaves.

0385.igGridReadOnly.zip

If you require any further assistance on the matter, please let me know.

Regards,

Georgi Anastasov

Entry Level Software Developer

Infragistics