1. Home
  2. Forum
  3. Blazor
  4. How to disable editing for a particular column in the Blazor DataGrid?

How to disable editing for a particular column in the Blazor DataGrid?

Query: How to disable editing for a particular column in the Blazor DataGrid?

 
Answer: 
To enable or disable editing based on a condition, define the GridEditSettings properties based on that editing can be disabled for a column based on condition. The CanEdit property enables or disables edit action in Grid. Similarly to disable particular column from editing, AllowAdding or AllowEditing properties of GridColumn can be used. Here is the code snippet for your reference,

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

    @if (CanEdit)  

    {  

        <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" ValidationRules="@(new ValidationRules{ Required=true})" 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>  

        <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" AllowAdding="CanEditColumn" AllowEditing="CanEditColumn" TextAlign="TextAlign.Right" EditType="EditType.NumericEdit" Width="120"></GridColumn>  

        <GridColumn Field=@nameof(Order.ShipCountry) HeaderText="Ship Country" EditType="EditType.DropDownEdit" Width="150"></GridColumn>  

    </GridColumns>  

</SfGrid>  

  

@code{  

    public List<Order> Orders { get; set; }  

    public bool CanEdit { get; set; } // to enable / disable editing in Grid  

    public bool CanEditColumn { get; set; } = false; // to disable particular column  

    protected override void OnInitialized()  

    {  

        CanEdit = (new bool[] { true, false })[new Random().Next(2)];  

    }  


You can find the UG documentation for reference.


Find the sample to disable editing for a column based on condition here.



6 Replies
JE Jeremy February 25, 2021 09:12 AM UTC

Can you provide an example please that extends this where the column "Freight" only allows editing for certain row data 

For example, I only want to allow the "Freight" column to allow editing when the row model / column property Order.ShipCountry == "Australia"


Thanks

RN Rahul Narayanasamy Syncfusion Team February 26, 2021 02:20 PM UTC

Hi Jeremy, 

Greetings from Syncfusion. 

Query: I only want to allow the "Freight" column to allow editing when the row model / column property Order.ShipCountry == "Australia" 

We have validated your query and you want to edit a column based on the other column value. You can achieve your requirement by using RowSelected event for Normal editing and OnCellEdit for Batch editing. Find the below code snippets and sample for your reference. 

[Index.razor] – For Normal editing 
<SfGrid 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> 
    <GridEvents RowSelected="RowSelectHandler" TValue="Order"></GridEvents> 
    <GridColumns> 
. ..  
        <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" AllowEditing="@CanEditColumn" Format="C2" TextAlign="TextAlign.Right" EditType="EditType.NumericEdit" Width="120"></GridColumn> 
        <GridColumn Field=@nameof(Order.ShipCountry) HeaderText="Ship Country" EditType="EditType.DropDownEdit" Width="150"></GridColumn> 
    </GridColumns> 
</SfGrid> 
 
@code{ 
    public List<Order> Orders { get; set; } 
    public bool CanEditColumn { get; set; } = true; // to enable / disable editing in Grid   
 
    . . . 
    public void RowSelectHandler(RowSelectEventArgs<Order> args) 
    { 
        if(args.Data.ShipCountry != "INDIA") 
        { 
            CanEditColumn = false;     //disable editing for Freight column if ShipCountry column value is not INDIA 
        } 
        else 
        { 
            CanEditColumn = true;      //enable editing for Freight column if ShipCountry column value is INDIA 
        } 
    } 
} 

For Batch editing: 

[Counter.razor] 
<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> 
    <GridEvents OnCellEdit="CellEditHandler" TValue="Order"></GridEvents> 
    <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> 
 
@code{ 
    public List<Order> Orders { get; set; } 
 
    . . . 
    public void CellEditHandler(CellEditArgs<Order> args) 
    { 
        if (args.Data.ShipCountry != "INDIA") 
        { 
            args.Cancel = true;    //cancel default edit action if ShipCountry value is not INDIA 
        } 
    } 
} 


Reference: 

Please let us know if you have any concerns. 

Regards, 
Rahul 


JE Jeremy February 28, 2021 04:57 AM UTC

Brilliant, thankyou.

RN Rahul Narayanasamy Syncfusion Team March 1, 2021 05:07 AM UTC

Hi Jeremy, 
 
Thanks for the update. 
 
Please get back to us if you need further assistance. 
 
Regards, 
Rahul 


ED Edward April 2, 2021 09:18 PM UTC

The RowSelectHandler is not called for me when Adding a new row to the grid.  The result is that you can not disable the editing of a column when adding a new row to the grid.  This seems like a bug or is there an additional step involved to accomplish this?

RN Rahul Narayanasamy Syncfusion Team April 5, 2021 01:01 PM UTC

Hi Edward, 

Greetings from Syncfusion. 

Query: The RowSelectHandler is not called for me when Adding a new row to the grid.  The result is that you can not disable the editing of a column when adding a new row to the grid. 

We have validated your query and you want to disable editing for the particular column while adding the record. You can achieve this requirement by using AllowAdding property of the column. Find the below code snippets and sample for your reference. 

<SfGrid 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> 
    <GridEvents RowSelected="RowSelectHandler" TValue="Order"></GridEvents> 
    <GridColumns> 
        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" IsPrimaryKey="true" ValidationRules="@(new ValidationRules{ Required=true})" TextAlign="TextAlign.Right" Width="120"></GridColumn> 
        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" ValidationRules="@(new ValidationRules{ Required=true})" 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> 
        <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" AllowAdding="false" AllowEditing="@CanEditColumn" Format="C2" TextAlign="TextAlign.Right" EditType="EditType.NumericEdit" Width="120"></GridColumn> 
        <GridColumn Field=@nameof(Order.ShipCountry) HeaderText="Ship Country" EditType="EditType.DropDownEdit" Width="150"></GridColumn> 
    </GridColumns> 
</SfGrid> 
 
@code{ 
    public List<Order> Orders { get; set; } 
    public bool CanEditColumn { get; set; } = true; // to enable / disable editing in Grid   
 
    . . . 
     
} 


Reference: 

 



Please let us know if you have any concerns. 

Regards, 
Rahul 


Loader.
Up arrow icon