allow adding but not edit on column

[Mike Johnson]

When adding a new record I need to be able provide information for a certain columns, but not when editing the same columns. How would I do this?

[Mike Johnson]

Here is my html code. Also an image of what happens when I click on the add button.

<ng-template #refCodeUpdateFailedToast>

  <svg

    xmlns="http://www.w3.org/2000/svg"

    fill="#fff"

    width="24"

    height="24"

    viewBox="0 0 24 24"

  >

    <path

      d="M10.872 6.831l1.695 3.904 3.654-1.561-1.79 3.426 3.333.954-3.417 1.338 2.231 4.196-4.773-2.582-2.869 2.287.413-3.004-3.792-.726 2.93-1.74-1.885-2.512 3.427.646.843-4.626zm-.786-6.831l-1.665 9.119-6.512-1.228 3.639 4.851-5.548 3.294 7.108 1.361-.834 6.076 5.742-4.577 9.438 5.104-4.288-8.064 6.834-2.677-6.661-1.907 3.25-6.22-6.98 2.982-3.523-8.114z"

    />

  </svg>

  Reference Code Update failed.

</ng-template>

<ng-template #refCodeUpdatedToast>

  <svg

    xmlns="http://www.w3.org/2000/svg"

    fill="#fff"

    width="24"

    height="24"

    viewBox="0 0 24 24"

  >

    <path

      d="M10.872 6.831l1.695 3.904 3.654-1.561-1.79 3.426 3.333.954-3.417 1.338 2.231 4.196-4.773-2.582-2.869 2.287.413-3.004-3.792-.726 2.93-1.74-1.885-2.512 3.427.646.843-4.626zm-.786-6.831l-1.665 9.119-6.512-1.228 3.639 4.851-5.548 3.294 7.108 1.361-.834 6.076 5.742-4.577 9.438 5.104-4.288-8.064 6.834-2.677-6.661-1.907 3.25-6.22-6.98 2.982-3.523-8.114z"

    />

  </svg>

  Reference Code Updated.

</ng-template>

<h3>Reference Codes</h3>

<div class="row">

  <ejs-grid

    #grid

    [dataSource]="data | async"

    [allowPaging]="true"

    [pageSettings]="pageSettings"

    [allowSorting]="true"

    [allowMultiSorting]="true"

    [allowFiltering]="true"

    [filterSettings]="filterOptions"

    [allowGrouping]="true"

    [allowReordering]="true"

    [allowResizing]="true"

    [showColumnChooser]="true"

    [allowAdding]="true"

    [allowEditing]="true"

    [allowDeleting]="true"

    [editSettings]="editSettings"

    [toolbar]="toolbar"

    [sortSettings]="sortOptions"

    (dataSourceChanged)="dataSourceChanged($event)"

    (dataStateChange)="dataStateChange($event)"

    width="100%"

  >

    <e-columns>

      <e-column

        field="key"

        headerText="Key"

        textAlign="Left"

        width="60"

        [isPrimaryKey]="true"

        [visible]="false"

      ></e-column>

      <e-column

        field="code"

        headerText="Code"

        width="60"

        [allowEditing]="false"

        [allowAdding]="true"

      ></e-column>

      <e-column

        field="codeGroup"

        headerText="Code Group"

        textAlign="Left"

        width="60"

        [allowEditing]="false"

        [allowAdding]="true"

      ></e-column>

      <e-column

        field="codeDescription"

        headerText="Description"

        textAlign="Left"

        width="110"

      ></e-column>

      <e-column

        field="sortOrder"

        headerText="Sort Order"

        textAlign="Center"

        width="30"

      ></e-column>

      <e-column

        field="lastUpdated"

        headerText="Last Updated"

        textAlign="Right"

        width="30"

        type="dateTime"

        [allowEditing]="false"

      ></e-column>

      <e-column

        field="lastUpdatedName"

        headerText="Last Updated By"

        textAlign="Right"

        width="35"

        [allowEditing]="false"

      ></e-column>

    </e-columns>

  </ejs-grid>

</div>

[Ajith Govarthan]

  

Hi Mike Johnson, 

Thanks for contacting Syncfusion support. 

Query: When adding a new record I need to be able provide information for a certain columns, but not when editing the same columns. How would I do this? 

 

Based on your query you want disable editing for some columns and you want to enable editing of the column when you add new records in the Grid component. So, we have shared the code example in that we have used the cellEdit event to achieve your requirement. In the cellEdit event, we have set the cancel argument as true when you edit the particular columns. 

 So, the columns will not be edited, and it will be get edited only when you add the new record in the Grid component. For your convenience we have attached the code example please refer them for your reference. 

Code Example: 

App.component.ts 

  cellEdit(args) {  if ( 

      args.type === 'edit' && 

      (args.columnName === 'CustomerID' || args.columnName === 'OrderDate') 

    ) { 

      args.cancel = true; 

    } 

  } 

 

App.component.html 

<div class="control-section"> 

    <div class="col-lg-9"> 

        <ejs-grid #grid id='Normalgrid' (cellEdit)="cellEdit($event)" [dataSource]='data' allowPaging='true' 

            [pageSettings]='pageSettings' [editSettings]='editSettings' [toolbar]='toolbar'> 

            <e-columns> 

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

                    [validationRules]='orderidrules'></e-column> 

                <e-column field='CustomerID' headerText='Customer ID' width='140' [validationRules]='customeridrules'> 

                </e-column> 

                <e-column field='Freight' headerText='Freight' width='140' format='C2' textAlign='Right' 

                    editType='numericedit' [validationRules]='freightrules'></e-column> 

                <e-column field='OrderDate' headerText='Order Date' width='120' editType='datetimepickeredit' 

                    [format]='formatoptions' textAlign='Right'></e-column> 

                <e-column field='ShipCountry' headerText='Ship Country' width='150' editType='dropdownedit' 

                    [edit]='editparams'></e-column> 

            </e-columns> 

        </ejs-grid> 

    </div> 

 

Please get back to us if you need further assistance. 

Regards, 

Ajith G. 

[Mike Johnson]

Thank you that worked great.

[Rajapandi Ravi]

Hi Mike, 

Thanks for the update. 

We are happy to hear that your issue has been resolved. 

Please get back to us if you need further assistance. 

Regards, 

Rajapandi R