How to know which column selected in event rowSelect?

[nghiemhd]

Hi all,

I have 5 columns like this
columnModel = [
                    { title: "Claim Number", width: 100, dataIndx: "ClaimNumber" },
                    { title: "Injured Worker's Name", width: 100, dataIndx: "WorkerName" },
                    { title: "Date of Injury", width: 100, dataIndx: "InjuryDate" },
                    { title: "Policy Number", width: 100, dataIndx: "PolicyNo" },
                    { title: "", width: gridWidth / 100 * 10, sortable: false, resizable: false, align: "center", render: ShowDetail }
                ];

var ShowDetail = function (ui) {
        var rowData = ui.rowData;
        var detail = '<a href="/Claim/ClaimDetails.aspx?claimNumber='
                  + encodeURIComponent(rowData.ClaimNumber)
                  + '"><span class="link">Detail</span></a>';

        return detail;
    }

and I use rowSelect event to load another grid.

claimGridObj = {                   
                    colModel: columnModel,                   
                    rowSelect: function (event, ui) {                     
                        var rowData = ui.data[ui.rowIndx];
                        LoadClaimHistoryGrid(rowData.ClaimNumber);
                    }
};

When user clicks on Detail column, it always call rowSelect event. So how to know which column selected in rowSelect event to prevent LoadClaimHistoryGrid when user clicks Detail column?

Thanks and regards

[paramvir]

Either use cellSelect event to detect the column

or

In rowSelect event check target of event, get closest td parent element, getCell Indices to detect the column

http://paramquery.com/api#method-getCellIndices

[nghiemhd]

Could you please show me the code to get closest td parent element of $(event.target)? I don't know how to get it.
Thank you very much.

[paramvir]

var $td = $(event.target).closest("td.pq-grid-cell");

[nghiemhd]

I try to debug and find that $(event.target) in rowSelect event returns the <div> of pqgird so $(event.target).closest("td.pq-grid-cell") will be empty. You can see in the attached file. So I try $(event.target).find("td.pq-grid-cell") and it returns many <td>, I don't know which td is selected item.

[paramvir]

I re-checked it.

Please use event.originalEvent.target instead of event.target

Example: http://jsfiddle.net/NSpUx/

[nghiemhd]

Thank you very much. It works perfectly.