how to Select a Row in Oracle JET ojTable?

Question

in the oracle jet quick basic example i have this table in dashboard.htm :

 <table id="table" data-bind="ojComponent: {component: 'ojTable', 
                                            data: dataSource,

                                            columns: [
                                                     {headerText: 'Task number', field: 'number'},
                                                     {headerText: 'Task title', field: 'title'},
                                                     {headerText: 'Task priority', field: 'priority'},
                                                     {headerText: 'Assigned Date', field: 'assignedDate'},
                                                     {headerText: 'Creator Name', field: 'creatorName'},
                                                     {headerText: 'From User Name', field: 'fromUserName'},
                                                     {headerText: 'Created Date', field: 'createdDate'},
                                                     {headerText: 'Process Name', field: 'processName'},
                                                     {headerTemplate: 'oracle_link_hdr',template: 'oracle_link'}],
                                                      rootAttributes: {'style':'width: 100%;'}}">

                            </table>

what i want that when i select a row a alert of the number of the selected row appear. This what i have in the dashboard.js file :

define(['ojs/ojcore', 'knockout','jquery','ojs/ojknockout', 
'ojs/ojarraytabledatasource',  
'ojs/ojoffcanvas','ojs/ojtable'],  
 function (oj, ko,$) {  

function DashboardViewModel() {  
        var self = this;  
        self.data = ko.observableArray();  
        $.ajax({  
            'global': false,  
            'url': "aaaa",  
            'dataType': "json",  
            'beforeSend': function (xhr) {xhr.setRequestHeader ("Authorization", "Basic " + btoa("aaaa:aaaa"));},  
            'success': function (taches) {  
                $.each(taches.tasks, function () {  
                    self.data.push({  
                        title: this.title,  
                        number: this.number,  
                        priority: this.priority,  
                        assignedDate: this.assignedDate,  
                        creatorName: this.creatorName,  
                        fromUserName: this.fromUserName,  
                        createdDate: this.createdDate,  
                        processName: this.processName,  
                        link: this.href  

                    });  
                });  

            }  
        });  


        self.dataSource = new oj.ArrayTableDataSource(  
            self.data,   
            {idAttribute: 'number'}  
        );  


        $('#table').on("ojbeforecurrentrow", currentRowListener);  


    }  



    function taskFlow (url)  
        {  
            var myjson = null;  
            $.ajax({  
                'async': false,  
                'global': false,  
                'url': url,  
                'dataType': "json",  
                'beforeSend': function (xhr) {xhr.setRequestHeader ("Authorization", "Basic " + btoa("aaaa:aaaa"));},  
                'success': function (data) {myjson = data.detailsURL.href;}  
            });  
            return myjson;  
        };  


        function currentRowListener (event, data)  
        {  

            if (data['option'] == 'selection')  
        {  
            var selectionObj = data['value'];  


            var i = 0;  
            for (i = 0; i < selectionObj.length; i++)  
            {  
                var range = selectionObj[i];  


                var startKey = range.startKey;  




                if (startKey != null && startKey.row != null)  
                {  
                    alert (startKey.row );  
                    $("a[href^='aaaa']")  
                    .each(function()  
                        {   
                             this.href = this.href.replace('aaaa',   
                              taskFlow("aaaa/"+startKey.row));  
                        });  
                };                
            }        
        }  
        };  



  return new DashboardViewModel();  
}  
 );  

i found this blog but does not work should i add somthing to the main.js or what ? for more information this is how the files looks like:

thanks for helping .

Answer 1

Ameur,

Place the HTML that Om has provided, into the view of your application. ie. dashboard.html

Take the "contents" of the viewmodel from Om's solution and place it into the dashboard.js (or whatever viewModel you are using).

Then take the ojoptionchange handler line that Om has inside of the $document.ready call, and place that inside of the handleBindingsApplied lifecycle method that should be in the dashboard.js template.

Finally, in the define block, add to the end of the arguments, the reference to these two modules:

'ojs/ojtable', 'ojs/ojarraytabledatasource'

Save both view and viewModel and let us know how it looks.