how to select column data

[hwlv]

Clear and concise description of the problem

I would like to request the addition of a feature to support column selection. This feature should:

1. Allow users to click on a column header to select the entire column.
2. Maintain the column selection state when scrolling or resizing the grid.
3. Provide a visual indication of the selected column (e.g., by applying a specific CSS class).

Suggested solution

any thing

Alternative

No response

Additional context

No response

Validations

• [X] Follow our Code of Conduct
• [X] Read the Wikis.
• [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[ghiscoding]

Sorry but I won't be adding this feature, only Row Selection is currently available. SlickGrid never supported Column Selection and I am not intending to work on this either. This would most probably require a new Selection Model for Column Selection and I must again remind you that SlickGrid only accepts 1 Selection Model at a time, so if you ever create a Column Selection, you would not be able to use it at the same time as the Row Selection Model (which is probably not what you want)... So with this known limitation (1 Selection Model at a time) and considering that it would require a whole new Selection Model, I am not going to work on this myself. If you want to contribute a Pull Request for that new feature, that would be nice... otherwise it probably won't be implemented by myself.

If you want to try to contribute, then I guess you can take a look at SlickRowSelectionModel.ts and try to convert it to a Column Selection Model. There might be this old SlickGrid repo, that tried to do something similar with a new slick.cellrowcolselectionmodel.js, but I'm not sure if it was completed or not, so maybe it works, I don't know (or it might also be for something completely different, I don't know exactly).

and taking a look at Ag-Grid, it looks like they only support Row Selection and Range Selection which is the same that SlickGrid supports. I would have thought that Ag-Grid would also support Column Selection since it's a paid datagrid but it doesn't and so considering Ag-Grid doesn't even support it, I'm not very interested to support it either. I also don't see what benefit this feature would bring, I don't find it very appealing.

[ghiscoding]

Column Selection is not a SlickGrid feature, it not supported and I have no intention to support it either. However you could subscribe to some events like header click or cell click like onHeaderClick or onClick (for cell click) and apply some CSS yourself, I assume you will need to use the !important prop on the CSS

CSS

.row-selected {
    background-color: pink !important;
}

Event Subscribe

this._bindingEventService.bind(this.gridContainerElm, 'onheaderclick', (e: any) => {
      const args = e.detail.args;

      // remove all previous row selected CSS class
      document.querySelectorAll('.row-selected').forEach(c => c.classList.remove('row-selected'));

      // add new row selected CSS class
      const colIdx = this.sgb.columnDefinitions.findIndex(c => c.id === args.column.id);
      document.querySelector(`[data-id=${args.column.id}]`)?.classList.add('row-selected');
      document.querySelectorAll(`.l${colIdx}`).forEach(c => c.classList.add('row-selected'));
    });

Result

The only downside is that clicking on any header column will also Sort the column. You could also potentially use the same technique for mouse over with events like onHeaderMouseEnter, onMouseEnter and their inverse onHeaderMouseLeave, onMouseLeave