Refresh the chip based on Dropdown value

[Harshida Parmar]

1) I am fetching the data and display the CHIP List using the view bag. First time when page load I want to display all the chip details like

ALL MATHS SCIENCE GEOGRAPHY BIOLOGY

My Controller Code

ViewBag.TVPAllSubject = allSubject.ToList();

ViewBag. datasourceTrainerList = trainersInSectionList;

.cshtml ViewPage Code

<ejs-chiplist id="subject-filterTags" selection="Single" click="subjectFilters">
<e-chips>
@foreach (var product in (List<FilterTagInfo>)ViewBag.TVPAllSubject)
{
<e-chip text="@product.Name" value="@product.FilterTagID" enabled="true"></e-chip>
}
</e-chips>
</ejs-chiplist>

2) On the same page I have a teacher list with the HTML DROPDOWN

All@foreach (var trainerDetails in ViewBag.datasourceTrainerList) {@trainerDetails.Name}



< select class="form-control" id="selectTeacher" style="width:30%" onchange="getTeacher(this)" >

<option value="All">All</option>

@foreach (var trainerDetails in ViewBag.datasourceTrainerList)

 {

<option value="@trainerDetails.ID">@trainerDetails.Name</option>

}

 </select>

3) When I select the particular teacher name I want to update my chip list

For example, If a Teacher named "Mike" is taking lectures on MATHS AND BIOLOGY then I want to update my chip-list using JAVASCRIPT and generate a new chip list with the name MATHS and ​ BIOLOGY including the property id="subject-filterTags" selection="Single" click="subjectFilters", working same as when page gets loaded.

.

4) Down below I have tried the code but it is now working.

function getTeacher(selectObject) {
if (document.getElementById("selectTeacher").value != "All") {

document.getElementById('subject-filterTags').remove([0]);
​
document.getElementById('subject-filterTags').ej2_instances[0] = '@ViewBag.TVPFilterTags';
}
}

5) I have tried several ways using the

https://ej2.syncfusion.com/javascript/documentation/api/chips/chipList/

link but getting the proper result.

CHIP LIST is not updating.

[Shalini Maragathavel]

Hi Harshida, 

Greetings from Syncfusion support. 

Based on your query, we suspect that you need to show the chips based on the selected values of the dropdown. You can achieve your requirement by setting the visibility property as visible/hidden to the corresponding chip element using its class name in the onchange event of the dropdown as demonstrated in the code snippet, 

 

<ejs-chiplist selection="Single"> 

    <e-chips> 

          @foreach (var item in ViewBag.dataSource) 

        { 

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

        } 

 

    </e-chips> 

</ejs-chiplist> 

<select name="cars" id="drop" onchange="getTeacherVideo(this)"> 

                  .  . .
</select> 

<script> 

    function getTeacherVideo(args) {  

       

        if (value == "Mike" || value == "Duke") { 

            document.getElementsByClassName('MATHS')[0].style.visibility = "hidden"; 

            document.getElementsByClassName('SCIENCE')[0].style.visibility = "hidden"; 

            document.getElementsByClassName('ALL')[0].style.visibility = "hidden"; 

           document.getElementsByClassName('BIOLOGY')[0].style.visibility = "visible"; 

            document.getElementsByClassName('GEOGRAPHY')[0].style.visibility = "visible"; 

        } 

        else if (value == "John") {  

            document.getElementsByClassName('MATHS')[0].style.visibility = "visible"; 

            document.getElementsByClassName('SCIENCE')[0].style.visibility = "visible"; 

            document.getElementsByClassName('BIOLOGY')[0].style.visibility = "hidden"; 

            document.getElementsByClassName('GEOGRAPHY')[0].style.visibility = "hidden"; 

        } 

        else { 

            chip.refresh(); 

        } 

       

    } 

</script> 

 

Note: In the above sample 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-1339331121.zip 

API Link: https://ej2.syncfusion.com/documentation/api/chips/chipList/#cssclass 

Please get back to us if you need further assistance.

Regards, 

Shalini M.