grid with group: navigation only in one editable column

[Igor]

Helloi All,

I have a simple grid with 3 columns: section, question, and answer. Only answer column is editable. I need to:

1) hide group column(section)

2) don't allow user select a row and only allow a navigation in Answer column with Up/Down/Enter key down events 

Please look at my example

http://dojo.telerik.com/@iakhmedov1/AbIlE

and correct the code to get it working as it is required

Thanks,

Igor

 

 

 

 

 

 

 

 

 

[Preslav]

Hi Igor,

To hide a column, use the columns.hidden configuration:

• http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-columns.hidden

To modify the navigation in a Grid, please refer to the "Skip Non-Editable Cells When Tabbing" article:

• http://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/Editing/skip-non-editable-cells-when-tabbing

Regards,
Preslav
Progress Telerik

[Igor]

Hi Preslav,

I put the code you recommended (http://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/Editing/skip-non-editable-cells-when-tabbing) into my example ( http://dojo.telerik.com/@iakhmedov1/eBuge ). It does not work as expected: tab, up, down don't make next answer editable. Please take a look and fix it.

Thanks,

Igor

 

 

 

 

 

[Preslav]

Hello Igor,

I was able to determinate these issues in the provided code:

1. the onDataBound was not bound to the Grid:
   

     editable: "incell",
     dataBound: onDataBound
   });

2. The "if" statements in the keydown event handler always returns false due to the fact that the currentNumberOfItems variable is two because the dataSource is grouped.

Additionally, the DropDownList and the ComboBox have their own keydown handlers. That said, in order to disable these handlers in the Grid, you should override them. For example, the code might look like:

<script>

  var oldCBkeydown = $.fn.kendoComboBox.widget.fn._keydown;
  $.fn.kendoComboBox.widget.fn._keydown = function(e){
    var dataBindAttr = $(e.target).attr("data-bind");
    if(typeof dataBindAttr == typeof undefined || dataBindAttr == false){
      this.__keydown = oldCBkeydown;
      this.__keydown(e);
    }
  };


  var oldDDLkeydown =$.fn.kendoDropDownList.widget.fn._keydown;
  $.fn.kendoDropDownList.widget.fn._keydown = function(e){
    if($(e.target).find("[data-bind]").length < 1){
      this.__keydown = oldDDLkeydown;
      this.__keydown(e);
    }
  };

</script>

Finally, the modified Dojo is available here: http://dojo.telerik.com/ArOKE/2

I hope the above helps.


Regards,
Preslav
Progress Telerik

[Igor]

Hi Preslav,

 

Thank you very much.

 

Best regards,

Igor