Fluentui: Use selections with Basic List

[AparnaPrasad]

Describe the feature that you would like added

I am using Basic List to display grid Items as given in the example here https://developer.microsoft.com/en-us/fabric#/controls/web/list
I have checkboxes and I want to be able to use selection to check. I have used selection zone and marquee zone

selection={selection}>
key={grid-list-${triggerChangeNew}}
className='ms-ListGridExample'
items={this.props.job.files}
getItemCountForPage={this._getItemCountForPage}
getPageHeight={this._getPageHeight}
renderedWindowsAhead={2}
onRenderCell={this._onRenderCell}
/>

Unless I trigger the entire list using key I don't see change in checkboxes. But this causes the entire list to reload.
I want to be able to send selection object to List component like DetailsList

What component or utility would this be added to

List (Basic List)

Have you discussed this feature with our team, and if so, who

No

Additional context/screenshots

[AparnaPrasad]

Here is the code I am currently using:
`

                <SelectionZone
                    selection={selection}>

                        <List 
                            key={`grid-list-${triggerChangeNew}`}
                            className='ms-ListGridExample'
                            items={this.props.job.files}
                            getItemCountForPage={this._getItemCountForPage}
                            getPageHeight={this._getPageHeight}
                            renderedWindowsAhead={2}
                            onRenderCell={this._onRenderCell}
                    />

                </SelectionZone>

`

[natalieethell]

Hey @AparnaPrasad could you possibly provide a CodePen example for us demonstrating your scenario? Here's a basic List CodePen that has checkboxes but no Selection object, hopefully it can get you started: https://codepen.io/kevintcoughlin/pen/PoYyYqz. Thanks!

[AparnaPrasad]

That is a list of checkbox, which is what I have but I also want to be able to drag and select. MS office UI react provides component which works with details list but not with basic list or atleast I am not able to find the documentation on how to use it

[natalieethell]

@AparnaPrasad why not use DetailsList?

[msft-github-bot]

This issue has been automatically marked as stale because it has marked as requiring author feedback but has not had any activity for 4 days. It will be closed if no further activity occurs within 3 days of this comment. Thank you for your contributions to Fabric React!

[AparnaPrasad]

I need to use Basic list because I want to create a grid like view as below, and basic list provides support for that taking in height and width and adjusting automatically with screen width and height

[natalieethell]

@AparnaPrasad Got it. Have you checked out the implementation of TilesList? It's currently still in experiments, but it looks like it might be doing what you need, particularly with selection: http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/10546/merge/experiments/dist/index.html#/examples/tileslist. Check out the "TilesList with media tiles" example.

[msft-github-bot]

This issue has been automatically marked as stale because it has marked as requiring author feedback but has not had any activity for 4 days. It will be closed if no further activity occurs within 3 days of this comment. Thank you for your contributions to Fabric React!

[AparnaPrasad]

@AparnaPrasad Got it. Have you checked out the implementation of TilesList? It's currently still in experiments, but it looks like it might be doing what you need, particularly with selection: http://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/pull/10546/merge/experiments/dist/index.html#/examples/tileslist. Check out the "TilesList with media tiles" example.

Yes this is what I need.