Dynamically Apply the CSS to newly generated CHIP LIST

[Harshida Parmar]

I am generating the NEW CHIP List when the user changes the value from the dropdown list. 

When I run the page --> First-time page load display all the CHIPS --> Change the value from Dropdown--> New Chip list generates. 

Here is the dropdown value, when I change the DROPDOWN value the new chip list gets generated. 

<select class="form-control" id="selectTrainer" onchange="getTeacher(this)">
<option value="All">All</option>
@foreach (var teacherDeatails in ViewBag.datasourceTeacher)
 {
<option value="@ teacherDeatails.ID">@ teacherDeatails .Name</option>
 }
</select>

Here is the chip list which gets display the FIRST TIME when the page LOAD.

<div class="sample-padding">
<ejs-chiplist id="divChipData" selection="Single" click="FilterChipData">
<e-chips>
 @foreach (var product in (List<FilterTagInfo>)ViewBag.VBFilterTags)
 {
 <e-chip text="@product.Name" value="@product.ID" enabled="true"></e-chip>
 }
</e-chips>
</ejs-chiplist>
</div>

Here In the newly generated chip list, I want to apply the CSS here when you click on any newly generated chip.

new ej.buttons.ChipList({
chips: newChipBind, selection: "Single", click: function (e) {
alert('you have clicked ' + e.text);
document.querySelector('.e-chip-list').classList.add(".e-selection");
FilterChipData(e);
}}, '#divChipData');

[Shalini Maragathavel]

Hi Harshida, 

Greetings from Syncfusion support. 

Based on your query, we suspect that you need to apply custom styles to the selected Chip in the ChipList. We would like to let you know that by default e-active class will be added to the selected items of the ChipList. You can achieve your requirement by applying the required styles to the e-active class of the Chip as demonstrated in the below code snippet. 

 

<style> 

    #chip-filterTags .e-chip.e-active { 

        background-color: blue; 

    } 

 

</style> 

You can also apply styles to the specific Chips by adding the custom class to the Chips by using cssClass and applying the styles to that custom class as demonstrated in the below code snippet, 

 

<ejs-chiplist id="chip-filterTags" selection="Single"> 

    <e-chips> 

        @foreach (var item in ViewBag.dataSource) 

        { 

            <e-chip text=@item cssClass=@item enabled="true"></e-chip> 

        } 

    </e-chips> 

</ejs-chiplist>
<style> 

#chip-filterTags .e-chip.BIOLOGY.e-active {   

        background-color: green; 

    } 

</style> 

 

 

In the above code, we have added the Chip text as the custom class to the Chips using the cssClass property.

Please find the below sample for your reference. 

  

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Chip-893663432-149004878.zip 

Please get back to us if you need any further assistance.  

Regards,  

Shalini M.