Rerender ComboBox data (set dataSource to empty)

[Unknown]

Hello,

I am trying to set comboBox dataSource to empty array but I am still can see data that was rendered before my changes.

What am I doing:

On load I want to see one data in my comboBox. After value change in different comboBox I want to rerender data. Some times in cat be rerender to empty comboBox. I am doing in like this:

myFile.html

<ejs-combobox #ComboBox {someProperties}></ejs-combobox>

myFile.ts

@ViewChild('ComboBox') MyComboBox: ComboBox;

{someCode}

public setDataSource() {

     if (this.data.length < 0)

          this.MyComboBox.dataSource = [];

     else

          this.MyComboBox.dataSource = this.data;

}

If I set my dataSource to empty array - I see previuosly set values. If I set dataSource to some data - I see correct data. Maybe I am doing something wrong and must delete dataSource in some different way?

This is what data I am getting after setting dataSource to empty:

P.S. I am getting my data from WebAPI. I am using ej2-angular-dropdows version 17.1.49

[Sevvandhi Nagulan]

Hi AC, 

Greeting from Syncfusion support. 

We can able to reproduce the reported issue in our end. The cause of the issue is ulElement not updated property. You can set the value null to ulElement and list as mentioned in the below code snippet, 

    OnClick1(args) 

    { 

        this.localObj.dataSource = []; 

        this.localObj.dataBind(); 

        (this.localObj as any).ulElement = null; 

        (this.localObj as any).list = null; 

    } 

Please find the sample below, 

Sample Link: https://stackblitz.com/edit/angular-inpb12-e7ilc5?file=app.component.ts 

Regards, 

Sevvandhi N 

[Unknown]

Hello,

thank you for your answer. It works almost perfect but in some cases if I set my dataSource ant other stuff like in your example after using combobox destroy event I am getting an error (it looks like it is trying to hide popup event if it was not opened):

[Unknown]

I fixed this issue by also setting listData property to null:

(this.localObj as any).listData = null;

[Sureshkumar P]

Hi AC, 

 

Thanks for your update. Please get back to us if you need further assistance on this 

 

Regards, 

Sureshkumar P 

[Thashwin]

Can you please provide a similar solution for ASP .net core
Thanks

[UdhayaKumar Duraisamy]

Hi Thashwin,

We have recreated the sample in the ASP.NET core platform and shared the sample link below for reference. Please refer to the code snippet and sample for more details.

<ejs-combobox id="games" placeholder="Select a game" popupHeight="220px">

</ejs-combobox>

<hr />

 

<button onclick="LoadData()">Load Data</button>

<button onclick="RemoveData()">Remove Data</button>

 

<script>

 

    function LoadData()

    {

        document.getElementById('games').ej2_instances[0].dataSource = ['a','b','c'];

    }

    function RemoveData()

    {

        document.getElementById('games').ej2_instances[0].dataSource = [];

    }

</script>

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/CoreDynamicDataSource-245412455

Kindly try the above sample and let us know if this meets your requirement.

If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.

Regards,

Udhaya Kumar D