How to disable editing but allow adding for GridColumn only?

[Charlie Sexton]

<GridColumn Field="MyImportantName" HeaderText="MyImportantName" AllowEditing="false" AllowAdding="true"></GridColumn>

I would like the ability to set AllowEditing="false" for a GridColumn but AllowAdding="true". How can I achieve this?

Thank You,

Charles

[Rahul Narayanasamy]

Hi Charlie, 

Greetings from Syncfusion. 

 

Query: How to disable editing but allow adding for GridColumn only? 

We have validated your query and you want to disable editing for Grid columns. You can achieve your requirement by using AllowEditing property. You can disable editing for all the columns by using AllowEditing property of GridEditSettings. Find the below code snippets for your reference. 

 

 

<div>Disable editing for all the  columns </div> 

<SfGrid ID="Grid1" DataSource="@Orders" AllowPaging="true" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update" })" Height="315"> 

    <GridEditSettings AllowAdding="true" AllowEditing="false" AllowDeleting="true" Mode="EditMode.Normal"></GridEditSettings> 

    <GridColumns> 

        . . . 

    </GridColumns> 

</SfGrid> 

 

. . . 

 

@code{ 

    . . . 

} 

Or you can disable editing for particular columns by defining AllowEditing property in required or particular columns. Here, we have enabled adding, editing, deleting operations for all the columns and disabling editing operations for CustomerID and OrderDate columns. Find the below code snippets and sample for your reference. 

 

<div>Disable editing for particular  columns </div> 

<SfGrid ID="Grid2" DataSource="@Orders" AllowPaging="true" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update" })" Height="315"> 

    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="EditMode.Normal"></GridEditSettings>  - //here we have enabled adding, editing , deleting operations for all columns 

    <GridColumns> 

        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" IsPrimaryKey="true" ValidationRules="@(new { required=true})" TextAlign="TextAlign.Right" Width="120"></GridColumn> 

        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" AllowEditing="false" ValidationRules="@(new { required=true})" Width="120"></GridColumn> 

        <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" AllowEditing="false" EditType="EditType.DatePickerEdit" Format="d" TextAlign="TextAlign.Right" Width="130" Type="ColumnType.Date"></GridColumn> 

        . . . 

    </GridColumns> 

</SfGrid> 

 

@code{ 

    . . . 

} 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorAppDisable-69145131  

Reference:  

https://blazor.syncfusion.com/documentation/datagrid/editing/ 

https://blazor.syncfusion.com/documentation/datagrid/editing/#disable-editing-for-particular-column 

Please get back to us if you need further assistance. 

Regards, 

Rahul 

[Oscar Lee]

Hi, I have a followup to Charlie's question. Is there anyway to make this happen with Batch editing? Right now, my grid treats a newly added column as one that is in edit mode, and not add, so AllowAdding doesn't work. When I make AllowEditing= false, I can't edit the column when I first add it. Any thoughts? Bug?

[Rahul Narayanasamy]

Hi Oscar, 

Greetings from Syncfusion. 

Query: Is there anyway to make this happen with Batch editing? 

We have validated your query and we suspect that you want to enable add operation and disable editing for Grid in batch mode. If yes, you can achieve this requirement by using AllowEditing property. Find the below code snippets for your reference. 

If you set AllowEditing as false in GridEditSettings, then editing is not enabled for all the Grid columns. 

 

<SfGrid DataSource="@Orders" AllowPaging="true" Toolbar="@(new List<string>() { "Add", "Delete", "Update", "Cancel" })" Height="315"> 

    <GridEditSettings AllowAdding="true" AllowEditing="false" AllowDeleting="true" Mode="EditMode.Batch"></GridEditSettings> 

    <GridColumns> 

        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" IsPrimaryKey="true" TextAlign="TextAlign.Right" ValidationRules="@(new ValidationRules { Required = true })" Type="ColumnType.Number" Width="120"></GridColumn> 

        . . . 

    </GridColumns> 

</SfGrid> 

If you want to disable editing for single column, then set AllowEditing property for that particular column. In the below code snippets, you can not edit CustomerID column. 

 

<SfGrid DataSource="@Orders" AllowPaging="true" Toolbar="@(new List<string>() { "Add", "Delete", "Update", "Cancel" })" Height="315"> 

    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="EditMode.Batch"></GridEditSettings> 

    <GridColumns> 

        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" IsPrimaryKey="true" TextAlign="TextAlign.Right" ValidationRules="@(new ValidationRules { Required = true })" Type="ColumnType.Number" Width="120"></GridColumn> 

        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" AllowEditing="false" Width="120"></GridColumn> 

        <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" EditType="EditType.DatePickerEdit" Format="d" TextAlign="TextAlign.Right" Width="130" Type="ColumnType.Date"></GridColumn> 

        . . . 

    </GridColumns> 

</SfGrid> 

If you want to prevent adding for particular column, the you can set AllowAdding property as false in particular column. It will prevent adding values for that column while adding. In below code snippets, adding the values is preventing in CustomerID column. 

 

<SfGrid DataSource="@Orders" AllowPaging="true" Toolbar="@(new List<string>() { "Add", "Delete", "Update", "Cancel" })" Height="315"> 

    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="EditMode.Batch"></GridEditSettings> 

    <GridColumns> 

        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" IsPrimaryKey="true" TextAlign="TextAlign.Right" ValidationRules="@(new ValidationRules { Required = true })" Type="ColumnType.Number" Width="120"></GridColumn> 

        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" AllowAdding="false" Width="120"></GridColumn> 

        . . . 

    </GridColumns> 

</SfGrid> 

Reference: 

https://blazor.syncfusion.com/documentation/datagrid/editing/#disable-editing-for-particular-column 

If the above information does not meet your requirement or if we misunderstood your requirement, then could you please share the below details. 

• Video demonstration of the problem.
• Exact replication steps for the reported problem.
• Whether did you don’t want to add the values while adding the record?
• Share more details regarding the problem.

Regards, 

Rahul 

[Oscar Lee]

Hi Rahul, 

Thank you for the response. The issue occurs when I add to the grid. At this point, I want ALL, fields available to be edited. When I hit update, and my entries are saved to the db. When user goes into a entry to edit, I don't want them to be able to edit a couple of fields while leaving the others available for edit. Right now, AllowEdit = "False" prevents a column to be edited upon adding. I don't want this. I have some pictures attached. 

Here, I press add to create a new entry.

New entry is created with blank areas. For this example, here I want to make MlKey editable on add, but not editable when revisited. When I disable editing, even if I have enabled adding set to true, I'm unable to edit that entry. 

Best,

Oscar

[Jeevakanth Palaniappan]

Hi Oscar, 

We have checked the reported problem and we would like to inform you that once you set a column to AllowEditing as false, then you cannot edit the values. You can able to set the value only when you click the Add icon. This is the default behavior of the grid.  

Please get back to us if you have any other queries. 

Regards, 

Jeevakanth SP. 

[Mike Johnson]

I'm having the same issue. I have the code shown below. I have set allowEditing="false" and allowAdding="true" on two columns. But when I click on the add button, I'm not able to provide data for these two columns and I need to. See image below. Thanks

  <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>

[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.