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}  />;
       }

  }
0

I guess in your private method _onRenderRow you are using a missleading if clause. You check if ANY User Id is set, instead you should check if the current item is the one which is checked out.

I'm not familiar with the components you're using but I guess that's the reason why every row gets a check out icon instead of just one/some.

If I'm wrong and didn't get it, I'm sorry ;-)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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