I have a table that is displaying data and i have a Mass action called add to my Contact.

  • 1
  • Problem
  • Updated 3 years ago
  • In Progress
I have a table that is displaying data and i have a Mass action called add to my Contact. whenever a checkbox related to a record is cliked and Add to My Contact is pressed, the record will be added to Myconatct Table which is a different table. Now I want to highlight the data in the 1st table which is just added in the Mycontact table.
Photo of Sayan Choudhury

Sayan Choudhury

  • 172 Points 100 badge 2x thumb

Posted 3 years ago

  • 1
Photo of Irvin Waldman

Irvin Waldman, Champion

  • 9,006 Points 5k badge 2x thumb
One option to make the newly added row more visible to the user is to specify that the new row be added to the start of the Model. 
Photo of Sayan Choudhury

Sayan Choudhury

  • 172 Points 100 badge 2x thumb
got that.. but they can add n numbers of rows at a time. so want to highlight all of those...
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb
You'll need some javascript and css. At a high level:

Create a css class with the background color you want for highlighted cells.

At the start of your mass action, run a javascript snippet that will remove that css class from all the existing rows on your table, and add the new rows, adding your css class to them.
Photo of Sayan Choudhury

Sayan Choudhury

  • 172 Points 100 badge 2x thumb
can u please demonstrate with an examole.
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb
Just thought of this this morning: have you considered leaving the new rows you add unsaved at first? Then your new rows would show up in that nice gold italics font, easily distinguished by your users as 'new,' until they decide to save.

If you really want to pursue the highlighting new rows option, I'm sure someone can give you a full example, but here's something to at least get you started:

your CSS will probably look something like:
#MyTableId tr .newrow {background: lightcoral}

In you mass action snippet, you'll want to do something like this:

Use jQuery to find all existing rows of the table and remove your 'newrow' CSS class
My jquery is weak, so this is just an untested guess.
skuid.$('#MyTableId').children('<tr>').removeClass('newrow'); 

Next, get your selected items from your parent table and add them to your table, adding the CSS class 'newrow' to each. You'll probably want to use $.each() to loop through all the records you're adding.
There are plenty of examples of massaction snippets around, so you shouldn't have trouble finding something you can adapt.