Hello,

We are planning some enhancements in the InCell edit mode of the Grid that can help you achieve your desired result via another approach - cancel the OnEdit event for specific cells based on some condition instead of toggling the Editable property of the whole column.

As per the current configuration of the InCell edit mode, the OnEdit event fires once per row and not for every cell. While this introduces less events firing for performance optimization, you are not actually able to cancel the event for specific cell. As of version 2.28.0 of Telerik UI for Blazor OnEdit, OnUpdate and OnCancel will fire for every cell - check this item Trigger OnEdit, OnUpdate, OnCancel on every cell in Incell EditMode.

To achieve your desired scenario, you need to specify the condition based on which the cell will be disabled and to check whether the user is trying to edit that cell, so you can cancel the OnEdit event for it. You can use the Field parameter from the GridCommandEventArgs to check which is the edited field. Currently the Field and Value properties are not populated in the InCell edit as they were marked as obsolete. However, it looks like they can be useful in such cases, so I logged an issue for updating them - Field and Value properties from GridCommandEventArgs are null.

I have added a vote on your behalf to increase the bug popularity as we are prioritizing the bug fixes based on the community interest and demand. You can also subscribe to receive email notifications when its status changes.

Once both of the above listed features are implemented you will be able to disable the desired cells while using the InCell editing of the Grid. Example for cancelling the OnEdit event of the Name column only for the records whose Id is less than 6:

    void OnEditHandler(GridCommandEventArgs args)
    {
        var item = args.Item as SampleData;

        if (item.Id < 6 && args.Field == "Name")
        {
            args.IsCancelled = true;
        }
    }

In case you are not able to wait for the listed enhancements, until they are live, you can proceed with two options:

• Use Inline or Popup edit mode of the Grid and apply the previously listed approach for toggling the Editable property
  
  
• Use Editor templates

That said, I will now mark this thread as "Completed" since the desired result can be achieved for the Inline and Popup editing with the current Grid configuration and for the InCell edit mode - with the upcoming enhancements.

I hope you will find this information useful. Please let us know if any further questions appear.

Regards,
Nadezhda Tacheva
Progress Telerik

Hello,

Thank you for the confirmation! After further research for your desired scenario, it looks to me that it can be achieved with the current configuration of the Grid component. It will actually track a dynamic change in the Editable parameter, however there are two important points when performing that change:

• A more suitable place to change the value of the Editable parameter will be in the OnEdit event handler rather than in the OnCellRender event handler. The reason behind this is that OnCellRender event fires when the Grid is rendered and a dynamic change in the Editable parameter will not be reflected in this case. OnEdit, on the other hand, fires when the user is about to enter edit mode for an existing row. So, this is the place where you can prevent editing for some fields based on your desired business logic.
  
  
• Once you set the Editable parameter value to false for the cells you want to disable, you need to change it back to true in case there are other cells in this column after the disabled ones that you want to allow the editing for. Otherwise the field will remain false, and all the rest of the cells will not be editable.

An important point to take into consideration is that the described approach will be applicable for the Grid Inline and Popup edit modes. I have prepared a sample example to better illustrate how to achieve it. The disabled cells are Name for the items whose id is less than 6 and Team for the items whose id is between 6 and 10 inclusively.

<TelerikGrid Data="@MyData"
             Pageable="true"
             EditMode="@GridEditMode.Inline"
             OnEdit="@OnEditHandler">
    <GridColumns>
        <GridColumn Field="@(nameof(SampleData.Id))" Width="120px" />
        <GridColumn Field="@(nameof(SampleData.Name))"
                    Title="Employee Name"
                    Editable="@NameEditable"
                    OnCellRender="@((x) => OnCellRenderHandler(x, "Employee Name"))" />
        <GridColumn Field="@(nameof(SampleData.Team))"
                    Title="Team"
                    Editable="@TeamEditable"
                    OnCellRender="@((x) => OnCellRenderHandler(x, "Team"))" />
        <GridColumn Field="@(nameof(SampleData.HireDate))" Title="Hire date" />
        <GridCommandColumn>
            <GridCommandButton Command="Save" Icon="save" ShowInEdit="true">Update
            </GridCommandButton>
            <GridCommandButton Command="Edit" Icon="edit">Edit</GridCommandButton>
            <GridCommandButton Command="Delete" Icon="delete">Delete
            </GridCommandButton>
            <GridCommandButton Command="Cancel" Icon="cancel" ShowInEdit="true">Cancel
            </GridCommandButton>
        </GridCommandColumn>
    </GridColumns>
</TelerikGrid>

@code {
    public bool NameEditable { get; set; } = true;

    public bool TeamEditable { get; set; } = true;

    void OnEditHandler(GridCommandEventArgs args)
    {
        var item = args.Item as SampleData;

        if (item.Id < 6)
        {
            NameEditable = false;
        }
        else if (item.Id > 5 && item.Id <= 10)
        {
            NameEditable = true;
            TeamEditable = false;
        }
        else
        {
            TeamEditable = true;
            NameEditable = true;
        }
    }

    void OnCellRenderHandler(GridCellRenderEventArgs args, string columnName)
    {
        var item = args.Item as SampleData;

        if ((columnName == "Employee Name" && item.Id < 6) ||
             (columnName == "Team" && item.Id > 5 && item.Id <= 10))
        {
            args.Class = "myCustomCellFormatting";
        }
    }

    public IEnumerable<SampleData> MyData = Enumerable.Range(1, 30).Select(x => new SampleData
    {
        Id = x,
        Name = "name " + x,
        Team = "team " + x % 5,
        HireDate = DateTime.Now.AddDays(-x).Date
    });

    public class SampleData
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Team { get; set; }
        public DateTime HireDate { get; set; }
    }
}

<style>
    .myCustomCellFormatting {
        background-color: red;
        opacity: 0.5;
        color: white;
        font-size: 10px;
        pointer-events: none;
        cursor: none !important;
    }
</style>

Regards,
Nadezhda Tacheva
Progress Telerik

Hello,

In order to provide a solution that will best match your desired scenario, I want to double check and make sure we are on the same page. As far as I can understand regarding disabling certain cells, apart from visually marking them as disabled by changing their background color, you also want to prevent their editing. Am I missing something or these are the requirements to classify a cell as disabled in your use case?

If so, I am considering a simpler alternative - bind the Editable field of the column to a bool and toggle its value based on the application business logic. This approach will allow you to handle the OnCellRender to not only change the background color of a cell but to also disable its editing using the very same logic.

Currently, the Grid does not listen to a dynamic change in the Editable parameter, however we can open a feature request for that if you consider this option as a good fit for your use case.

Please revise and let me know your thoughts.

Regards,
Nadezhda Tacheva
Progress Telerik