Open rpashankar opened 5 years ago
render() {
let buttonContainer='<div class="btn-group tempClass" />'
let buttonText = options => {
if (options.length === 0) {
$('#mselect option').each(function() {
let input = $('input[value="' + $(this).val() + '"]')
input.prop('enabled', true)
input.parent('li').addClass('active')
})
if (this.props.placeHolder) {
return this.props.placeHolder
}
} else if (options.length === 1) {
buttonContainer='<div class="btn-group glyphicon glyphicon-filter" />'
return options[0].label
} else {
let labels = []
buttonContainer='<div class="btn-group glyphicon glyphicon-filter" />'
options.each(function() {
if ($(this).attr('label') !== undefined) {
labels.push($(this).attr('label'))
} else {
labels.push($(this).html())
}
})
return labels.join(', ') + ''
}
return ''
}
return (
<div>
<div
className={`select-box ${this.props.extraCssClass}`}
data-label={this.props.label}
>
<Multiselect
ref={this.myRef}
// ref="myRef"
onChange={this.handleChange.bind(this)}
data={this.props.items}
disabled={!this.props.items || !this.props.items.length}
buttonWidth="175px"
numberDisplayed="10"
className="Select"
buttonText={buttonText}
multiple
id="mselect"
enableFiltering={this.props.enableFiltering}
includeSelectAllOption={this.props.includeSelectAllOption}
onSelectAll={this.handleSelectAll.bind(this)}
onDeselectAll={this.handleDeselectAll.bind(this)}
buttonContainer={buttonContainer}
/>
</div>
</div>
)
}
Hi,
I am trying to get a filter icon along with button text on selecting any item from the dropdown. I am trying to change the buttonContainer className value on checking any item from the drop down and get the filter glyphicon. buttonContainer property is not getting updated..
Please find the below code i have used..