This is a migrated thread and some comments may be shown as answers.

Avoid pressing the spacebar to select row after pressing arrow

8 Answers 326 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Łukasz
Top achievements
Rank 1
Łukasz asked on 14 May 2012, 11:02 AM
Hi,

Is it posible to automaticly select current row after arrow keys is pressed?
I have 2 grids Master/Detail and pressing spacebar every time when arrow key was pressed is little annoying.

8 Answers, 1 is accepted

Sort by
0
Łukasz
Top achievements
Rank 1
answered on 16 May 2012, 10:15 PM
Anyone?
0
Alexander Valchev
Telerik team
answered on 17 May 2012, 01:26 PM
Hi Lukasz,

I am not sure if I understood your case correctly. Could you please clarify your question or give an example?

 Do you want to automatically select a row (in a navigable grid) after navigating with the arrow keyboard keys? If that is the case, I am afraid that this behaviour is not supported - by default you need to press the space bar to select the current cell/row.

Please let me know if I missed something.

Kind regards,
Alexander Valchev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Łukasz
Top achievements
Rank 1
answered on 17 May 2012, 06:45 PM
Yes, exactly what I wanted.

In a navigatable grid with row selection mode I want to avoid hit spacebar after every hit of arrow (up or down).
If this is not supported yet then maybe is planned?
0
Alexander Valchev
Telerik team
answered on 23 May 2012, 08:03 AM
Hello Lukasz,

I am afraid that this functionality is not planned, but I will forward the idea to the developers for further consideration. Meanwhile you could find an information about the upcoming updates and our future plans in the official roadmap.

Kind regards,
Alexander Valchev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Alexander
Top achievements
Rank 1
answered on 19 Jul 2012, 09:05 AM
Hi,

I'd like to add my voice to that feature request. The by cell only navigation and the lack of automatic row selection seem, to me, to make keyboard navigation useless except in the very specific case where every cell is editable and a lot of editing is taking place.

Thanks

Alexander
0
Dan
Top achievements
Rank 1
answered on 18 Aug 2012, 05:17 PM
Here's some javascript to do it. 

This is with:
selectable: true,
navigatable: false

