Highlight selected row in a table

Hi Moshe,

You can get the parent list from the item like this:

var list = item.list;

You can then iterate over the renderedItems array and remove the ‘highlighted-row’ class from the elements. I’d do that like this:

$.each( list.renderedItems, function(){ this.element.removeClass( 'highlighted-row' ); } );

Once you’ve “cleared” the list, you can then set a particular row to be highlighted (using the code you’ve already got).

Check out some of the new API documentation posted today for more information:

• skuid.ui.Item
• skuid.ui.List

That looks great and the documentation will be really helpful! I just tried adding your code like so:

var params = arguments[0], $ = skuid.$;
var model = params.model;
var item = params.item;
var list = item.list;
item.element.addClass(‘highlighted-row’);
var row = item.row;
var Id = row.Id;
console.log(Id);
var RateModel = skuid.$M(‘TierRate’);
var tierGroupCondition = RateModel.getConditionByName(‘TierGroup’);
RateModel.setCondition(tierGroupCondition, Id);
RateModel.save({callback:function(result){
if(result.totalsuccess){
RateModel.updateData();
}
}});

$.each(list.renderedItems, function(){
this.element.removeClass(‘highlighted-row’);
});

My problem is that the selected row is not getting highlighted at all. I’m assuming this is because I am removing the class which is reversing the fact that I added the class in the first place. What I am trying to understand is where can I add that loop to remove the class from every row except for the one that I’m on? Does “list.renderedItems” contain all the rows, or only the ones that the user is not on?

Sorry I just actually decided to think and obviously that loop goes before the addClass line, it’s working great! If someone wants to reference this here’s the working code:

var params = arguments[0],   $ = skuid.$;
var model = params.model;
var item = params.item;
var list = item.list;
$.each(list.renderedItems, function(){ 
    this.element.removeClass(‘highlighted-row’);
});

item.element.addClass(‘highlighted-row’);
var row = item.row;
var Id = row.Id;
console.log(Id);
var RateModel = skuid.$M(‘TierRate’);
var tierGroupCondition = RateModel.getConditionByName(‘TierGroup’);
RateModel.setCondition(tierGroupCondition, Id);
RateModel.save({callback:function(result){
    if(result.totalsuccess){
        RateModel.updateData();
    }
}});

For reference for others who may be reading this post, here is an example of the “highlighted-row” CSS. It’s tricky because the CSS has to be “more” selective than the default Skuid CSS in order to actually have any effect:

table.nx-skootable-data tbody tr.highlighted-row td {    
   background-color: lightblue;
}

Zach, you’re a mind reader… this is exactly the problem I ran into, and the solution to it.