Prevent Keyboard Navigation to cell in Batch-Edit Grid

[Blake]

I have a batch edit grid in which my client would like to have keyboard navigation to tab between cells. The .Navigatable() method works great. Although, for certain cells given a certain condition, I need to have them be read-only. I am able to block the cell from being selected with the mouse onClick, but with Navigatable set to true, they are still able to tab into that cell. Based on my code below, is there a way to set the cell as Read-Only? Either with a Grid method or JavaScript?

Grid Code

@(Html.Kendo().Grid<Project.Models.MetricData>()
    .Name("grid") // template expression, to be evaluated in the master context
    .Columns(columns =>
    {
        columns.Bound(m => m.MetricLabel);
        columns.Bound(m => m.Numerator);
        columns.Bound(m => m.Denominator);
        columns.Bound(m => m.Rate);
    }).ToolBar(toolbar =>
    {
        toolbar.Save();
    })
    .Editable(editable => editable.Mode(GridEditMode.InCell))
    .Navigatable()
    .DataSource(dataSource => dataSource
        .Ajax()
        .Batch(true)
        .ServerOperation(false)
        .Model(model =>
            {
                model.Id(m => m.MetricKey);
                model.Field(m => m.MetricLabel).Editable(false);
            })
        .Read(read => read.Action("Binding_Metrics", "Controller"))
        .Update("UpdateMetric", "Controller")
    )
    .Events(events => { events.DataBound("DataBound"); })
)

JavaScript

<script>
    function DataBound() {
        var grid = $("#grid").data("kendoGrid");
        var gridData = grid.dataSource.view();

        for (var i = 0; i < gridData.length; i++) {
            //get the item uid
            var currentUid = gridData[i].uid;
            //if the record fits the custom condition find the row based on the uid and add the custom class
            var currentRow = grid.table.find("tr[data-uid='" + currentUid + "']");

            var disableCell = $(currentRow).find(':nth-child(4)');
            $(disableCell).addClass("disabled"); //Greys out cell background

            $(disableCell).click(function (e) {
                e.preventDefault();
                e.stopImmediatePropagation();
                return false;
            });
        }
    }
</script>

I have tried to do something like this

model.Field(m => m.Rate).Editable(@<text>function(){
                                if(#=numFormat# == 1){return false;}
                                else{return true;}
                          }</text>);

But the method is unable to accept a lambda expression.

Also I have tried using JavaScript to prevent this as well

$(disableCell).focus(function (e) {
    e.preventDefault();
    e.stopImmediatePropagation();
    return false;
});

[Alexander Popov]

Hello Blake,

The simplest way of making a cell read-only is by setting the Model field's Editable option to false. Another approach you might try is using a Template column instead of a Bound one.
None of the above however, will prevent the keyboard navigation from "focusing" the cell (although it won't put it in edit mode). Skipping over non-editable cells is not supported out of the box, but it could be achieved using a custom solution, as discussed here.

Regards,
Alexander Popov
Telerik

[Blake]

Hi Alexander,

 Thank you for your response. I am completely fine with the cell being focused on, I am just unable to prevent it from getting put in edit mode. I will give converting the Bound column to a Template one a shot.

 Thanks,

Blake

[Blake]

Hi Alexander,

I tried converting the data bound column to a template column, but I am still unable to get the keyboard navigation from going into edit mode on the cell. Is this possible to do dynamically on a row by row basis?

 Thanks,

Blake

[Alexander Popov]

Hi Blake,

I assume that a Bound column was used, hence it was again put in edit mode. Also, I am not sure why setting the Editable option to false did not work for you. Here is a screencast illustrating both of the approaches I suggested.

Regards,
Alexander Popov
Telerik

[Blake]

Hi Alexander,

 Thank you for your response and patience. My problem is less that I can't get the column to be completely un-Editable and more that I am not able to do it on a row by row basis. For instance, if the row meets a certain criteria, I would like for that column to be editable, otherwise editable should be false. I am able to achieve this functionality on-Click, but not through keyboard navigation as this seems to be handled by the Telerik tools.

 Thanks for your help,

Blake

[Alexander Popov]

Hello,

In that case I would suggest subscribing to the Grid's edit event . Once the event is triggered you can check if the e.model argument meets the conditions and if it does not - call the Grid's closeCell method.

Regards,
Alexander Popov
Telerik

[Blake]

Hi Alexander,

 Thank you for your suggestion, I combined your answer with the answer from the following forum answer to solve my problem.

http://www.telerik.com/forums/skip-read-only-fields-when-using-keyboard-navigation-on-navigatable-grid-in-batch-edit-mode

Thanks,

Blake

[Duke]

Hi Alexander and Team Telerik,

This line by Alexander was tremendously helpful, and it ended an multi-hour search to an answer to my challenge: "The simplest way of making a cell read-only is by setting the Model field's Editable option to false."

 

My question is: where is this documented?  I keep thinking I'm missing something because I can't seem to locate on single site that details all the APIs, Events, etc for the Grid.

I think I'm not searching correctly, but I need to know how I would have found something like this.

Thanks.

[Viktor Tachev]

Hi Duke,

The editable option can be specified for the schema.model. Please check out the sample below that illustrates the approach. In the article you can also find information regarding the Grid events, methods, etc.

• http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-schema.model

For the MVC wrapper the code would look similar to the following:

.DataSource(dataSource => dataSource
    .Ajax()
    .Model(model =>
    {
        model.Id(p => p.ProductID);
        model.Field(p => p.UnitPrice).Editable(false);
    })
    ...
)

Furthermore, there is a new feature in the Grid that enables you to set a field as conditionally editable. Thus, whether a field can be edited would depend on a value from another field. This feature is documented below:

• http://docs.telerik.com/aspnet-mvc/helpers/grid/how-to/editing/conditionally-editable-columns

Regards,
Viktor Tachev
Telerik by Progress