Geek asks and answers

How to Override the Default Keyboard Navigation to Present a List of Kendo User Interfaces

I am trying to override the default keyboard navigation in the Kendo list view.

By default, the Kendo keyboard distinguishes between the selected items and the current item. Keyboard navigation moves the current item separately from the selected items. Selected items are highlighted, and the current item has a border.

I want the selected item to move with the current item.

I tried to disable the keygen Kendo handler and replaced it with my own handler.

$('#listView').off('keydown.kendoListView');
$('#listView').on('keydown.kendoListView', function (e) {
    var listView = $('#listView').data('kendoListView');
    switch (e.which) {
        case 40:
            var newSelection = listView.select().next();
            listView.select(newSelection);
            listView.current(newSelection);
            break;
        case 38:
            var newSelection = listView.select().prev();
            listView.select(newSelection);
            listView.current(newSelection);
            break;
        }
});

, , . . , .

, : http://jsfiddle.net/blutter/ULLu8/19/

? Kendo?

+3
2

keydown false, .

, :

  $('#listView').on('keydown.kendoListView', function (e) {
      var listView = $('#listView').data('kendoListView');
      switch (e.which) {
          case 40:
              var newSelection = listView.select().next();
              listView.select(newSelection);
              listView.current(newSelection);
              break;
          case 38:
              var newSelection = listView.select().prev();
              listView.select(newSelection);
              listView.current(newSelection);
              break;
      }
      return false;
  });

http://jsfiddle.net/blutter/ULLu8/23/

+1

. listview selectable: multiple, - HOME, END, PageDown, PageUp, .

var div = document.getElementById(lv1);   
var line_height = 26;
$('#lv1').off('keydown.kendoListView');
$('#lv1').on('keydown.kendoListView', function(e) {
    var listView = $('#lv1').data('kendoListView');
    switch (e.which) {
      case 33: //page up
        var newSelection = listView.select().index() > 10 ?
          listView.items()[listView.select().index() - 10] :
          listView.items()[0];
        if (listView.options.selectable == 'multiple')
          listView.clearSelection();

        listView.select(newSelection);
        listView.current(newSelection);

        div.scrollTop = 0;
        break;
      case 34: //page down
        var newSelection = listView.items().length - listView.select().index() > 10 ?
          listView.items()[listView.select().index() + 10] :
          listView.items()[listView.items().length - 1];
        if (listView.options.selectable == 'multiple')
          listView.clearSelection();

        listView.select(newSelection);
        listView.current(newSelection);

        div.scrollTop = listView.items().length * line_height;
        break;
      case 35: // END button
        listView.clearSelection();
        var newSelection = listView.items()[listView.items().length - 1];
        listView.select(newSelection);
        listView.current(newSelection);

        div.scrollTop = listView.items().length * line_height;
        break;
      case 36: // HOME button
        listView.clearSelection();
        var newSelection = listView.items()[0];
        listView.select(newSelection);
        listView.current(newSelection);

        div.scrollTop = 0;
        break;
      case 38: //arrow up
        var newSelection = listView.select().prev();
        if (listView.options.selectable == 'multiple')
          listView.clearSelection();
        listView.select(newSelection);
        listView.current(newSelection);
        break;
      case 40: // arrow down
        var newSelection = listView.select().next();
        if (listView.options.selectable == 'multiple')
          listView.clearSelection();
        listView.select(newSelection);
        listView.current(newSelection);
        break;
    }
    return false;
  });

: http://jsfiddle.net/snir/ffan5v86/7/

0

More articles:


All Articles