Selection of checkbox on loading of list-box

Question

Hi Syncfusion Team,our requirement is we need to have checkbox selection in dual list-box ,for example, on creation of size range we can select multiple items(sizes) and need to send the data to backend and on opening the existing one(size range) it should automatically check the items(sizes) based on data received from backend while creation of that size range. Could you please let me know to achieve this?And one more query is that, is there any feature for sorting and filtering the data in dual list-box?

Thaneegairaj Sankar · Answer

Hi Bhagyasri, 
 
Thanks for contacting Syncfusion support.  
 
Query1: To save and retrieve the selected data in  dual list-box on initial rendering. 
 
We have checked your reported query. We can able to save the selected data and apply the saved data in dual list box on initial rendering, please find the below code example. 
 
[app.component.ts] 
 




updateCollection() { 
    var aData = this.listObj1.value; // it returns the selected value of 1st list box 
    var bData = this.listObj2.value; // it returns the selected value of 2nd list box 
    if (aData.length > 0) { 
      localStorage.setItem('dataA', JSON.stringify(aData)); 
    } 
    if (bData.length > 0) { 
      localStorage.setItem('dataB', JSON.stringify(bData)); 
    } 
  } 
  onCreated() { 
    var aDataCol = JSON.parse(localStorage.getItem('dataA') || '{}'); 
    if (aDataCol.length > 0) { 
      this.listObj1.value = aDataCol; 
      localStorage.removeItem('dataA'); 
    } 
    var bDataCol = JSON.parse(localStorage.getItem('dataB') || '{}'); 
    if (bDataCol.length > 0) { 
      this.listObj2.value = bDataCol; 
      localStorage.removeItem('dataB'); 
    } 
  } 
 
Initially select the list items using checkbox and click the send selected value button to store into the local storage or send the values to the backend. Then refresh the sample, dual list box will renders with the previously stored value. 
 
For your reference we have prepared a sample, please find the below link 
 
Link: https://stackblitz.com/edit/angular-712yid?file=app.component.ts 
 
Query2: Is there any feature for sorting and filtering the data in dual list-box? 
 
Ans:  We have checked your query and we suggest you to please refer the below documentation link, 
 
UG Link: https://ej2.syncfusion.com/angular/documentation/list-box/sorting-and-grouping/ 
 
Could you please check the above details and get back to us if you need further assistance on this. 
 
Regards,  
Thaneegairaj S