var target = $('.k-grid-content');
    //give it a tabindex so it can get focus and accept key input.
    target.attr("tabindex", 0);
     
    target.keydown(function (ke) {
        var kGrid, curRow, newRow;
 
        kGrid = $(this).closest('.k-grid').data("kendoGrid");
 
        //get currently selected row
        curRow = kGrid.select();
 
        //abort if no row selected
        if (!curRow.length)
            return;
 
        //get newRow up or down.
        if (ke.which == 38) {
            newRow = curRow.prev();
        } else if (ke.which == 40) {
            newRow = curRow.next();
        } else {
            return;
        }
 
        //Top or Bottom exceeded, abort.
        if (!newRow.length)
            return;
 
        //Select new row
        kGrid.select(newRow);
0
Rikin Patel
Top achievements
Rank 1
answered on 25 Oct 2012, 05:22 AM
this is working fine for row selection by up and down key but when i press down key of last row of grid then next row selected but selected row is not visible to user i.e no scroll down for next row selected if that row is not visible to user.

how can do this things help me....
0
Dan
Top achievements
Rank 1
answered on 26 Oct 2012, 08:40 PM

//This is a helper class that mostly just makes the telerik grid more keyboard friendly.
var kendoGridHelper = {};
 
kendoGridHelper.init = function (o) {
    /// <summary>
    ///Binds onSelect, keyboard navi, and databound row resselect
    ///Returns nothing.
    /// </summary>
    /// <param name="o" type="Dictionary">
    /// grid: html grid, onSelect, onDblClick
    /// </param>
 
    var grid = o.grid;
    var onSelect = o.onSelect;
    var onDblClick = o.onDblClick;
 
    var kGrid = grid.data('kendoGrid');
 
    //give rows tabindex, reselect row
    kGrid.bind('dataBound', function (e) {
        kendoGridHelper.onDataBound({ grid: grid, onSelect: onSelect });
    });
 
    //bind arrows to navigate
    kendoGridHelper.bindNavigatable({ grid: grid });
 
    //bind change event
    kendoGridHelper.bindChange({ grid: grid, onSelect: onSelect });
 
    //bind dblclick
    if (onDblClick != undefined) {
        $('.k-grid-content tr', grid)
            .live('dblclick', function (e) { //bind row dblclick
                var id = grid.data('kendoGrid').dataItem(e.currentTarget).id;
                onDblClick(id);
            });
    }
 
};
 
kendoGridHelper.bindNavigatable = function (o) {
 
    var grid = o.grid;
     
    var target = $('.k-grid-content', grid);
    //give it a tabindex so it can get focus and accept key input.
    target.attr("tabindex", 0);
     
    //Detecting when the scrollbar is clicked to prevent the focus event from firing and scrolling back up/down.
    target.mousedown(function (e) {
        var innerWidth = target.find('table').first().width();
        if (e.offsetX > innerWidth)
            e.preventDefault();
    });
 
    //This allows a diff background color for a selected row based on whether the grid has focus or not.
    target.focus(function (e) {
        var selRow = grid.find('.k-state-selected');
        if (selRow.length) {
            selRow.focus();
        }
    });
 
 
    target.keydown(function (ke) {
 
        //override scroll bar so arrows will navigate rows without scrolling.
        ke.preventDefault();
 
        var kGrid, curRow, newRow;
 
        kGrid = $(this).closest('.k-grid').data("kendoGrid");
 
        //get currently selected row
        curRow = kGrid.select();
 
        //abort if no row selected
        if (!curRow.length)
            return;
 
        //get newRow up or down.
        if (ke.which == 38) {
            newRow = curRow.prev();
        } else if (ke.which == 40) {
            newRow = curRow.next();
        } else {
            return;
        }
 
        //Top or Bottom exceeded, abort.
        if (!newRow.length)
            return;
 
        //Select new row
        kGrid.select(newRow);
        //
        newRow.focus();
    });
 
};
 
kendoGridHelper.bindChange = function (o) {
    var grid = o.grid;
    var onSelect = o.onSelect;
 
    var kGrid = grid.data('kendoGrid');
 
    kGrid.bind('change', function (e) {
 
        //This fixes the problem of losing focus on auto-refresh
        if (document.activeElement == document.body)
            kGrid.select().focus();
 
        //When using Kendo grid mvc wrapper, the datasource is not set, so accessing dataItem will fail.
        if (!kGrid.dataSource.data().length)
            return;
 
        //Set grid.selectedId, and execute onSelect
        var selectedId = kGrid.dataItem(kGrid.select()).id;
 
        if (selectedId != kGrid.selectedId && onSelect != undefined) {
            kGrid.selectedId = selectedId;
            onSelect(selectedId);
        } else {
            kGrid.selectedId = selectedId;
        }
    });
};
 
//Mostly this function just takes care of reselecting the global kGrid.selectedId. 
//Before I tried to not use a global, and call refresh with an id, but the problem is that
//other things call a data fetch like sorting, paging, manual refresh, and I have no way of sending the id with them.
//So a global flag, autoRefresh is used to denote when to call the onSelect method or not.  Calling onSelect while
//in autoRefresh mode would be bad since it would interrupt other UI stuff going on.
kendoGridHelper.onDataBound = function (o) {
    /// <summary>
    ///Binds databound row resselect
    ///Returns nothing.
    /// </summary>
    /// <param name="o" type="Dictionary">
    /// grid: html grid, onSelect
    /// </param>
    var grid = o.grid;
    var onSelect = o.onSelect;
 
    var kGrid = grid.data('kendoGrid');
 
    //give rows a tabindex so focus will work
    kGrid.content.find('tr').attr('tabindex', 0);
 
    //Reselect saved row by grid.selectedId
    if (kGrid.selectedId != undefined) {
        var dataRow = kGrid.dataSource.get(kGrid.selectedId);
        if (dataRow != undefined) {
            var row = kGrid.table.find("tr[data-uid='" + dataRow.uid + "']");
            if (row.length) {
                kGrid.select(row);
                //call onSelect method since change event will ignore it since the selectedId has not changed.
                if (!kGrid.autoRefresh && onSelect != undefined)
                    onSelect(kGrid.selectedId);
            }
        }
    }
 
    //select first row if nothing else selected
    if (!kGrid.select().length && kGrid.table.find('tr').length) {
        kGrid.select(kGrid.table.find('tr').first());
    }
 
    kGrid.autoRefresh = false;
 
};
Tags
Grid
Asked by
Łukasz
Top achievements
Rank 1
Answers by
Łukasz
Top achievements
Rank 1
Alexander Valchev
Telerik team
Alexander
Top achievements
Rank 1
Dan
Top achievements
Rank 1
Rikin Patel
Top achievements
Rank 1
Share this question
or