ejs-chiplist selected value pass in OnChage Event

[Harshida Parmar]

I am using syncfusion for displaying the list of subjects.

<ejs-chiplist id="chip-SubjectTags" selection="Single" click="FilterSubject" cssClass="e-primary">
<e-chips>
@foreach (var mySubject in (List<FilterSubjectInfo>)ViewBag.FilterTags)
{
<e-chip text="@mySubject.Name" value="@mySubject.SubjectTagID" enabled="true"></e-chip>
}
</e-chips>
</ejs-chiplist>
​

When selecting the subject let's say MATHS OR SCIENCE it calls the function FilterSubject(e) and fetch the data.

Now I have one dropdown list in which I have a list of Teacher's names.

<select class="form-control" id="selectTeacher" onchange="getTeacherVideo(this)">
</select>

function getTeacherVideo(selectObject) {
var value = selectObject.value;
//var abcValue = document.getElementById('chip-SubjectTags').selectObject;
//console.log(abcValue);
console.log(value);
}

Here in getTeacherVideo() function I want to use the chip-SubjectTags, selected chip value.

How can I access chip-SubjectTags chip value in Javascript.

[Shalini Maragathavel]

Hi Harshida, 

Greetings from Syncfusion support. 

Based on your query, we could understand that you need to get the selected chip value in the change event of dropdown. You can achieve your requirement by using the getSelectedChips method of Chip component as demonstrated in the below code snippet,  

index.cshtml 

<ejs-chiplist id="chip-avatar" click="FilterSubject" selection="Single" enableDelete="true"> 

    <e-chips>
        . . . 

    </e-chips> 

</ejs-chiplist> 

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

<script> 

    function getTeacherVideo(selectObject) { 

        var chip = document.getElementsByClassName('e-chip-list')[0].ej2_instances[0];//Chip instance. 

        var selected = chip.getSelectedChips(); //to get the value of the selected chip 

        console.log(selected); 

    } 

</script> 

Please find the below sample for your reference 

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

Kindly check the following links to know more about Chip component.  

UG Link: https://ej2.syncfusion.com/aspnetcore/documentation/chips/types/ 

API Reference: https://ej2.syncfusion.com/javascript/documentation/api/chips/chipList/#getselectedchips 

Please get back to us if you need further assistance.

Regards,
Shalini M. 

[Harshida Parmar]

Thank you for your reply, but in ONE PAGE I HAVE THREE LIST. 

How can I identify on which chip list I am working on?

<ejs-chiplist id="chip-StudentTags" selection="Single" click="FilterClasses" cssClass="e-primary">

<e-chips>

</e-chips>

</ejs-chiplist>

<ejs-chiplist id=" chip-TeachersTags" selection="Single" click="TeacherFilters">

 <e-chips>

</e-chips>

</ejs-chiplist>

<ejs-chiplist id=" chip-DepartmentTags" selection="Single" click=" DepartmentFilters">

 <e-chips>

</e-chips>

</ejs-chiplist>

[Shalini Maragathavel]

Hi Harshida, 

Good day to you. 

Based on your query, we suspect that you need to find the ChipList Id while selecting the chips. You can bind a common method for click event and get the corresponding ChipList Id using this.element.id property in the click event of Chip component as demonstrated in the below code snippet. 

 

<ejs-chiplist id="chip-StudentTags" click="findChipList" selection="Single" enableDelete="true"> 

    <e-chips> 

. . . 

    </e-chips> 

</ejs-chiplist> 

<ejs-chiplist id="chip-TeachersTags" selection="Single" click="findChipList"> 

    <e-chips> 

. . . 

    </e-chips> 

 

</ejs-chiplist> 

 

<ejs-chiplist id="chip-DepartmentTags" selection="Single" click="findChipList"> 

. . . 

 

</ejs-chiplist> 

<script> 

 

    function findChipList(args) {  

        var chip = document.getElementById(this.element.id).ej2_instances[0];//you can get the selected chip instance here] 

        alert("You have clicked the ' "+this.element.id+" ' ChipList") 

 

    } 

  </script> 

Please find the below sample for your reference 

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

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

 

If we have misunderstood, please elaborate on your requirement, for which case do you need to get the ChipList Id in detail with a video demonstration(if possible)  in order to understand it better. So that we can check from our end and provide the prompt solution.

Regards,
Shalini M. 

[Harshida Parmar]

Thank you for your help BUT. I am facing another issue here in the code which you have specified

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

<script> 

    function getTeacherVideo(selectObject) { 

        var chip = document.getElementsByClassName('e-chip-list')[0].ej2_instances[0];//Chip instance. 

        var selected = chip.getSelectedChips(); //to get the value of the selected chip 

    console.log(selected); 
       if (chip.selectedChips.length == 0) {
              var FilterTagInfo = {};
              FilterTagInfo.FilterTagID = "";
              FilterTagInfo.Name = "";
           }

 } 

</script>

 

The problem is: - 

If no chip is selected then I want to pass the ID AND NAME AS NULL but it shows me the error as shown down below. 

Uncaught TypeError: Cannot read properties of null (reading 'length')

[Shalini Maragathavel]

Hi Harshida, 

Good day to you. 

We checked your query and would like to let you know that the selectedChips property returns the selected chips Id. So we suggest you to check the selected items length using null value as demonstrated in the below code snippet. 

 

function getTeacherVideo(selectObject) { 

        var chip = document.getElementsByClassName('e-chip-list')[0].ej2_instances[0]; 

        var selected = chip.getSelectedChips(); 

        console.log(selected); 

        if (chip.selectedChips == null) { 

            var FilterTagInfo = {}; 

            FilterTagInfo.FilterTagID = ""; 

            FilterTagInfo.Name = ""; 

        } 

    } 

 

Please find the below sample for your reference. 

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

Please get back to us if you need further assistance.

Regards, 

Shalini M.