10

I am trying to conditionally disable mouse click events on certain rows in a OUIF DetailsList. But I can't seem to get it to work. I tried overriding onRenderRow and setting CheckboxVisibility to none but it was still clickable. Then I tried wrapping a div around it and setting that to disabled. However, div's in React don't seem to have disabled attribute. So can anybody help me out here?

<DetailsList
    items={this.state.items}
    columns={this.getColumns()}
    selection={this.selection}                    
    selectionMode={SelectionMode.multiple}
    onRenderRow={this.renderRow.bind(this)}>
</DetailsList>

private renderRow(props: IDetailsRowProps, defaultRender: any){
    let state = this.state.items[props.itemIndex].workflowState;
    if(state === "disabledState"){
        //props.checkboxVisibility = CheckboxVisibility.hidden; <- Not working
        // return <div disabled={true}>{defaultRender(props)}</div> <- Not working
        return defaultRender(props);
    }
    else{
        return defaultRender(props);
    }
}

Solution:

this.selection = new Selection({ canSelectItem: this.canSelectItem.bind(this), onSelectionChanged: this.clickRow.bind(this) });

<DetailsList
    items={this.state.items}
    columns={this.getColumns()}
    selection={this.selection}                    
    selectionMode={SelectionMode.multiple}
    onRenderRow={this.renderRow.bind(this)}>
</DetailsList>

private canSelectItem(item: any): boolean {
    return item.state !== "disabledState";
}

2 Answers 2

9

Ok once again I can answer my own question. The Selection object does have a canSelectItem function to check if the user should be able to select certain items. This function should return a bool value and it takes the currently selected item from the array so you can check values easily. I edited my code above with the solution.

0
0

I would bind a function to onClick then preventDefault or stopPropagation ? Also edit the CSS to remove the cursor effect to make it looks like a normal HTML tag.

Something like:

if(state === "disabledState"){  
  let onClickFunc = this.preventClick.bind(this);
} else {
  let onClickFunc = this.normalClick.bind(this);
}

return <div onClick={onClickFunc}>{defaultRender(props)}</div>

1
  • Already tried overriding the onClick event. However, this wouldn't stop the row from being selected. Removing the cursor event DID work, but I still could select the row using the select all checkbox. I think I need to work with the Selection object that is bound to the details list. Commented Aug 16, 2017 at 15:38

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.