This is a migrated thread and some comments may be shown as answers.
grid with group: navigation only in one editable column
4 Answers 7 Views
This is a migrated thread and some comments may be shown as answers.
Igor
Top achievements
Rank 1
Igor asked on 10 Jul 2017, 05:42 AM

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

 

 

 

 

 

 

 

 

 

4 Answers, 1 is accepted

Sort by
0
Preslav
Telerik team
answered on 12 Jul 2017, 06:08 AM
Hi Igor,

To hide a column, use the columns.hidden configuration:
To modify the navigation in a Grid, please refer to the "Skip Non-Editable Cells When Tabbing" article:
Regards,
Preslav
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Igor
Top achievements
Rank 1
answered on 20 Jul 2017, 10:29 AM

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

 

 

 

 

 

0
Preslav
Telerik team
answered on 24 Jul 2017, 09:59 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Igor
Top achievements
Rank 1
answered on 28 Jul 2017, 03:36 AM

Hi Preslav,

 

Thank you very much.

 

Best regards,

Igor

Tags
Grid
Asked by
Igor
Top achievements
Rank 1
Answers by
Preslav
Telerik team
Igor
Top achievements
Rank 1
Share this question
or