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 = argumentsm0],
$ = 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’);
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’); }
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!
Thank you so much.
This works perfectly!
Thanks Rob! I will try this too.
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.