1

I want to catch the event when click in a row field of a DetailsList in Webpart. My code looks like :

return (
      <div>
        <div>
          <div className="ms-Grid">   
            <div className="ms-Grid-row">
              <DetailsList
                items={_items}
                columns={this.state.columns}
                setKey='set'
                onRenderItemColumn={this._renderItemColumn}
                onColumnHeaderClick={this._onColumnClick.bind(this)}
                onItemInvoked={(item, index) => alert(`Item ${item.name} at index ${index} has been invoked.`)}
                onColumnHeaderContextMenu={(column, ev) => console.log(`column ${column.key} contextmenu opened.`)} />
            </div>
          </div>
        </div>
      </div>
    );
.....

private _renderItemColumn(item, index, column) {
    let fieldContent = item[column.fieldName];
    switch (column.key) {
      case 'file':
        return <Link onClick={this._onColumnClickView.bind(item)} id={item['id']}>{fieldContent}</Link>
      default:
        return <span >{fieldContent}</span>;
    }
  }

....
private _onColumnClickView(ev, column) {
    console.log(column);
// your code here
  }

But it doesn't work. The Link doesn't display. I changed the code to:

private _renderItemColumn(item, index, column) {
        let fieldContent = item[column.fieldName];
        switch (column.key) {
          case 'file':
            return <Link onClick={this._onColumnClickView.bind(this)} id={item['id']}>{fieldContent}</Link>
          default:
            return <span >{fieldContent}</span>;
        }
      }

But nothing changes. Any help will be greatly appreciated

2 Answers 2

0

try

onClick={(event) => {
   event.preventDefault();
   this._onColumnClickView(this);
}
2
0

you can actually put it directly this way

onClick={this._onColumnClickView}

the _onColumnClickView function will still know the event.

private _onColumnClickView = (event) =>{  
 console.log("event",event) 
}

Hope it helps somehow. Happy SharePointing!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.