Getting key value and column value of clicked CGridView row

Hi there,

I need a jQuery function that will put key value (ID) and second column value of clicked CGridView row to specific hidden fields.

For this purpose I modified a piece of CGridView internal jQuery code of getSelection function into something like this:


$('#pacjenci-grid table tbody tr').click(function()

{

    	var keys = $('#pacjenci-grid > div.keys > span');


    	$('#pacjenci-grid > table > tbody > tr').each(function(i)

    	{

            	if($(this).hasClass('selected'))

            	{

                    	$('#Pacjenci_patientNAME').val($(this).children(':nth-child(2)').text());

                    	$('#Pacjenci_patientID').val(keys.eq(i).text());

            	}

    	});

});

In general this solution works fine. I’m only seeking for a help on two minor problems, that I can’t work around myself:

  1. Why does this work when I deselect item (row) - i.e. click it second time? I want it to work after first click.

  2. Why does it work only for first page and fails on any other?

Pagination is processed through standard AJAX refresh and CGridView is set to be able to select only one row at once.

Thank you in advance for any help,

Trejder

Why didn’t you use selectionChanged-property? You can do an ajax/get/post call in there and change whatever you want in your markup.

(maybe I’m not getting what you want to do ;) )

This piece of code gets all the rows and checks for the one that has a class “selected”… you don’t need that… you need only the row you clicked… so I suppose this code is not good for your case…

My guess is that it depends on the order the click handlers are registered.

/Tommy

I don’t use it, because I don’t know how to get text of second column of clicked row, when attaching JavaScript code to this property (event).

I only found example (in the forum and in yii core code) how to get ID (key value) of clicked row (using mentioned getSelection) when using selectionChanged.

But this is not enough for me. I need solution that will provide me with both ID (key value) and value of second column of every clicked row.

And of course - upon clicking it first time, not second time. And a solution that will work on all pages of paginated CGridView.

For first time I used solution, once mdomba showed me for obtaining value (text) of any column in clicked row. But this solution works only when attached via jQuery attach - doesn’t seems to be working when called in selectionChange. And I can’t get ID (key value) this way.

Therefore, my current situation is that I need to obtain two values of which one is one of the columns value and second one is not visible in the CGridView (ID - key value) so I need to use two differrent approaches - which is bad and which doesn’t work on other pages than first one.

Yes, probably. But, since I cleaned all the code, it seems that this is 100% internal Yii / Yii-jQuery code of CGridView problem.

Correction #1: It doesn’t work on second click (my bad guess). It works after first click but before selection is actually being changed - that’s why it returns proper values of row previously, not currently clicked. Seems that CGridView fires (jQuery reacts on) “onClick” before actually changing selection. Don’t know if it isn’t meant to be done this way?

Correction #2: It isn’t that it doesn’t work on second or any other page except first (my another bad guess). It doesn’t work on any page after AJAX refreshes CGridView. Go absolutely no idea, why does it happens this way, since - as I was informed - AJAX refresh of CGridView re-renders whole view page, therefore it should also parse (render) and attach my JavaScript code responsible for handling clicks on CGridView. Seems, it doesn’t do that.

Cheers,

Trejder

Maybe this helps:




'selectionChanged' => 'function(id) {

	var someId = $.fn.yiiGridView.getSelection(id);

	$.get(

		"'.$this->createUrl('someAction').'",

		{ id: someId[0] },

		function(data) {

			// change something in your DOM for example

			if(data.success)

				$("#hiddenFieldId").val(data.propertyOfModel);

		},

		"json"

	);

}',



This Javascript snippet calls "someAction" and you just need to query your DB to get the information you want in your controller like so:




public function actionSomeAction($id = null) {

	$model = Model::model()->findByPk($id);

	echo CJSON::encode(array(

		'success' => $success,

		'propertyOfModel' => $model->propertyOfModel,

	));

}



getSelection does not work in this case… because the custom JS code is executed before the gridview code sets the class SELECTED to the current row…

You can use this function…




Yii::app()->clientScript->registerScript('dc', "

$('#document-grid table tbody tr').live('click',function(e)

{

	var keys = $('#document-grid > div.keys > span');

	var pk=keys.eq(this.rowIndex-2).text();

	var value=$(this).children(':nth-child(2)').text();

	alert(pk+' - '+ value);

});

");



NOTE:

document-grid is the hardcoded grid ID

this.rowIndex-2 - is to substract the first two rows (headers and filters)… if you don’t use filters or headers you need to adjust this number appropriately…

Thank you all for contribution. Problem solved. Seems that you were right, yodel. Simple solutions are always the simplest! :]

I used my code, slightly modified:


function onSelectionChange()

{

    	var keys = $("#pacjenci-grid > div.keys > span");


    	$("#pacjenci-grid > table > tbody > tr").each(function(i)

    	{

            	if($(this).hasClass("selected"))

            	{

                    	$("#Pacjenci_patientNAME").val($(this).children(":nth-child(2)").text());

                    	$("#Pacjenci_patientID").val(keys.eq(i).text());

            	}

    	});

}

and attached it to selectionChanged, as you proposed:


'selectionChanged'=>'function(id){onSelectionChange()}',

Works like a charm! :] Thanks and cheers,

Trejder

Yeap! Noticed that! :] A bit too late, but I noticed it… :]

Thanks, mdomba. As always, your solutions are perfect, but this time fortunately I was able to figure out one myself! :]