Multicolumn ComboBox

[Albert]

How we can have a multi column Combo box that has filter or is auto complete in react.

If it takes time, please advice how we can have something close to it?

Thanks

[Berly Christopher]

Hi Albert, 

  

Greetings from Syncfusion Support. 

  

We don’t have inbuild option for achieving Multicolumn ComboBox. Instead we can achieve your requirement through template support in ComboBox as mentioned below. 

[index.js] 

constructor() { 

        super(...arguments); 

 

        this.data = [{ demandaid: "1", descricao: "Cardioversor", numdemanda: "00003-3", marca: "Philips", modelo: "Cardio", numserie: "5489", tag: "668" }, 

        { demandaid : "2", descricao : "Incubadora", numdemanda : "00005-3", marca : "Siemens", modelo : "AA220", numserie : "162A" }]; 

        // maps the appropriate column to fields property 

        this.fields = { text: 'descricao', value: 'demandaid' }; 

    } 

    //set the value to header template 

 

    //set the value to item template 

    itemTemplate(data) { 

        return (<span><span className='colunacombobox'>{data.numdemanda}</span><span className='colunacombobox2'>{data.descricao}</span><span className='colunacombobox2'>{data.marca}</span><span className='colunacombobox2'>{data.modelo}</span><span className='colunacombobox2'>{data.numserie}</span><span className='colunacombobox2'>{data.tag}</span></span>); 

    } 

    render() { 

        return (<div className='control-pane'> 

    <div className='control-section'> 

        <div id='template'> 

            <ComboBoxComponent id="employees" dataSource={this.data} fields={this.fields} placeholder="Select an employee" itemTemplate={this.itemTemplate} popupHeight="270px" /> 

        </div> 

    </div> 

</div>); 

    } 

} 

 

  

Please find the sample below, 

Sample Link: https://stackblitz.com/edit/react-t8jyw9?file=index.html 

  

To know more about template, please refer the below UG Documentation link, 

UG Link: https://ej2.syncfusion.com/react/documentation/combo-box/templates/ 

  

Regards, 

Berly B.C 

[Albert]

Thanks for your comment, is there any way that when we type, it searches through all columns?

[Sevvandhi Nagulan]

Hi Albert, 

Yes , we have prepared a sample with your(“is there any way that when we type, it searches through all columns”) requirement. We suggest you to use ‘Predicate’ of dataManager to filter items based on multiple columns in filtering event of ComboBox as shown below. 

[index.js] 

        this.onFiltering = (e) => { 

         if (e.text!="") { 

            var predicate = new Predicate('descricao', 'contains', e.text, true); 

            predicate   = predicate.or('marca', 'contains', e.text,true); 

            predicate = predicate.or('numdemanda', 'contains', e.text,true); 

            predicate = predicate.or('modelo', 'contains', e.text,true); 

            predicate = predicate.or('numserie', 'contains', e.text,true); 

            predicate = predicate.or('tag', 'contains', e.text,true);   

            let query = new Query(); 

            //frame the query based on search string with filter type. 

            query = (e.text !== '' && e.value !== '') ? query.where(predicate) : query; 

            //pass the filter data source, filter query to updateData method. 

            e.updateData(this.data, query); 

        } 

    }; 

          render() { 

        return (<div className='control-pane'> 

          <div className='control-section'> 

             <div id='template'> 

             <ComboBoxComponent id="employees" dataSource={this.data}          fields={this.fields} placeholder="Select an employee" itemTemplate={this.itemTemplate} filtering={this.onFiltering.bind(this)} allowFiltering={true} popupHeight="270px" /> 

        </div> 

    </div> 

</div>); 

 } 

 

Please find the sample below, 

Sample Link: https://stackblitz.com/edit/react-t8jyw9?file=dataSource.json 

Regards, 

Sevvandhi N 

[Albert]

I really appreciate your great solution.

Can we have border for columns in template?

[Vinoth Kumar Sundara Moorthy]

Hi Albert,  

 

Thank you for the appreciation. 

 

We would like to let you know that using template support we achieved MultiColumn in ComboBox component. We would recommend you set the cssClass (e.g. cssClass="e-multi-column") property and set border to multicolumn td element as like in the below code example, 

 

Code Example 

itemTemplate(data) { 

        return ( 

          <table><tbody><tr><td class="e-text-center">{data.numdemanda}</td><td>{data.descricao}</td><td>{data.marca}</td> <td>{data.modelo}</td><td>{data.numserie}</td><td>{data.tag}</td></tr> </tbody></table>); 

    } 

    render() { 

        return (<div className='control-pane' > 

        <div className='control-section'> 

          <div id='template'> 

            <ComboBoxComponent id="employees" cssClass="e-multi-column" dataSource={this.data} fields={this.fields} placeholder="Select an employee" itemTemplate={this.itemTemplate} filtering={this.onFiltering.bind(this)} allowFiltering={true} popupHeight="270px"/> 

          </div> 

        </div> 

      </div>); 

    } 

 

CSS 

.e-multi-column.e-ddl.e-popup.e-popup-open td { 

    border: 1px solid rgba(0, 0, 0, 0.125); 

} 

 

Sample Link: https://stackblitz.com/edit/react-t8jyw9-t2tyjf?file=index.js 

 

Could you please check the above sample and get back to us if you need any further assistance on this? 

 

Regards, 

Vinoth Kumar S