Highlight selected row in a table

  • 1
  • Question
  • Updated 4 years ago
  • Answered
I have a table of parent records, with a row action to populate a child record table, with the children of the selected parent. The snippet for the action looks like this :
<code>
var params = arguments[0],   $ = skuid.$;
var model = params.model;
var item = params.item;
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();
    }
}});
</code>
I am using this line "item.element.addClass('highlighted-row');" to highlight the selected row. I would like to return the row back to normal if a different row is selected. so that my table will only have one row selected at a time. Is there a way I can do that programmatically?
Photo of Moshe Karmel

Moshe Karmel, Champion

  • 8,646 Points 5k badge 2x thumb

Posted 5 years ago

  • 1
Photo of JD Bell

JD Bell, Senior Product Engineer

  • 2,996 Points 2k badge 2x thumb
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:



(Edited)
Photo of Moshe Karmel

Moshe Karmel, Champion

  • 8,646 Points 5k badge 2x thumb
That looks great and the documentation will be really helpful! I just tried adding your code like so:
<code>
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');
});
</code>
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?
Photo of Moshe Karmel

Moshe Karmel, Champion

  • 8,646 Points 5k badge 2x thumb
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();
    }
}});




Photo of Zach McElrath

Zach McElrath, Employee

  • 49,056 Points 20k badge 2x thumb
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;
}


Photo of ktyler

ktyler

  • 9,244 Points 5k badge 2x thumb
Zach, you're a mind reader.... this is exactly the problem I ran into, and the solution to it.