grid not activeElement when selecting a single cell when using "multiple, cell" select

[Euan]

Hi,

I am currently using a combination of:

selectable: "multiple, cell",
edit: function (e) {
  if (e.model[e.field].readOnly) {
    this.closeCell();
  }
}

edit function comes from http://www.telerik.com/forums/how-to-make-cell-editable-based-on-value-of-another-cell-in-grid

This allows me to make individual cells read only, which is working great.
My problem occurs as I have logic that is bound to the grid that requires it to be focussed after a select.
Current behaviour that I see is:
1) If selecting >= 2 cells either horizontally or vertically the edit event is not fired and the grid has focus - Correct
2) If selecting a single cell that is not read only the editor is displayed and has focus - Correct
3) If selecting a single cell that is read only the editor is not displayed, but the grid has lost focus. - Incorrect

It appears that the activeElement is being reset to the document body by the this.closeCell(); even though the editor is never displayed.

Is their some way I can either prevent the edit without using closeCell() or "fix" the loss of focus after calling closeCell().
I have tried adding a this.focus(); after closeCell() but the grid still doesn't get focus.

Thanks
Euan

[Euan]

Don't think it affects it, but for recreation purposes the missing line in the edit event I use to get the field is:

var field = $grid.find('th').eq(e.container[0].cellIndex).attr("data-field");

[Dimiter Madjarov]

Hello Euan,


I am unable to reproduce this behavior. The edit event is not fired, when the field is specified as readonly in the model configuration, so the closeCell method is not invoked in this case. Let me know if I am missing something here. If possible please share additional details, for example in which browser are you experiencing it?


Regards,
Dimiter Madjarov
Telerik

[Euan]

Hi,

I see it in Chrome 32.0.1700.107 using kendo version 2013.3.1119

The model configuration has the fields set to editable to allow dynamically per cell (not per column) changing of its editable behaviour.
I used the previously mentioned post to override the edit, which works for making the field readonly, except it breaks the grid focus for a single cell.

The fields themselves are complex objects and I'm using a cell template and custom editor to extract the underlying data.<col>.value for viewing/editing. This part is working without issue.
Simplified example of data fetched in the dataSource:

[{
  "col1":{"value":1.1,"readOnly":true},
  "col2":{"value":1.2,"readOnly":false}
},{
  "col1":{"value":2.1,"readOnly":false},
  "col2":{"value":2.2,"readOnly":true}
}]

Hope this clarifies a bit more.

Thanks
Euan

[Dimiter Madjarov]

Hello Euan,


Thank you for the clarification. Indeed the edit event is fired and the closeCell method is called in the current case. Regarding the focus issue, I discussed it with the developers team and was assured that it is by design, because the currently focused element is getting redrawn. If this is essential for the current scenario, you could focus the Grid table manually.

Regards,
Dimiter Madjarov
Telerik

[Euan]

Hi,

Thanks for clarifying the closeCell() behaviour.

As per my original post I tried adding a call to this.focus(); after this.closeCell() but the grid still doesn't get focus.
Is there somewhere else I can hang a grid.focus() that will be triggered after the closeCell() and any focus changes it causes have completed?

Thanks
Euan

[Dimiter Madjarov]

Hi Euan,


When performing multiple selection, the focused element is the Grid table (as in the first case from your first post). In the current scenario you could manually focus the table in the edit event. The following approach is working on my side.
E.g.

edit: function() {
    this.closeCell();
    this.table.focus();
}

Let me know if this was the information that you were looking for.

Regards,
Dimiter Madjarov
Telerik

[Euan]

I was missing the .table before the focus

Working perfectly thanks.