Grid – not binding to click event

[BrianParticipant]

Hi,

I am trying to bind to a rowselection, but am unable to get the row information from a user selection. This method works for other grids in the same application. This particular grid populates without a problem.

Here is my bind:

$("#agentQueueNotFiled").jqxGrid({selectionmode: 'singlerow'});
    $("#agentQueueNotFiled").bind('rowdoubleclick', function (event) {
	    var row = event.args.rowindex;
	    var datarow = $("#agentQueueNotFiled").jqxGrid('getrowdata', row);
	    var cn = $("#agentQueueNotFiled").jqxGrid('getcellvalue', datarow, 'claim_id');
	    console.log("Queue selection called");
	}); 

Here is my grid:

function getAgentQueueNotFiled(){
	var notes = 
	{
		dataType: "json",
		dataFields: [
			{ name: 'claim_id', type: 'string' },
			{ name: 'claimTypeCode', type: 'string' },
			{ name: 'claimSubTypeCode', type: 'string' },
			{ name: 'accountNumber', type: 'string' },
			{ name: 'claimStatus', type: 'string' },
			{ name: 'claimStatusDetail', type: 'string' },
			{ name: 'filedDate', type: 'date' },
			{ name: 'estimatedFileByDate', type: 'date'},
			{ name: 'followUpDate', type: 'date' },
			{ name: 'daysOut', type: 'string' },
			{ name: 'miCarrier', type: 'string' },
			{ name: 'investor', type: 'string' },
			{ name: 'investorGroup', type: 'string' },
			{ name: 'assignedTo', type: 'string' },
			{ name: 'triggerDate', type: 'date' },
			{ name: 'mgmtApprovalFlag', type: 'int' },
			{ name: 'claimFilingPartyName', type: 'string' },
			{ name: 'loan_type', type: 'string' },
			{ name: 'LiquidationType', type: 'string' }			
		],			
		url:url
	};
	
	var notesDataAdapter = new $.jqx.dataAdapter(notes);     
	$("#agentQueueNotFiled").jqxGrid(
		{
			width: '100%',
			altrows: true,
			sortable: true,
	       	pageable: true,
	       	filterable: true,
	        pagerButtonsCount: 10,
	        source: notesDataAdapter,
	        filtermode: 'excel',
	        selectionmode: 'singlerow',
	        autoshowfiltericon: true,
	        autoheight: true,
	        autorowheight: true,
	        columnsResize: false,
	        columns: [
	        	{ text: 'Type', dataField: 'claimTypeCode', cellsalign: 'center', width: '4%', },
	            { text: 'Subtype', cellsalign: 'center', dataField: 'claimSubTypeCode', width: '7%' },
	            { text: 'Acct Number', cellsalign: 'center', dataField: 'accountNumber', width: '10%' },
	            { text: 'Status', cellsalign: 'center', dataField: 'claimStatus', width: '6%' },
	            { text: 'Filed Date', cellsalign: 'center', dataField: 'Filed_Date', width: '8%', cellsformat: 'd' },
	            { text: 'Est File Date', cellsalign: 'center', dataField: 'estimatedFileByDate', width: '9%', cellsformat: 'd'},
	            { text: 'Follow Up Date', cellsalign: 'center', dataField: 'followUpDate', width: '10%', cellsformat: 'd' },
	            { text: 'Days Out', cellsalign: 'center', dataField: 'daysOut', width: '8%' },
	            { text: 'MI Carrier', cellsalign: 'center', dataField: 'miCarrier', width: '10%' },
	            { text: 'Investor', cellsalign: 'center', dataField: 'investor', width: '10%' },
	            { text: 'Analyst', cellsalign: 'center', dataField: 'assignedTo', width: '8%' },
	            { text: 'Trigger Date', cellsalign: 'center', dataField: 'triggerDate', width: '9%', cellsformat: 'd' },
	            { text: 'Filing Party', cellsalign: 'center', dataField: 'claimFilingPartyName', width: '10%' },
	          	{ text: 'Loan Type', cellsalign: 'center', dataField: 'loan_type', width: '10%' },
	          	{ text: 'Liquidation Type', cellsalign: 'center', dataField: 'LiquidationType', width: '10%' }		            
	        ]
	    }); 
	    return false;     
} // getAgentNotFiledQueue

Thanks!

[Peter StoevKeymaster]

Hi BC,

For triggeting row selection changes, you should use the “rowselect” event. “rowdoubleclick” is raised when an user double-clicks on a row. Ex: http://jsfiddle.net/jqwidgets/CgvvZ/. Also note that the “getcellvalue” method expects a row index, not row data as parameter. Example: http://jsfiddle.net/jqwidgets/pyE55/

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[BrianParticipant]

I’ve copied the sample but am still not able to get the row selection to work. Is it possible there is a conflict with other jqxgrids on the page?

$("#agentMyQueue").on('click', function(){
	console.log('clicked');
	});
	
$("#agentMyQueue").on('rowdoubleclick', function (event) {
	console.log('rowdoubleclick');
	});

I’ve tried to test the click event, clicking on the div containing the JQ grid works everytime. I am still unable to get the ‘rowdoubleclick’ to fire. I have tried rowselect, cellselect, celldoubleclick using .bind and .on.

Thanks!

[Peter StoevKeymaster]

Hi Brian,

No, it is not possible to have conflict. “click” event as you can see in the Grid’s API Documentation is not available, too. You may look at the first sample which shows how to use the “rowdoubleclick” event. As you can see, the event works fine in the current version of jQWidgets – 3.3.0. It also does not matter whether you use “bind” or “on. Finally, when you select a row, the “rowselect” event is raised, not “rowdoubleclick”.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[BrianParticipant]

[SOLVED]

I was doing a couple things that caused rowselect to not work. First, I wrapped the rowselect function with the ‘bindingcomplete’ event, I moved that outside of the function. Second, I was camalCasing the datafield declaration (i.e. { text: ‘Subtype’, cellsalign: ‘center’, dataField: ‘claimSubTypeCode’, width: ‘7%’ })

Thanks for the help.

[Author]

Posts