Selecting rows in a table via Javascript

  • 1
  • Problem
  • Updated 4 years ago
Hi everyone,

I have a table, and I'd like to select some of the rows from within some Javascript code, but I just can't seem to get it to work.

I've seen this response here which handles de-selecting rows, which makes me think my approach is not crazy, but extending this example doesn't appear to do what I need it to: https://community.skuidify.com/skuid/topics/snippet_code_to_deselect_selected_table_rows

I tend to explore the API via the dev console in Chrome, and here's what I've done:
  1. var mytable = skuid.$("#my-table").data("object"); to get the table
  2. mytable.list.renderedItems; to look at the items
  3. mytable.list.renderedItems["18charID"]; to look at a specific item - hey look, there's a selected property!
  4. mytable.list.renderedItems["18charID"].selected = true; doesn't appear to do anything in the UI. Maybe we need to...
  5. mytable.list.render({doNotCache:true}); Doesn't do anything either. In fact it resets the selected property to false.
  6. Variations on the above - visibleitems rather than renderedItems, and the render call with/without doNotCache and also refreshFields
The above seems in line with Zach's answer in the answer linked to above, and I've actually tested it in the console to make sure it does de-select the row. Anything obvious I'm missing?
Photo of Gary

Gary

  • 1,518 Points 1k badge 2x thumb

Posted 4 years ago

  • 1
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb
After
mytable.list.renderedItems["18charID"].selected = true;

Does 
mytable.list.renderedItems["18charID"].selected;
return true?

If so, have you subsequently tried
mytable.list.render({doNotCache:false});
?
Photo of Gary

Gary

  • 1,518 Points 1k badge 2x thumb
Hi Matt,

Yes, after setting selected to true, outputting the property to the console shows it is true. After the call to render however, it reverts to false. Which makes me think that I'm not setting selected in the right place (or maybe I need to do something other than render?), but I can't see any part of the API that I could use to set it to being selected.
Photo of Gary

Gary

  • 1,518 Points 1k badge 2x thumb
So my current solution is based on Zach's response to this question: https://community.skuidify.com/skuid/topics/is-there-a-js-option-to-select-all-rows-in-a-table

I look at the data in the row and then use click() to select it if the conditions mean it needs to be clicked.

It feels a little odd, as it's faking the click event, whereas it feels like I should be able to update the underlying data and have the Skuid API keep things up to date for me. But this works for now, in case anybody else if looking for something similar.