how to select multiple rows in grid, maybe with checkbox?

Discussion Ask a question
,
1

Hi,

I have a grid, i want the user to select some of the rows, click a button and for something to happen with information from the selected rows.
from what i tried:

  • there is no way to select multiple rows
  • creating your own selected row logic can’t be done as there is no onRowClick event only onRowSelect, which won’t support toggling as it doesn’t “unselect”
  • there is no way to mimic onRowClick by doing unselect in the onRowSelected event, because there is no unselect api. it’s also impossible to select -1 or non existing row number.
  • there is no way to use the gridlevel onClick event to find out the row in question, maybe i’m missing something, is it possible to take the mouse coordinates and somehow get the displayed element at that position down to row level? i’m guessing not.
  • it’s possible to embed checkboxes via rich-text column, but there is no way to access them later via $w(“…”)
  • the nested html checkbox changes don’t propagate up: if you try to access the rich-text field to see if the checkbox was changed, understanding that it’s represented as text, you still see the text you originally placed there and not what the current html state is (e.g. checked)

any ideas on how this can be achieved?

2

If you mean by grid a “repeater” than you can select each individual item via following code:

$w(“#repeater1”).onItemReady( ($wInRepeater, itemData, index) => {
$wInRepeater(“#text1”).text = itemData.text1;
$wInRepeater(“#text2”).text = itemData.text1;

    $wInRepeater("#button1").onClick( (event) => { 
    **let**  $wInRepeater = $w.at(event.context); 
    console.log($wInRepeater("#text2").text)

})

$w(“#repeater1”).data = arrayOfObjects

Example if the repeaters 1st text 2 element is “Hello” and the repeaters 2nd text 2 element “World” it will output you either “Hello” or “World” depending on which button1 of the repeaters items you clicked.

3

Hi,
First thanks for the help.
Second, from this code it looks like the repeater you set up has buttons in it. How do you set that up in the editor? I only saw grids there, that you can add columns to, which have predefined types like image and text, not user input.

4

@nathang

Hey Nathan,

this was just a minimalistic example to get you “familiar” with the idea how it works. Basically you can put any element (buttons, check boxes, switches…) into a repeater and call them with the upper mentioned code. Simply replace the button by e.g. multiple check boxes and instead of a “on click” event you could use “on change”.

It is a little hard to give you specific advice without seeing the UI and knowing the final goal you want to achieve.

5

@oezdemirumut thanks, we had a bit of a misunderstanding the last message but i understand from your post that a repeater is not a grid and a grid is not a repater, my error was in creating a table when i should have used a normal repeater which seems to support embedded user input.
your code example will be helpful now that i’ve switched the editor elements. thanks!