How to bind a click event to a column in list applet?

In last post we learnt how to bind a click event to a image on the form applet. This will work on any control on form applet as long as you have right selectors but this trick will fail in the list applet as the column is repeated for each row which means you cannot just use one selector for every row.In this post I will show you how to bind a click event for a column in each row.

Requirement:

On click of a Opportunity Status in list applet a confirm dialog should popup asking if you want to change the status of the record.

Solution (8.1.1.11):

I am not going to go into details of how to add the JS file entries to manifest screen and jump straight into the solution.This solution involves creating only a PR file.We need to add custom code to 2 methods in the PR that are

BindData : Used to add a unique identifier to our column to facilitate binding of click event (in this particlar case a custom css class).
BindEvents: Actually write the code to bind the click event of the column.

Solution Details – BindData:

ListPopup.prototype.BindData = function (bRefresh) {
SiebelAppFacade.ListPopup.superclass.BindData.call(this, bRefresh);
var pm = this.GetPM(); //get pm
var recordSet = this.GetPM().Get( "GetRecordSet" ); //get record set
var recordLength = recordSet.length; //get count for loop
for( var i = 0; i < recordLength; i++ ){
$("#" + (i+1) + "Account_Status").addClass("hoverlink"); //add custom class (for binding) to status column in each row
}
} //end of bind data

The code for bind data event is pretty simple. Run loop around all the records and add class with name hoverlink to the Account Status column. In a list applet each control is given a unique id which is a combination of row number and the field name with spaces replaced by underscrore (_). Using this knowledge we construct the selector and add class to our desired column ( in this case Account Status ) for each row.

The Second part of the solution is binding the click event to each column. For this part we will use our newly added class in BindData function.

BindEvents:

ListPopup.prototype.BindEvents = function (controlSet) {
SiebelAppFacade.ListPopup.superclass.BindEvents.call(this);
var pHolder = this.GetPM().Get("GetFullId"); //get placeholder
$('#s_' + pHolder + "_div table.ui-jqgrid-btable").on("click","td.hoverlink",{ctx:this},function(event){ //bind the click event and pass the context

var rowId = $(this).parent().attr("id"); //get the row number of the column that has been clicked
event.data.ctx.OnRowSelect(rowId); //physically select the row. Really important
ShowDialog("Change Status ?", event); // show dialog
event.preventDefault(); //stop the normal processing which is focusing on the current field
return false;
});
}

In bind events we make use jQuery “on” function to bind the click event on the class and pass the data. One important line of code that I would like point out is

event.data.ctx.OnRowSelect(rowId); //physically select the row. Really important

Since we are interrupting the normal click event and introduce a custom handler it is important to physically select the row so that server side methods can work on the right record. If don’t do that then the server side will act upon the last selected line. Finally we call the ShowDialog function to show jQuery Modal Dialog.

ShowDialog:

function ShowDialog(msg, event){
var dialogHTML = "<div id='canceldialog'>" + msg + "</div>"; //create a dummy div to hold dialog
var pm = event.data.ctx.GetPM(); // this will be needed in order to execute Applet/BC methods
//create a jquery dialog
$(dialogHTML).dialog({ //set the options
    autoOpen: true,
    height: 'auto',
    width: 'auto',
    title:'Confirm',
    close: function(){
       $(this).dialog("destroy"); //destroy the dialog on close
    },
    buttons:{
        "OK": {
           'text':'Ok',
           'click': function(){
                //Synchronous call to a applet/bc method to be called on click of OK button
                //pm.ExecuteMethod("InvokeMethod","AnyMethod");
                $(this).dialog("close"); //close dialog

            }
        },
       "Cancel" : {
          'text':'Cancel',
          'click': function(){
              //Synchronous call to a applet/bc method that needs to be called on click of cancel button
             //pm.ExecuteMethod("InvokeMethod","AnyMethod");
             $(this).dialog("close");
           }
        }
     }
});
}

This function just creates a jQuery Dialog and sets up the button to execute appropriate Server methods. This is how the dialog box will look like.

Notice an hand icon on when the mouse goes over Status column ? This was done through css

.hoverlink {cursor:pointer;}

Have Questions??? Find the comments section down below