1

There is a DetailsList component inside spfx webpart, which loads all the documents/files using PnP.

There is a office-ui-fabric-react check out button outside DetailsList component.

When I select an item and click check out button, it checks out the document well using PnP. But check out icon displayed for all the items.

How can I make checkout icon displayed for only checked out items?

<div>
    <MarqueeSelection selection={this._selection}>
      <DetailsList
        items={items}
        compact={true}
        columns={columns}
        onRenderRow={this._onRenderRow}
        setKey='set'
        layoutMode={DetailsListLayoutMode.fixedColumns}
        isHeaderVisible={true}
        selection={this._selection}
        selectionPreservedOnEmptyClick={true}
        onItemInvoked={(item) => { this._openDocument(item, this); }}
        enterModalSelectionOnTouch={true}
      />
    </MarqueeSelection>
  </div>

 private _onRenderRow = (props: IDetailsRowProps): JSX.Element => {
     if(props.item.CheckoutUserId !=null)
      {
         return (
          <DetailsRow {...props}  />;
          <div>
            <img src={this._webUrl + 
              '/_layouts/15/images/CHECKOUT.gif'} height="50" width="50"> 
            </img>
          </div>
        )
      }
      else
       {
        return <DetailsRow {...props}  />;
       }

  }

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Browse other questions tagged or ask your own question.