We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Multicolumn ComboBox

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

5 Replies

BC Berly Christopher Syncfusion Team August 12, 2019 03:56 AM

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, 


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


  
Regards, 
Berly B.C 



AL Albert August 12, 2019 05:42 AM

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



SN Sevvandhi Nagulan Syncfusion Team August 12, 2019 07:12 AM

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, 


Regards, 
Sevvandhi N 



AL Albert August 12, 2019 07:31 AM

I really appreciate your great solution.

Can we have border for columns in template?


VK Vinoth Kumar Sundara Moorthy Syncfusion Team August 13, 2019 02:00 AM

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); 
} 
 
 
Could you please check the above sample and get back to us if you need any further assistance on this? 
 
Regards, 
Vinoth Kumar S 


Loader.
Live Chat Icon For mobile
Up arrow icon