2. PHPRunner Tips and Tricks
  3. How to select a record on the List page by clicking any on that record
This topic is locked

How to select a record on the List page by clicking any on that record

 		4/27/2015 3:10:19 PM
PHPRunner Tips and Tricks
Sergey Kornilov admin

To do so add the following code to List page Javascript OnLoad event.

$("tr[id^=gridRow]").bind('click',function() {

$("input[name^=selection]",this).click();

});


Now you can select/unselect any record simply by clicking anywhere on it.
If you want to do something fancier like changing the background color of selected row try this:

var selColor="antiquewhite";

var regColor="white";

$("tr[id^=gridRow]").bind('click',function() {

$("input[name^=selection]",this).click();

if ($("input[name^=selection]",this).prop('checked'))

$("td",this).css("background-color",selColor);

else

$("td",this).css("background-color",regColor);

});
S
 		safesurf 5/5/2015

If you want to keep the original color after you unselect check box.
Custom CSS:

.checkedHighlight {

background-color: yellow !important;


Javascript onload event:

$("tr[id^=gridRow]").bind('click',function() {

$("input[name^=selection]",this).click();

});
$(":checkbox").change(function() {

$(this).closest("tr").find("td").toggleClass("checkedHighlight", this.checked);

});

$("#chooseAll_1").change(function() {

$('#chooseAll_1').closest("table").find("tr").find("td").toggleClass("checkedHighlight", this.checked);

});
S
 		safesurf 5/6/2015

The code had to be changed to get it working in Chrome browser. The checkbox would not work in Chrome.
Custom CSS:

.checkedHighlight {

background-color: yellow !important;


Javascript onload event:

// Change check box anywhere on row

$(document).ready(function() {

$("tr[id^=gridRow]")

.filter(':has(:checkbox:checked)')

.addClass('selected')

.end()

.click(function(event) {

if (event.target.type !== 'checkbox') {

$(':checkbox', this).trigger('click');

}

})

.find(':checkbox')

.click(function(event) {

$(this).parents('tr:first').toggleClass('selected');

});

});
// Change row color after check box select

$(":checkbox").change(function() {

$(this).closest("tr").find("td").toggleClass("checkedHighlight", this.checked);

});

$("#chooseAll_1").change(function() {

$('#chooseAll_1').closest("table").find("tr").find("td").toggleClass("checkedHighlight", this.checked);

});



[/quote]
R
 		riajul74 6/2/2015

How can i use this for cell?
I am using Grid Layout for list view which mean singal row contains 5 Data with each have checkbox. if i click on the row being select 5



The code had to be changed to get it working in Chrome browser. The checkbox would not work in Chrome.
Custom CSS:

.checkedHighlight {

background-color: yellow !important;


Javascript onload event:

// Change check box anywhere on row

$(document).ready(function() {

$("tr[id^=gridRow]")

.filter(':has(:checkbox:checked)')

.addClass('selected')

.end()

.click(function(event) {

if (event.target.type !== 'checkbox') {

$(':checkbox', this).trigger('click');

}

})

.find(':checkbox')

.click(function(event) {

$(this).parents('tr:first').toggleClass('selected');

});

});
// Change row color after check box select

$(":checkbox").change(function() {

$(this).closest("tr").find("td").toggleClass("checkedHighlight", this.checked);

});

$("#chooseAll_1").change(function() {

$('#chooseAll_1').closest("table").find("tr").find("td").toggleClass("checkedHighlight", this.checked);

});




[/quote]
T
 		text 11/5/2015

Hi Sergey
Can this be adapted so that you could open up either view/edit/add just by clicking on the highlighted record?
Thanks



To do so add the following code to List page Javascript OnLoad event.

$("tr[id^=gridRow]").bind('click',function() {

$("input[name^=selection]",this).click();

});


Now you can select/unselect any record simply by clicking anywhere on it.
If you want to do something fancier like changing the background color of selected row try this:

var selColor="antiquewhite";

var regColor="white";

$("tr[id^=gridRow]").bind('click',function() {

$("input[name^=selection]",this).click();

if ($("input[name^=selection]",this).prop('checked'))

$("td",this).css("background-color",selColor);

else

$("td",this).css("background-color",regColor);

});