I'm creating a Sharepoint list viewer with filtering and search. When the WebPart loads the list appears empty and only shows the items when I do a search or filter. When I delete the search or filter all the items appear. How can I show all items from the beginning?
after typing "a" (as an example)
child class code:
export class MisContactos extends React.Component<any, any>{
private _selection: Selection;
constructor(props: {}) {
super(props);
var misItems = this.props._items;
const columns: IColumn[] = [
{
key: 'column1',
name: 'ID',
fieldName: 'ID',
minWidth: 50,
maxWidth: 350,
isRowHeader: true,
isResizable: true,
isSorted: true,
isSortedDescending: false,
sortAscendingAriaLabel: 'Sorted A to Z',
sortDescendingAriaLabel: 'Sorted Z to A',
onColumnClick: this._onColumnClick,
data: 'string',
isPadded: true
},
{
key: 'column2',
name: 'Name',
fieldName: 'Title',
minWidth: 110,
maxWidth: 350,
isRowHeader: true,
isResizable: true,
isSorted: true,
isSortedDescending: false,
sortAscendingAriaLabel: 'Sorted A to Z',
sortDescendingAriaLabel: 'Sorted Z to A',
onColumnClick: this._onColumnClick,
data: 'string',
isPadded: true
},
{
key: 'column3',
name: 'Nachname',
fieldName: 'Nachname',
minWidth: 110,
maxWidth: 350,
isRowHeader: true,
isResizable: true,
isSorted: true,
isSortedDescending: false,
sortAscendingAriaLabel: 'Sorted A to Z',
sortDescendingAriaLabel: 'Sorted Z to A',
onColumnClick: this._onColumnClick,
data: 'string',
isPadded: true
},
{
key: 'column4',
name: 'Firmen',
fieldName: 'Company',
minWidth: 110,
maxWidth: 350,
isRowHeader: true,
isResizable: true,
isSorted: true,
isSortedDescending: false,
sortAscendingAriaLabel: 'Sorted A to Z',
sortDescendingAriaLabel: 'Sorted Z to A',
onColumnClick: this._onColumnClick,
data: 'string',
isPadded: true
},
{
key: 'column5',
name: 'Email',
fieldName: 'Email',
minWidth: 150,
maxWidth: 350,
isRowHeader: true,
isResizable: true,
isSorted: true,
isSortedDescending: false,
sortAscendingAriaLabel: 'Sorted A to Z',
sortDescendingAriaLabel: 'Sorted Z to A',
onColumnClick: this._onColumnClick,
data: 'string',
isPadded: true
},
{
key: 'column6',
name: 'Land',
fieldName: 'Land',
minWidth: 100,
maxWidth: 350,
isRowHeader: true,
isResizable: true,
isSorted: true,
isSortedDescending: false,
sortAscendingAriaLabel: 'Sorted A to Z',
sortDescendingAriaLabel: 'Sorted Z to A',
onColumnClick: this._onColumnClick,
data: 'string',
isPadded: true
},
{
key: 'column7',
name: 'Abteilung',
fieldName: 'Abteilung',
minWidth: 100,
maxWidth: 350,
isRowHeader: true,
isResizable: true,
isSorted: true,
isSortedDescending: false,
sortAscendingAriaLabel: 'Sorted A to Z',
sortDescendingAriaLabel: 'Sorted Z to A',
onColumnClick: this._onColumnClick,
data: 'string',
isPadded: true
}
];
this._selection = new Selection({
onSelectionChanged: () => {
this.setState({
selectionDetails: this._getSelectionDetails()
});
}
});
this.state = {
items: misItems,
columns: columns,
selectionDetails: this._getSelectionDetails(),
isModalSelection: false,
isCompactMode: false
};
}
public render() {
var { columns, isCompactMode, items, selectionDetails, isModalSelection, paises } = this.state;
return (<Fabric>
<div className={classNames.controlWrapper}>
<Toggle
label="Enable compact mode"
checked={isCompactMode}
onChange={this._onChangeCompactMode}
onText="Compact"
offText="Normal"
styles={controlStyles}
/>
<Stack>
<Checkbox
label="Spanien"
value="Spanien"
styles={controlStyles}
onChange={ e => {this._onSpanien} }
defaultChecked = {false}
/>
<Checkbox
label="Deutschland"
styles={controlStyles}
onChange={this._onDeutschland}
defaultChecked = {false}
/>
</Stack>
<Toggle
label="Toogle"
checked={isModalSelection}
onText="Modal"
offText="Normal"
styles={controlStyles}
/>
<TextField label="Filter by name" onChange={this._onChangeText} styles={controlStyles} />
</div>
<div className={classNames.selectionDetails}>{selectionDetails}</div>
<MarqueeSelection selection={this._selection}>
<DetailsList
items={items}
compact={isCompactMode}
columns={columns}
selectionMode={isModalSelection ? SelectionMode.multiple : SelectionMode.none}
setKey="set"
layoutMode={DetailsListLayoutMode.justified}
isHeaderVisible={true}
selection={this._selection}
selectionPreservedOnEmptyClick={true}
onItemInvoked={this._onItemInvoked}
enterModalSelectionOnTouch={true}
ariaLabelForSelectionColumn="Toggle selection"
ariaLabelForSelectAllCheckbox="Toggle selection for all items"
checkButtonAriaLabel="Row checkbox"
/>
</MarqueeSelection>
</Fabric>
);
}
public componentDidUpdate(previousProps: any, previousState: IDetailsListDocumentsState) {
if (previousState.isModalSelection !== this.state.isModalSelection && !this.state.isModalSelection) {
this._selection.setAllSelected(false);
}
}
private _onChangeText = (ev: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, text: string): void => {
var misItems2: IlistContactosItems[];
misItems2 = JSON.parse(JSON.stringify(this.props._items));
console.log("pasa por onChangeText");
this.setState({
items: text ? misItems2.filter(i => i.Title.toLowerCase().indexOf(text) > -1) : misItems2
});
}
}
export default MisContactosand the father class code:
export default class AaReact1 extends React.Component<IAaReact1Props, any> {
constructor(props: IAaReact1Props, any) {
super(props);
this.state = {
links: []
};
}
public componentDidMount() {
this.getContactosListData();
}
public render(): React.ReactElement<IAaReact1Props> {
console.log("render");
return (
<div className={styles.aaReact1}>
<MisContactos header={this.props.description} _items={this.state.links} />
</div>
);
}
private getContactosListData(): Promise<any> {
return this.props.spClientContext.get("https://Mock.sharepoint.com/sites/yo/_api/web/lists/getbytitle('Kontakte')/items?Odata=minimal",
SPHttpClient.configurations.v1).then((response: SPHttpClientResponse) => {
return response.json();
}).then(data => {
data=JSON.parse(JSON.stringify(data));
this.setState({ links: data.value });
});
}
}Thank you for your time and help.
