ParamQuery grid support forum

General Category => Help for ParamQuery Grid (free version) => Topic started by: nghiemhd on September 30, 2013, 04:28:59 pm

Title: How to know which column selected in event rowSelect?
Post by: nghiemhd on September 30, 2013, 04:28:59 pm

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

Title: Re: How to know which column selected in event rowSelect?
Post by: paramvir on September 30, 2013, 07:49:03 pm

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 (http://paramquery.com/api#method-getCellIndices)

Title: Re: How to know which column selected in event rowSelect?
Post by: nghiemhd on October 01, 2013, 07:55:04 am

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.

Title: Re: How to know which column selected in event rowSelect?
Post by: paramvir on October 01, 2013, 05:26:46 pm

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

Title: Re: How to know which column selected in event rowSelect?
Post by: nghiemhd on October 02, 2013, 08:24:07 am

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.

(http://i887.photobucket.com/albums/ac78/nghiem419ddt/Host/CapturerowSelectpqgrid_zps16086c8f.png)

Title: Re: How to know which column selected in event rowSelect?
Post by: paramvir on October 02, 2013, 07:25:30 pm

I re-checked it.

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

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

Title: Re: How to know which column selected in event rowSelect?
Post by: nghiemhd on October 04, 2013, 11:42:47 am

Thank you very much. It works perfectly.