how to change row-action icon once the user select a row/clicks on a row in skuid table

  • 1
  • Question
  • Updated 3 years ago
  • Answered
Hi

I need to change the icon for a row-action once the user clicks on row/row action icon in table.
I am trying through a row action snippet, not knowing how to get it done.

I gave the icon "fa-square-o".

Every time the user selects a row, change icon to "
fa-check-square-o"  and if other row is selected change icon back on to "fa-square-o" 

Below is my snippet I tried:

var params = arguments[0],
$ = skuid.$;

//console.log('FROM the row action for SELECTION - params are BELOW');
//console.log(params);

var model = params.model;
var item = params.item;     //console.log('item =========='); console.log(item);
var list = item.list;       //console.log('item list ====='); console.log(list);

 /****   REMOVE the hightlight for rest of rows;  **************************
 *
 * WHILE removing highlight for row already selected , CLEAR the TEMP model and 
 * in the END after hightlighting current row , push the selected row into MODEL 
 *
 **************************************************************************/
    $.each(list.renderedItems, function()      
            { 
                this.element.removeClass('highlighted-row');
                //this.element.removeClass('fa-check-square-o');
            });

 /********  Highlight the current-ROW   ********/    
    item.element.addClass('highlighted-row');
Photo of KVin

KVin

  • 1,158 Points 1k badge 2x thumb

Posted 3 years ago

  • 1
Photo of JG GBC

JG GBC

  • 694 Points 500 badge 2x thumb
Try this:


var element = arguments[0].button[0],
$ = skuid.$;

if($(element).hasClass('fa-square-o')){
$('.fa-check-square-o').removeClass('fa-check-square-o').addClass('fa-square-o');
$(element).removeClass('fa-square-o').addClass('fa-check-square-o');
}else if($(element).hasClass('fa-check-square-o')){
$(element).removeClass('fa-check-square-o').addClass('fa-square-o');
}
(Edited)
Photo of KVin

KVin

  • 1,158 Points 1k badge 2x thumb
Thank you so much.
This works perfectly!
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
Another alternative is to use an action framework sequence on that row action you have already defined.  It should update a UI Only field on the model to be "true"   Then your row action icons can use conditional rendering to display based on whether the UI Only field is true or false. 

Declarative.  Sweet! 
Photo of KVin

KVin

  • 1,158 Points 1k badge 2x thumb
Thanks Rob! I will try this too.