(Inline Edited Grid) Prevent editing primary key column on new row record

[Issam DANO]

In a inline edited grid, when I click on Add toolbar button, I would like to prevent the user from manually entering a value within primary key column as it will be generated automatically. As suggested in documentation below, I set the column to column.allowEditing = false but when clicking Add, the new record row still have the column editable: 

• Edit in Angular Grid component | Syncfusion

 Even in documentation sample, selecting primary key Order ID does not disable it when clicking on toolbar Add button as you can see below:

 Any idea how to prevent editing the editable grid new row's primary key column ?

Thanks

[Aishwarya Rameshbabu]

Hi Issam DANO,

Greetings from Syncfusion support.

Based on your requirement, you aim to prevent manual editing of the primary key column in Syncfusion Grid while ensuring it automatically generates unique values during record addition. In Syncfusion Grid, primary key columns are inherently protected against editing as they are essential for performing CRUD (Create, Read, Update, Delete) operations. However, when adding a new record, it's still necessary to provide a unique value for the primary key.

To address your need, we leveraged the actionBegin event. Here's how the solution works:

1. Automatic Primary Key Generation:
   During the addition of a new record (identified through requestType as 'add'), a unique primary key value is programmatically assigned using a counter variable (primaryKeyCounter). This ensures the primary key remains unique without user intervention.
2. Read-Only Primary Key Column:
   By enabling the isIdentity property for the primary key column, the column is made completely read-only, preventing users from manually modifying its values.
3. Implementation of allowEditing:
   While isIdentity ensures the primary key is not editable, setting allowEditing=false on specific columns provides an additional layer of control for other non-editable fields.

App.component.html

 

        <ejs-grid #grid id='Normalgrid' [dataSource]='data' allowPaging='true' [allowSorting]='true' [allowFiltering]='true' [filterSettings]='filterSettings' [pageSettings]='pageSettings' 

[editSettings]='editSettings' [toolbar]='toolbar' (actionBegin)='actionBegin($event)'>

            <e-columns>

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

              ………..

            </e-columns> 

 

        </ejs-grid>

 

App.component.ts

 

    actionBegin(args) {

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

            // Assign a new primary key value programmatically

            args.data.orderID = this.primaryKeyCounter;

            this.primaryKeyCounter++; // Increment the counter for the next record

          }

      }

 

Sample: Gcyyxg (forked) - StackBlitz

Screenshot:

API References:

• actionBegin: Event triggered before performing actions like adding, editing, or deleting records.
• actionComplete: Event triggered after completing actions.
• isIdentity: Property to make a column read-only and prevent editing.

If you need any other assistance or have additional questions, please feel free to contact us.

Regards

Aishwarya R

[Issam DANO]

Hi Aishwarya, 

 Thank you very much for this. 

BR

[Aishwarya Rameshbabu]

Hi Issam DANO,

We are happy to hear that the provided solution was helpful. Please get back to us if you need any other assistance.

Regards

Aishwarya R