|
export class CheckBox extends SampleBase {
constructor() {
super(...arguments);
//define the data with category
this.countries = [
{ Name: 'Australia', Code: 'AU' },
{ Name: 'Bermuda', Code: 'BM' },
{ Name: 'Canada', Code: 'CA' },
{ Name: 'Cameroon', Code: 'CM' },
{ Name: 'Denmark', Code: 'DK' },
{ Name: 'France', Code: 'FR' },
{ Name: 'Finland', Code: 'FI' },
{ Name: 'Germany', Code: 'DE' },
{ Name: 'Greenland', Code: 'GL' },
{ Name: 'Hong Kong', Code: 'HK' },
{ Name: 'India', Code: 'IN' },
{ Name: 'Italy', Code: 'IT' },
{ Name: 'Japan', Code: 'JP' },
{ Name: 'Mexico', Code: 'MX' },
{ Name: 'Norway', Code: 'NO' },
{ Name: 'Poland', Code: 'PL' },
{ Name: 'Switzerland', Code: 'CH' },
{ Name: 'United Kingdom', Code: 'GB' },
{ Name: 'United States', Code: 'US' }
];
// maps the appropriate column to fields property
this.checkFields = {text: 'Name', value: 'Code'};
}
onChange(args) {
if (this.mulObj.viewWrapper) {
this.mulObj.viewWrapper.style.display = 'none';
}
this.mulObj.chipCollectionWrapper.style.display = 'block';
let inputPos = this.mulObj.overAllWrapper.getBoundingClientRect()
let popupPos = this.mulObj.popupWrapper && this.mulObj.popupWrapper.getBoundingClientRect();
if (inputPos && popupPos && (inputPos.top + inputPos.height > popupPos.top)) {
this.mulObj.popupWrapper.style.top = (inputPos.top + inputPos.height) + 'px';
}
}
onSelect(args) {
this.mulObj.addChip(args.itemData.Name, args.itemData.Code, args.e);
var proxy = this;
setTimeout(function () { proxy.onChange(args, this.mulObj) }, 50)
}
onCreate(args) {
this.mulObj.chipCollectionWrapper = this.mulObj.createElement('span', {
className: 'e-chips-collection',
styles: 'display:none'
});
this.mulObj.componentWrapper.appendChild(this.mulObj.chipCollectionWrapper);
}
onFocus(args) {
this.mulObj.viewWrapper.style.display = 'none';
}
onSelectedAll(args) {
this.mulObj.hidePopup();
}
onRemoved(args) {
var proxy = this;
setTimeout(function () { proxy.onChange(args, this.mulObj) }, 10)
}
render() {
return (<div id="multichecbox" className='control-pane'>
<div className='control-section col-lg-8'>
<div id="multigroup" className="control-styles">
<h4>CheckBox</h4>
<MultiSelectComponent id='multiselect-checkbox' ref={(scope) => { this.mulObj = scope; }} dataSource={this.countries} fields={this.checkFields} placeholder="Select countries" mode="CheckBox" showSelectAll={true} filterBarPlaceholder="Search countries" popupHeight="350px" change={this.onChange.bind(this)} select={this.onSelect.bind(this)} created={this.onCreate.bind(this)} focus={this.onFocus.bind(this)} selectedAll={this.onSelectedAll.bind(this)} removed={this.onRemoved.bind(this)}>
<Inject services={[CheckBoxSelection]} />
</MultiSelectComponent>
</div>
</div>
</div>);
}
}
render(<CheckBox />, document.getElementById('sample')); | 
