Pre-selected data does not appear

[LUCIANO ALMEIDA PIMENTA]

Good Morning

I have a problem with MultiSelect.

The first time the screen loads or uses the Crtl + Swft + R keys, the component works (image anexo).

When I navigate the routes of my application, when I return to the screen that has the component, it no longer appears (image anexo).

When I click on it, it gives the message that there are no records (image anexo).

When I leave, it shows only the codes that I configured to appear when I load (image anexo).

The HTML code:

 #checkboxType [dataSource]='dataType' [fields]='fields' [(ngModel)]="valueType"> 

dataType = list of items that will be loaded by the component

valueType = list of items that I want to be shown as configured by the component

public dataType: Array<Object> = [];

public valueType: Array<Object> = [];

Attachment: Images_a1baba2a.zip

[Berly Christopher]

Hi LUCIANO, 

  

Greetings from Syncfusion support. 

  

While checked the provided screenshot, when you back to the MultiSelect component’s page, it will show the corresponding ID for the provided value instead of the text value. We have checked the MultiSelect component inside the routing with pre-select value. After navigating the page, the reported issue is not occurred at our end. 

  

We have prepared the sample and attached it below. 

Sample Link: https://stackblitz.com/edit/angular6-routing-demo-dmpweh?file=src%2Fapp%2Fdashboard%2Fdashboard.component.ts 

  

So, please check the above sample and share any issue reproducing sample that will help us to check and proceed further at our end.  

  

Regards, 

Berly B.C 

[LUCIANO ALMEIDA PIMENTA]

Good Morning

The difference between the example project and mine, is that the pre-selected data for my project comes from a query on the server and I fill in the valueType property in ngOnInit.

In your example, the pre-selected data is fixed in the code.

Does it make a difference?

[LUCIANO ALMEIDA PIMENTA]

I modified my project to have fixed values and it worked. The problem is when the data comes from the server.

Is it the question of the event that I fill the component (ngOnInit)?

[LUCIANO ALMEIDA PIMENTA]

Did you understand the problem? When the data comes from the server, what I already mentioned happens.

Is it like that or do I need to change the event I'm loading the component list?

[Ponmani Murugaiyan]

Hi LUCIANO, 

Thanks for the patience. 

We have checked your query with remote data by modify the sample with the provided information and it is working as expected in our end. Here we have attached the ensured sample. 

ngOnInit(): void { 

    this.mode = 'CheckBox'; 

    this.filterPlaceholder = 'Search countries'; 

    this.valueType = ["AU", "FR"]; 

    this.remoteValue = ["ALFKI", "ANATR"]; 

} 

 

 

Sample: https://stackblitz.com/edit/angular6-routing-demo-qk1jpy?file=src%2Fapp%2Fdashboard%2Fdashboard.component.ts  

 

Also, the reported issue may occurred if the datasource is not fetched yet when value is set to the control. We would like to know you that ActionComplete event will trigger once data is fetched from the server. So we suggest you to set the value to the control in ActionComplete event and ensure whether the issue is resolved. If not please provide the issue reproducing sample to provide you the better solution at our end. 

 

Regards, 

Ponmani M 

[LUCIANO ALMEIDA PIMENTA]

Perhaps I was not clear, the remote values are the values that select the component items, not the values that fill the list for example.

About ActionComplete, do you have an example for me to use?

[Ponmani Murugaiyan]

Hi LUCIANO, 

Thanks for your patience. 

Here we have demonstrated with an example to update the predefined value for remote datasource using actionComplete events.    

<ejs-multiselect id="multiselectelement" [dataSource]="data" [fields]="fields" [query]="query" [placeholder]="placeholder" [(ngModel)]="remoteValue" [showDropDownIcon]="true" [mode]="mode" showSelectAll="true" [filterBarPlaceholder]="filterPlaceholder" (actionComplete)="onActionComplete()"></ejs-multiselect> 

... 

public onActionComplete() { 

    this.remoteValue = ["ALFKI", "ANATR"]; 

} 

Modified sample:  https://stackblitz.com/edit/angular6-routing-demo-oqodxx?file=src%2Fapp%2Fdashboard%2Fdashboard.component.ts  

Regards, 

Ponmani M