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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Multicolumn ComboBox

Thread ID:

Created:

Updated:

Platform:

Replies:

146606 Aug 9,2019 08:11 PM UTC Aug 13,2019 10:00 AM UTC React - EJ 2 5
loading
Tags: ComboBox
Albert
Asked On August 9, 2019 08:11 PM UTC

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 [Syncfusion]
Replied On August 12, 2019 11:56 AM UTC

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 


Albert
Replied On August 12, 2019 01:42 PM UTC

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


Sevvandhi Nagulan [Syncfusion]
Replied On August 12, 2019 03:12 PM UTC

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 


Albert
Replied On August 12, 2019 03:31 PM UTC

I really appreciate your great solution.

Can we have border for columns in template?

Vinoth Kumar Sundara Moorthy [Syncfusion]
Replied On August 13, 2019 10:00 AM UTC

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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon