How to make work right click  same as left click on extendeddatatable : adding row selection event  on right click

Version 1

    There might be a requirement to select a grid row on right mouse click or execute an action on right mouse click on rich:extendeddatatable.

    The situation like selection of a grid row and opening a context menu on right click of a grid row with the information of that perticular grid row, here we need a grid selection on right click. There is no direct procedure / attribute I found. But there is a solution by updating rich:extendeddatatable client API, I have able to add this feature to the grid. Here by I am giving my workout..

     

    In richfaces-UI jar , I have updated extended-data-table.js to add a new listner like this

     

    In method addListener changed like this

     

    addListener:

    function(tr, rowIndex) {

    if

     

    (tr) {

    var

     

    listener = this.processClick.bindAsEventListener(this, rowIndex);

    Utils.DOM.Event.removeListeners(tr);

    Utils.DOM.Event.observe(tr,

    "click", listener);

     

     

     

    //new listener added by debdutta@:start

     

    var listener1 = this.processMouseDown.bindAsEventListener(this, rowIndex);

     

     

    Utils.DOM.Event.observe(tr, "mousedown", listener1);

     

    //new listener added by debdutta@:end

     

     

    Now  just before method

    processClick: function(event, rowIndex)

     

    Create a new method processMouseDown: function(event, rowIndex)  with below code

     

     

     

    //new method "processMouseDown" added by debdutta

     

     

    //This will add a new feature to rich grid , selecting row by right mouse click

     

     

     

    processMouseDown: function(event, rowIndex) {

     

     

    if

     

    (event.button ==2){

     

    if

     

    (this.options.selectionMode == "none") {

    return

     

    ;

     

    }

     

    var

     

    bSingleSelection = this.options.selectionMode == "single";

     

     

    if(!event.shiftKey) {

    this

     

    .shiftRow = null;

     

    }

    var

     

    range;

     

     

    if ( event.shiftKey && !event.ctrlKey && !bSingleSelection && !event.altKey) {

    var

     

    arr = $(this.prefix + ":n").rows[0].id.split(":");

     

    this.firstIndex = Number(arr[arr.length-1]);

     

    this.selectionFlag = "x";

     

    if(!this.shiftRow) {

    this

     

    .shiftRow = this.activeRow;

     

    }

    this

     

    .startRow = this.shiftRow;

     

    if (((this.startRow <= rowIndex) && (this.firstIndex <= this.startRow || rowIndex < this.firstIndex))

    || (

    this.startRow > rowIndex && this.firstIndex < this.startRow && rowIndex <= this.firstIndex)) {

    this

     

    .endRow = rowIndex;

     

    } else {

    this

     

    .endRow = this.startRow;

     

    this.startRow = rowIndex;

     

    }

    if

     

    (this.startRow > this.endRow) { //bugfix

    //without this selection of first row with shift was broken

     

     

    var t = this.startRow;

     

    this.startRow = this.endRow;

     

    this.endRow = t;

     

    }

     

     

    range = [this.startRow, this.endRow];

     

    this.setSelection(range);

     

    } else if (!event.shiftKey && event.ctrlKey && !event.altKey) {

    if

     

    (this.selection.isSelectedId(rowIndex)) {

    this

     

    .removeRowFromSelection(rowIndex);

     

    } else {

    if

     

    (!bSingleSelection || this.selection.size() == 0) {

    this

     

    .addRowToSelection(rowIndex);

     

    }

    }

    } else if

     

    (!event.shiftKey && !event.ctrlKey && !event.altKey) {

    this

     

    .selectionFlag = "x";

    range = [rowIndex, rowIndex];

     

    this.setSelection(range);

     

    }

    this

     

    .setActiveRow(rowIndex);

     

    if (event.shiftKey) {

    if

     

    (window.getSelection) {

     

     

    window.getSelection().removeAllRanges();

     

    } else if (document.selection) {

     

     

    document.selection.empty();

     

    }

    }

    this

     

    .selectionChanged(event);

     

     

    }

    return true

     

    ;

     

     

     

    },

     

     

    The above code will add the row selection listner on  right mosue click for extended data table

    Now in the xhtml/jsp page ,

     

    If you want to execute same action like onRowClick,

    add the below attribute , for rich:extenededdatatable,

     

    onRowMouseDown

     

    ="if(event.button ==2){  <put the required code here>   }"

     

    Hope this work might help you if you have same requirement.