"[SOLVED] p:dataTable row selection with arrow keys?

[JeeDev_User]

Hi all,
There is various ways to select row in dataTable, as described here:
https://www.primefaces.org/showcase/ui/ ... tion.xhtml

However, I would like to know is there a way to select row by scrolling in the table, by using up and down arrow key?

[Melloware]

Yes go here: https://www.primefaces.org/showcase/ui/ ... tion.xhtml

Look at the "Single with Row Click" example which is the 2nd table down.

1. Click on a row to select it.

2. Now press Up and Down arrow keys to move rows.

3. Press SPACEBAR to select a new row.

[JeeDev_User]

Thanks for response.
I saw this.
But this is not what I want.
I want for row to become current _without pressing SPACEBAR.
In other words, the row should become current immediately after the pressing Up (or Down ) arrow, without need to press SPACEBAR , or anything else.

Is it possible?

[Melloware]

Yep just have to override the javascript to perform a rowClick selection event when you press Arrow Up or Down. Just copy and paste this script to your page should do it.

Code: Select all

PrimeFaces.widget.DataTable.prototype.bindSelectionKeyEvents = function() {
        var $this = this;

        this.getFocusableTbody().on('focus', function(e) {
            //ignore mouse click on row
            if(!$this.mousedownOnRow) {
                $this.focusedRow = $this.tbody.children('tr.ui-widget-content.ui-datatable-selectable.ui-state-highlight').eq(0);
                if ($this.focusedRow.length == 0) {
                    $this.focusedRow = $this.tbody.children('tr.ui-widget-content.ui-datatable-selectable').eq(0);
                }

                $this.highlightFocusedRow();

                if($this.cfg.scrollable) {
                    PrimeFaces.scrollInView($this.scrollBody, $this.focusedRow);
                }
            }
        })
        .on('blur', function() {
            if($this.focusedRow) {
                $this.unhighlightFocusedRow();
                $this.focusedRow = null;
            }
        })
        .on('keydown', function(e) {
            var keyCode = $.ui.keyCode,
            key = e.which;

            if($(e.target).is(':input') && $this.cfg.editable) {
                return;
            }

            if($this.focusedRow) {
                switch(key) {
                    case keyCode.UP:
                    case keyCode.DOWN:
                        var rowSelector = 'tr.ui-widget-content.ui-datatable-selectable',
                        row = key === keyCode.UP ? $this.focusedRow.prev(rowSelector) : $this.focusedRow.next(rowSelector);

                        if(row.length) {
                            $this.unhighlightFocusedRow();

                            if($this.isCheckboxSelectionEnabled()) {
                                row.find('> td.ui-selection-column .ui-chkbox input').focus();
                            }
                            else {
                                $this.focusedRow = row;
                            }

                            $this.highlightFocusedRow();

                            if($this.cfg.scrollable) {
                                PrimeFaces.scrollInView($this.scrollBody, $this.focusedRow);
                            }

                            e.target = $this.focusedRow.children().eq(0).get(0);
                            $this.onRowClick(e,$this.focusedRow.get(0));
                        }
                        e.preventDefault();
                    break;

                    case keyCode.ENTER:
                    case keyCode.SPACE:
                        if($this.focusedRowWithCheckbox) {
                            $this.focusedRow.find('> td.ui-selection-column .ui-chkbox .ui-chkbox-box').trigger('click.dataTable');
                        }
                        else {
                            e.target = $this.focusedRow.children().eq(0).get(0);
                            $this.onRowClick(e,$this.focusedRow.get(0));
                        }

                        e.preventDefault();
                    break;

                    default:
                    break;
                };
            }
        });

    };

[JeeDev_User]

SuperB!
Thanks a lot.
Is there a way to mark answer as correct?

[Melloware]

Change the title of the post to "[SOLVED] p:dataTable row selection with arrow keys?"

[pokala]

Hello

Is there any example to work with p-table with single selection & navigate by selecting row with keyboard up & down arrow keys ?

Thanks in advance.

[Melloware]

You are in the wrong forum this is PrimeFaces forum you want PrimeNG forum.