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
;
});