MultiSelectComponent - tagging() - set (css)-style to single chip

[Laurin S]

Hi, I would like to set an individual style to a chip in the MultiSelectComponent, but I can only find the setClass() method in the suggested event "tagging". How can I set an individual style to each chip, which gets defined at runtime and therefore cannot be set as a class in css in advance?

I'm referring to this post https://ej2.syncfusion.com/react/documentation/multi-select/chip-customization/#chip-customization ... but I would need a method like "setStyle" (instead of setClass) or a workaround to set an individual style to that particular chip.

Motivation of the question: I would like to set dynamically the background color of each chip, whereas the background color are geting also fetched from an API via the datasource of the component and therefore cannot be set a css classes, since they depend on the API response.

Thanks.

[Berly Christopher]

Hi Laurin, 

  

Greetings from Syncfusion support. 

  

We have validated the requirement. We can achieve this requirement with help of assigning the dynamically fetched style value to the chip element style directly in the tagging event. Kindly refer the below code example. 

  

  constructor() { 

    super(...arguments); 

    // define the JSON of data 

    this.colorsData = [ 

      { 

        Color: 'Chocolate', 

        Code: '#75523C', 

        Style: 'background:pink;width:100px' 

      }, 

      { Color: 'CadetBlue', Code: '#3B8289', Style: 'width:290px' } 

    ]; 

    // maps the appropriate column to fields property 

    this.fields = { text: 'Color', value: 'Code' }; 

    // set the value to MultiSelect 

    // bind the tagging event 

    this.onTagging = e => { 

      var proxy = e; 

      e.setClass(e.itemData[this.fields.text].toLowerCase()); 

      setTimeout(e => { 

        if ( 

          document.querySelector('.e-chips.chocolate') && 

          document.querySelector('.e-chips.chocolate').innerText === 

            proxy.itemData.Color 

        ) 

          document.querySelector('.e-chips.chocolate').style = 

            proxy.itemData.Style; 

      }); 

    }; 

  } 

 

  render() { 

    return ( 

      <div className="col-lg-12 control-pane"> 

        <div className="control-section ms-chip-customize"> 

          <div id="multi-customize" className="control-styles"> 

            <h4>Chip Customization</h4> 

            <MultiSelectComponent 

              id="chip-customization" 

              dataSource={this.colorsData} 

              fields={this.fields} 

              mode="Box" 

              placeholder="Favorite Colors" 

              tagging={this.onTagging.bind(this)} 

            /> 

          </div> 

        </div> 

      </div> 

    ); 

  } 

} 

 

  

Sample: https://stackblitz.com/edit/react-ljyl6x?file=index.js  

  

If this solution does not meet your requirement, please share the data fetched from the API for the style property that will help us to check and proceed further from our end. 

  

Regards, 

Berly B.C