How can I use the column select button to only select the visible/filtered items?

annekate

When using the column select with the editor, it appears to select every item in that column rather than only the visible ones. This is unexpected as the user especially when I have filtered my table using the search filter input.

This is not specific to my code and looks like is the way it works by default, though I'm not sure if that's intentional. If you use the table in the datatables docs for Multi-item editing as an example, you can see the behavior by:
1. Use the search field to filter the table down by the keyword "London" (only rows with Office=London will show)
2. Then click "Select Columns" button and select the Office column
3. Click "Edit" to open the editor for just that column and change the value to whatever you want
4. When you submit the changes, clear out the search field filter so all values in the table show again and you'll see that every item in the table now has the city changed to whatever value you submitted in step 3.

I would expect ONLY the filtered items to be edited. Is there a configuration on the column select so that it only selects what's been filtered instead of ALL items in the table regardless of what's visible?

Here's a screen grab of the experience with the same table:

My current workaround is to modify the SelectAll button config so that when it is clicked it only selects the filtered rows:

        {
          extend: 'selectAll',
          action : function(e) {
            e.preventDefault();
            venues_table.rows({ search: 'applied'}).deselect();
            venues_table.rows({ search: 'applied'}).select();
          }
        },

This means if a user has the table filtered via search input, they can still bulk-edit only what's been filtered by:
1. Filter the table --> only shows rows that match the search query
2. Click "Select All" --> only selects the rows that match the search query in step 1
3. Click "Edit" --> shows the bubble editor for the selected rows, but shows ALL editable fields
4. Submit the editor --> only updates the items that were selected / matched the search query

This works as a work-around but ideally, a user could use the column select so when they open the editor they are only seeing 1 value to edit vs having to look at every editable field.

allan

Good point - The selectAll button doesn't have the option of applying a selector modifier at the moment. It just selects all.

I'll add such an option as I can see how that would be useful!

Allan

annekate

Actually I was able to modify the selectAll button via this option

{
  extend: 'selectAll',
  action : function(e) {
    e.preventDefault();
    venues_table.rows({ search: 'applied'}).deselect();
    venues_table.rows({ search: 'applied'}).select();
  }
},

so that it only selects what was filtered by the search.

My request is more for the selectColumns button so that it only selects what's visible on the table after it's been filtered.

allan

I've just added a selectorModifier option to the selectAll button type.

Now your button to select only the currently selected rows might look like:

{
  extend: 'selectAll',
  selectorModifier: {
    search: 'applied'
  }
}

which is basically what your action override does. Although that said, I'm wondering if it should have a deselect: boolean option in case the user has other rows selected first.

Regarding selectColumns - that selects the column as a whole. Do you mean the cells in the column perhaps? It will depend a bit on how you are triggering the multi-row edit?

Allan

annekate

That's great - thank you! I do think it might need a deselect option to deselect other rows first. Mostly because after search-filtering, it is pretty easy to have something selected that isn't visible anymore after filtering, so could be easy for the user to forget that when they click select all and inadvertently edit an old selection.

For the column-select issue, I'm not actually sure if it's more about the columns or the cells. The first half of my original post has a list + gif showing what I'm thinking. It's basically when I want to filter my data to a subset of items, and then select every cell in the X column of that subset of data. e.g. say I am a daycare business with multiple locations in multiple cities and I want to change the "Opening Hours" value for all of my locations in X city. I would first filter for locations in X city, then use the column select to select every visible cell in the "Opening Hours" column to edit.

allan

Super - thanks. I'm with you now. I need to have a little bit of a think about the right way to go about this and see if there is an elegant solution. What we want is to select all the cells in that column which are in the filtered set. We do not want to select the column.

It could be done with a custom button to trigger the editing, or to do the select all, but what I'm struggling with is to allow the user to select a random column with a single click and all the existing buttons.

Allan