How To: Kinetic - Working With Grid Selectors

Okay, so since App Studio has taken something as inocuous as a selected checkbox and made it require 40,000 steps to work, I figured I’d write up a quick How-To on how to get these working in Kinetic Grids.

  1. Set up your grid to pull in data from whatever source you’re using (outside the scope of this tutorial)

  2. Go into your grid > Grid Model and check the “Selectable” checkbox.

  1. Go into your grid > Grid Model > Selection Options and mark the “Checkbox Selection” checkbox (and “Show Select All” if that’s your jam)

  1. Go into your grid > Grid Model > Columns and add a new column. You can name it whatever, but I typically choose “Selected”. Set the “Erp Editor” to boolean. Check the “Selector” checkbox. When you check the selected row, this new column will now show “true/false”. Optionally, select the “Hidden” checkbox to hide it from your grid view.

Done! Now you can do whatever you need with your selector.

Bonus–here’s some steps to add the selected rows to a new grid. This will demonstrate how to work with multiple, selected rows.

  1. Add a new grid and bind it to an empty DataView.

  1. Create a no-trigger event with an add-row widget. Name the columns whatever you want (The blue strings in the following screenshot) and set the values to be {matches.SourceColumn}. You’ll see where “matches” comes from momentarily.

  1. Create an event to trigger off of; I used a button click. Within that event, add a dataview-condition widget and set up as follows:
    Dataview: Source dataview for your data
    Result: set this to “matches”. If you name it something else, be sure to update your params in step 2.
    Expression: SourceDataView.Selected – This should yield a true or false. If you named your selector column something else, then rename appropriately. Important syntax note: The typical syntax to get data from a column is {DataView.ColName}. This is not the case in this particular expression field. It does not want the curly braces, so only set it to DataView.ColName.
    Iterative Event: set this to be the name of the event you created in step 2.

Done!

IterativeAddRow

Stay frosty you cool cats.:cold_face: :cat:

5 Likes

Thank you so much for taking the time to write this up and share!!!