X

Geertjan's Blog

  • January 1, 2016

Selecting a Row in Oracle JET ojTable (Part 2)

Geertjan Wielenga
Product Manager

I got some help from my colleague Max Starets yesteday, who told me about the 'beforecurrentrow' property of the 'ojComponent' binding expression... which was exactly what I was looking for:

Make sure to type 'beforecurrentrow' exactly as shown above, i.e., all lower case. It's strange that 'beforecurrentrow' is not shown in the code completion box in NetBeans IDE for the 'ojTable' component. Maybe it's a new property, I don't know.

Anyway, now that I don't need to assign the listener via JQuery anymore, i.e., as shown yesterday, which only appears to work when you set that right after the 'ko.applyBindings' statement, it's simple to use the code shown yesterday within a custom module, i.e., within a 'define' block, as shown below, which works perfectly and exactly how I wanted:

define(['ojs/ojcore', 'knockout', 
'ojs/ojknockout', 'ojs/ojtable'
], function(oj, ko) {
function homeContentViewModel() {
var self = this;
var deptArray = [
{DepartmentId: 20, DepartmentName: 'History'},
{DepartmentId: 10, DepartmentName: 'Geography'},
{DepartmentId: 30, DepartmentName: 'Biology'}];
self.datasource =
new oj.ArrayTableDataSource(
deptArray,
{idAttribute: 'DepartmentId'});
self.currentRowListener = function (event, ui) {
var newCurrentRow = ui.currentRow;
self.datasource.at(newCurrentRow['rowIndex']).
then(function (rowObj) {
var obj = rowObj['data'];
$('#selectedDepartmentId').text(obj.DepartmentId);
$('#selectedDepartmentName').text(obj.DepartmentName);
});
};
}
return homeContentViewModel;
});

Join the discussion

Comments ( 10 )
  • guest Tuesday, June 14, 2016

    Hi Gj,

    I have tried this "beforecurrentrow" but its not working . Is there any example in cookbook.

    Thanks,

    Hari Kiran Mutyala

    Oracle Commerce.


  • Geertjan Tuesday, June 14, 2016

    "its not working" is a meaningless problem description, can't help you at all with that. When you went to Google, and you typed "beforecurrentrow Oracle JET", what did you find? You must have found a lot of different topics, I just did that and found several topics with different scenarios.


  • Geertjan Tuesday, June 14, 2016

    PS: Plus, please join the mailing list and ask your Oracle JET questions there.


  • guest Saturday, September 3, 2016

    The code gets the row data when the promise is resolved.

    if there is some code that needs to be executed after the line

    self.datasource.at(newCurrentRow['rowIndex']).

    then(function (rowObj) {

    var obj = rowObj['data'];

    $('#selectedDepartmentId').text(obj.DepartmentId);

    $('#selectedDepartmentName').text(obj.DepartmentName);

    });

    // some more logic here that need to use current row data

    // which cannot be moved to then function

    I need this because my table has multiple selection and I need to get the selected rows and do some action on a button click


  • guest Tuesday, December 27, 2016

    above code did not work for me. It was giving 'rowIndex' not defined error. I made a small change and then it worked. self.datasource.at(newCurrentRow['rowIndex']) changed to self.datasource().at(rowIndex).then(function(rowObj)

    if (data['option'] === 'currentRow' && data['value'] !== null) {

    var rowIndex = data['value']['rowIndex'];

    self.datasource().at(rowIndex).then(function(rowObj)

    {

    var obj = rowObj['data'];

    self.selectedSupplier(obj.SupId);

    self.selectedSource(obj.Source);

    self.selectedDestination(obj.Destination);

    alert(self.selectedSupplier());

    });

    };

    };


  • Venu Krishna Tuesday, December 27, 2016

    Im getting invalid rowindex error so I changed code as below and it worked.

    self.currentRowListener = function(event, data){

    if (data['option'] === 'currentRow' && data['value'] !== null) {

    var rowIndex = data['value']['rowIndex'];

    self.datasource().at(rowIndex).then(function(rowObj)

    {

    var obj = rowObj['data'];

    ............................

    });

    };

    };


  • Venu Krishna Tuesday, December 27, 2016

    Im getting invalid rowindex error so I changed code as below and it worked.

    self.currentRowListener = function(event, data){

    if (data['option'] === 'currentRow' && data['value'] !== null) {

    var rowIndex = data['value']['rowIndex'];

    self.datasource().at(rowIndex).then(function(rowObj)

    {

    var obj = rowObj['data'];

    ............................

    });

    };

    };


  • Abhi Tuesday, June 6, 2017
    I need to merge some column header in ojTable.
    ex:
    -----------------------------
    col1 | col2 | col3 |
    | col21|col22 | |
    ------------------------------
    and each column col1, col21, col22 and col3 should be sortable.
    Can someone help me how this can be achieved
  • Guest Tuesday, July 18, 2017
    Hi

    self.currentRowListener = function (event, ui) {
    console.log('before current row listener'); is not getting triggered.
    ...

  • Guest Tuesday, July 18, 2017
    Hi

    self.currentRowListener = function (event, ui) {
    console.log('before current row listener'); is not getting triggered.
    ...


    data-bind="ojComponent: {component: 'ojTable',
    data: datasource,
    display: 'grid',
    selectionMode: {row: 'single', column:'none'},
    beforecurrentrow: currentRowListener,
    columnsDefault: {sortable: 'none'},
    columns: [{headerText: 'SEQNO',
    ...

    Thanks
Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.