I am using bootstrap's table class (in particular class="table table-hover") on a list of data (using knockout for databinding in a single page application)-
<table id="tblAllCert" border="0" class="table table-hover" width="100%">
<tbody data-bind="foreach: allCertificates">
<tr id="AllCertRow" style="cursor: pointer" data-bind="a: console.log($data), click: $parent.selectThing, css: { 'highlight': $parent.isSelected() == $data } ">
<td>
<b><span data-bind=" text: clientName"></span> (<span data-bind=" text: clientNumber"></span>) <span data-bind=" text: borrowBaseCount"></span> Loan(s) </b>
Collateral Analyst: <span data-bind=" text: userName"></span>
Certificate: <span data-bind="text: lwCertID"></span> Request Date: <span data-bind=" text: moment(requestDate).format('DD/MMM/YYYY')"></span>
</td>
<td data-bind="text: $parent.isSelected"></td>
</tr>
</tbody>
</table>
I need the following to happen-
1. When a user clics on a row, class="highlight" should be implemented (highlights the clicked on row).
2. When a user clicks on a different row, remove the highlight class on the first row and apply the class="highlight" to the newly selected row. Return the first row to the original colors from bootstraps table class (class="table table-hover").
In short, only the row clicked on should be highlighted. The other rows should retain the characteristics of bootstrap's class="table table-hover". Ideas?
EDIT 7/23/2013 FIDDLE: / - ( KNOCKOUT CODE )-
define(['services/logger', 'durandal/system', 'durandal/plugins/router', 'services/CertificateDataService'],
function (logger, system, router, CertificateDataService) {
var allCertificates = ko.observableArray([]);
var myCertificates = ko.observableArray([]);
//var serverSelectedOptionID = ko.observableArray();
var isSelected = ko.observable();
var serverSelectedOptionID = ko.observable();
var CurrentDisplayThing = ko.observable(allCertificates);
var serverOptions = [
{ id: 1, name: 'Certificate', OptionText: 'lwCertID' },
{ id: 2, name: 'Client Name', OptionText: 'clientName' },
{ id: 3, name: 'Client Number', OptionText: 'clientNumber' },
{ id: 4, name: 'Request Date', OptionText: 'requestDate' },
{ id: 5, name: 'Collateral Analyst', OptionText: 'userName' }
];
var activate = function () {
// go get local data, if we have it
return SelectAllCerts(), SelectMyCerts();
};
var vm = {
activate: activate,
allCertificates: allCertificates,
myCertificates: myCertificates,
title: 'Certificate Approvals',
SelectMyCerts: SelectMyCerts,
SelectAllCerts: SelectAllCerts,
theOptionId: ko.observable(1),
serverOptions: serverOptions,
serverSelectedOptionID: serverSelectedOptionID,
SortUpDownAllCerts: SortUpDownAllCerts,
isSelected: ko.observable(),
selectThing: function(row, event) {
isSelected(row.lwCertID);
}
};
serverSelectedOptionID.subscribe(function () {
var sortCriteriaID = serverSelectedOptionID();
allCertificates.sort(function (a, b) {
var fieldname = serverOptions[sortCriteriaID - 1].OptionText;
if (a[fieldname] == b[fieldname]) {
return a[fieldname] > b[fieldname] ? 1 : a[fieldname] < b[fieldname] ? -1 : 0;
}
return a[fieldname] > b[fieldname] ? 1 : -1;
});
});
allCertificates.valueHasMutated();
return vm;
////////////
function SortUpDownAllCerts() {
allCertificates.sort();
allCertificates.valueHasMutated();
}
function SortUpDownMyCerts() {
return allCertificates.sort()
}
function SelectAllCerts() {
return CertificateDataService.getallCertificates(allCertificates);
}
function SelectMyCerts() {
return CertificateDataService.getMyCertificates(myCertificates);
}
//function RowSelected() {
// $('#tblAllCert tr').on('click', function (event) {
// $(this).addClass('highlight').siblings().removeClass('highlight');
// });
// $("#tblAllCert tr").addClass("highlight");
// $('#tblAllCert tr').css('background-color: Red');
//}
});
I am using bootstrap's table class (in particular class="table table-hover") on a list of data (using knockout for databinding in a single page application)-
<table id="tblAllCert" border="0" class="table table-hover" width="100%">
<tbody data-bind="foreach: allCertificates">
<tr id="AllCertRow" style="cursor: pointer" data-bind="a: console.log($data), click: $parent.selectThing, css: { 'highlight': $parent.isSelected() == $data } ">
<td>
<b><span data-bind=" text: clientName"></span> (<span data-bind=" text: clientNumber"></span>) <span data-bind=" text: borrowBaseCount"></span> Loan(s) </b>
Collateral Analyst: <span data-bind=" text: userName"></span>
Certificate: <span data-bind="text: lwCertID"></span> Request Date: <span data-bind=" text: moment(requestDate).format('DD/MMM/YYYY')"></span>
</td>
<td data-bind="text: $parent.isSelected"></td>
</tr>
</tbody>
</table>
I need the following to happen-
1. When a user clics on a row, class="highlight" should be implemented (highlights the clicked on row).
2. When a user clicks on a different row, remove the highlight class on the first row and apply the class="highlight" to the newly selected row. Return the first row to the original colors from bootstraps table class (class="table table-hover").
In short, only the row clicked on should be highlighted. The other rows should retain the characteristics of bootstrap's class="table table-hover". Ideas?
EDIT 7/23/2013 FIDDLE: http://jsfiddle/wood0615/5BKt6/ - ( KNOCKOUT CODE )-
define(['services/logger', 'durandal/system', 'durandal/plugins/router', 'services/CertificateDataService'],
function (logger, system, router, CertificateDataService) {
var allCertificates = ko.observableArray([]);
var myCertificates = ko.observableArray([]);
//var serverSelectedOptionID = ko.observableArray();
var isSelected = ko.observable();
var serverSelectedOptionID = ko.observable();
var CurrentDisplayThing = ko.observable(allCertificates);
var serverOptions = [
{ id: 1, name: 'Certificate', OptionText: 'lwCertID' },
{ id: 2, name: 'Client Name', OptionText: 'clientName' },
{ id: 3, name: 'Client Number', OptionText: 'clientNumber' },
{ id: 4, name: 'Request Date', OptionText: 'requestDate' },
{ id: 5, name: 'Collateral Analyst', OptionText: 'userName' }
];
var activate = function () {
// go get local data, if we have it
return SelectAllCerts(), SelectMyCerts();
};
var vm = {
activate: activate,
allCertificates: allCertificates,
myCertificates: myCertificates,
title: 'Certificate Approvals',
SelectMyCerts: SelectMyCerts,
SelectAllCerts: SelectAllCerts,
theOptionId: ko.observable(1),
serverOptions: serverOptions,
serverSelectedOptionID: serverSelectedOptionID,
SortUpDownAllCerts: SortUpDownAllCerts,
isSelected: ko.observable(),
selectThing: function(row, event) {
isSelected(row.lwCertID);
}
};
serverSelectedOptionID.subscribe(function () {
var sortCriteriaID = serverSelectedOptionID();
allCertificates.sort(function (a, b) {
var fieldname = serverOptions[sortCriteriaID - 1].OptionText;
if (a[fieldname] == b[fieldname]) {
return a[fieldname] > b[fieldname] ? 1 : a[fieldname] < b[fieldname] ? -1 : 0;
}
return a[fieldname] > b[fieldname] ? 1 : -1;
});
});
allCertificates.valueHasMutated();
return vm;
////////////
function SortUpDownAllCerts() {
allCertificates.sort();
allCertificates.valueHasMutated();
}
function SortUpDownMyCerts() {
return allCertificates.sort()
}
function SelectAllCerts() {
return CertificateDataService.getallCertificates(allCertificates);
}
function SelectMyCerts() {
return CertificateDataService.getMyCertificates(myCertificates);
}
//function RowSelected() {
// $('#tblAllCert tr').on('click', function (event) {
// $(this).addClass('highlight').siblings().removeClass('highlight');
// });
// $("#tblAllCert tr").addClass("highlight");
// $('#tblAllCert tr').css('background-color: Red');
//}
});
- What is your questions? What have you tried so far, what is not working? – nemesv Commented Jul 21, 2013 at 17:44
- The selected row is not highlighting. Here is a fiddle- jsfiddle/wood0615/5BKt6 . Also note, I changed the code some, as well as the code listed for this post. – Chris Commented Jul 23, 2013 at 13:41
3 Answers
Reset to default 2$('table').on('click','tr',function(e){
$('table').find('tr.highlight').removeClass('highlight');
$(this).addClass('highlight');
})
http://jsfiddle/XKjGJ/
I got it to work finally by changing the data-binding on the view to-
<tr id="AllCertRow" style="cursor: pointer" data-bind="click: $parent.selectThing, css: { highlight: $parent.isSelected() == $data.lwCertID }">
They key I was missing was the boolean pare in the css binding. Thanks to those who replied to my post.
var vm = function() {
var self=this;
self.isSelected = ko.observable(false);
self.selectThing = function (row, event) {
self.isSelected(true);
}.bind(this);
This will make your rows change color on selection.
Plugin your logic , so that only one row is selected. Now this selects all rows because its a parent property and all the rows bind to this parent level property.
This is not an exact solution, but this will help you to play around with KO