Allow edit on all columns for new rows, but disable edit for certain columns on existing rows

[Niels Van Goethem]

Dear, I am using a grid, and want to be able to add records. Some columns should contain a value, which cannot be changed when the record is added, so what I want to achieve, is that if a record exists, that certain columns are not editable, while still being editable when adding a new record. Maybe I can base of primary key?

[Aishwarya Rameshbabu]

Hi Niels Van Goethem,

Greetings from Syncfusion support.

Upon reviewing your query, we have noticed that you need to disable editing for specific columns while still allowing the addition of new records to those columns. In the Syncfusion Grid, you can achieve this by setting the 'allowEditing' property of the desired column to false. To enable the addition of new records to these columns, you need to activate the input field of the column within the Grid's 'actionComplete' event. For further information, please refer to the provided code example and sample which illustrate disabling editing for the 'Customer ID’ and 'Ship Name’ columns while enabling the addition of new records to these columns.

App.component.html

 

        <ejs-grid #normalgrid id='Normalgrid' [dataSource]='data' allowPaging='true' [editSettings]='editSettings' [toolbar]='toolbar' (actionComplete)='actionComplete($event)'>

            <e-columns>

                <e-column field='OrderID' headerText='Order ID' width='140' textAlign='Right' isPrimaryKey='true'></e-column>

                <e-column field='CustomerID' headerText='Customer ID' width='140' [allowEditing]='false'></e-column>

                <e-column field='ShipName' headerText='Ship Name' width='150' [allowEditing]='false'></e-column>

                <e-column field='ShipCity' headerText='Ship City' width='140'></e-column> 

                <e-column field='ShipCountry' headerText='Ship Country' width='150'></e-column>

            </e-columns>

        </ejs-grid>

 

App.component.ts

 

    actionComplete(args: any) :void {

        if (args.requestType === 'add') {

            this.grid.columns.forEach(function(column) {

                if (!column.allowEditing) {

                    var inputElement = document.querySelector('input[name="' + column.field + '"]');

                    if (inputElement) {

                        (inputElement as any).ej2_instances[0].enabled = true;

                    }

                }

            });

        }

    }

 

Sample: Zhqm3f (forked) - StackBlitz

API References:

allowEditing

actionComplete

If we misunderstood your requirement, Kindly explain the exact requirement of your case briefly.

Regards,

Aishwarya R