multi select dropdown to database

Question

Hi I am new to syncfusion. May I  know how can I store "multi select drop down" to database and load selected value from database. any example. I am using angular 5RegardsAttachment: app_21e3c95.7z

Karthikeyan Viswanathan · Answer

Hi Irfan, 
 
Thanks for contacting Syncfusion support. 
 
To the multiselect value, you can post the value and access it in the server side. Kindly refer to the following code. 





        [HttpPost] 
        public ActionResult Index(string[] multiselect) 
        { 
            var SelectedValues = multiselect; 
            //store the value to the database 
            return View(); 
 
        } 

The obtained values can be stored in the database. To set a value to the multiselect control, you need to use the value property in the control. Kindly refer to the following UG link: https://ej2.syncfusion.com/angular/documentation/multi-select/api-multiSelectComponent.html#value  

Sample link: http://www.syncfusion.com/downloads/support/forum/139705/ze/Sample-1053022180 

Regards, 
Karthikeyan V.

Irfan · Answer

Hi

Thanks you for you response. I am talking about angular5 not MVC. Please correct me if I am wrong

https://www.syncfusion.com/products/angular/multiselect

Also, In angular multiselection how can I delete all item when user click 'X'. Please see image

Attachment: drop_77a15eaf.7z

Karthikeyan Viswanathan · Answer

Hi Irfan, 
 
We have prepared a sample in angular for saving and retrieving data using the angular service. To display the values, you need to use the value property and assign the values as string array or number array. Kindly refer to the following UG link: https://ej2.syncfusion.com/angular/documentation/multi-select/api-multiSelectComponent.html#value  

To remove all selected items you can enable close icon using the showClearButton property. This is automatically remove all the selected items when the close button is clicked, kindly refer to the following UG link: https://ej2.syncfusion.com/angular/documentation/multi-select/api-multiSelectComponent.html#showclearbutton  

Sample link: http://www.syncfusion.com/downloads/support/forum/139763/ze/ng-dataBaseSample961853791 

Regards, 
Karthikeyan V.

Irfan · Answer

Hi

Thanks you for response. I have implemented using different approach. please how can I do using ids

<ejs-multiselect id='multiselectelement_{{id}}' [dataSource]='data'

[fields]='fields' (select)="select($event,data)" (removed)="deselect($event,data)"

[mode]='mode' [selectAllText]='selectAllText' [value]="data.multiselectvalue"

[placeholder]='placeholder'></ejs-multiselect>

select(selectEventArgs: SelectEventArgs, data)

{

var a = selectEventArgs.itemData;

let Id = a.Id;

// calling web api to add to database

}

deselect(selectEventArgs: SelectEventArgs, data)

{

var a = selectEventArgs.itemData;

let Id = a.Id;

// calling web api to delete to database

}

(select) : I am adding to database using id of data object

(removed): I am removing from database using id of data object

Now when user click on 'X'. I would like to delete all from the database

Attachment: Untitled_de2e6693.7z

Karthikeyan Viswanathan · Answer

Hi Irfan, 
 
Based on your requirement, we currently do not have a built-in event to handle the click of the clear icon in the MultiSelect control. So we need to manually add an event listener to achieve the requirement. Kindly refer to the following code snippet. 





  document.addEventListener("click",function (e){ 
    if(e.target.classList.contains("e-chips-close")){ 
      alert("clear icon is clicked"); 
      //Make request here to delete all the records 
    } 
  }); 

Use the document click and check the whether the clicked element is the clear icon and then make request to the server to remove all the items from the database. 

Sample: https://stackblitz.com/edit/angular-es24fs 
 
Regards, 
Karthikeyan V.

Irfan · Answer

Hi

Thanks for response.

Any possibility I can hide 'X' using below. Note: I don't want to hide 'X' on individual item

ngAfterViewInit() {

var elements = document.getElementsByClassName('span.e-chips-close.e-close-hooker');[0].style.visibility = 'hidden';

}

Karthikeyan Viswanathan · Answer

Hi Irfan, Based on your scenario, you can achieve this by using created event. Please refer the below code example:

 

@Component({ 
  selector: 'my-app', 
  templateUrl: './app.component.html', 
  styleUrls: [ './app.component.css' ], 
  encapsulation: ViewEncapsulation.None, 
})

 
public onCreate(args: {[key: string]: object}, ele: DropDownList) { 
  (ele.element.querySelector('span.e-chips-close.e-close-hooker') as HTMLElement).classList.add('customClass'); 
}

 
.e-multi-select-wrapper .e-chips-close.e-close-hooker.customClass { 
  display: none !important; 
}

Sample link: https://stackblitz.com/edit/angular-fg85yn?file=src%2Fapp%2Fapp.component.css Regards, Karthikeyan V.

Irfan · Answer

Hi
Thank you very much for reply. Only problem I am getting after deploying to beta server is in Google chrome I can't see 'X' with each item. see attached file.

However, I IE I can see.

Is their anything to do with styleUrls: ['../../../../node_modules/@syncfusion/ej2-dropdowns/styles/material.css']

Attachment: cross2_b0e30c58.7z

Please ready above email as well as I have attached script error.

Attachment: cross3_79f6f5c4.7z

Irfan · Answer

Hi
Thank you very much for reply. Only problem I am getting after deploying to beta server is in Google chrome I can't see 'X' with each item. see attached file.

However, I IE I can see.

Is their anything to do with styleUrls: ['../../../../node_modules/@syncfusion/ej2-dropdowns/styles/material.css']

Attachment: cross2_b0e30c58.7z

Please ready above email as well as I have attached script error.

Attachment: cross3_79f6f5c4.7z

Irfan · Answer

Hi
Thank you very much for reply. Only problem I am getting after deploying to beta server is in Google chrome I can't see 'X' with each item. see attached file.

However, I IE I can see.

Is their anything to do with styleUrls: ['../../../../node_modules/@syncfusion/ej2-dropdowns/styles/material.css']

Attachment: cross2_b0e30c58.7z

Please ready above email as well as I have attached script error.

Attachment: cross3_79f6f5c4.7z

Karthikeyan Viswanathan · Answer

Hi Irfan, Based on your shared details and code, we suspect that the issue is raised due to style encapsulation. To avoid this issue, we suggest to set the view encapsulation as none in component page. And also, the console error will occurred due to cache. Please refer the below code example:

 

@Component({ 
encapsulation: ViewEncapsulation.None, 
})

Refer the sample link: https://stackblitz.com/edit/angular-fg85yn?file=src%2Fapp%2Fapp.component.ts Regards, Karthikeyan V.

Irfan · Answer

HiThank you for response. I have below Content-Security-Policy in web config. If I remove below link. I can see 'X' image with each item.

https://fonts.googleapis.com/
; font-src 'self' https://fonts.gstatic.com/;
img-src 'self' data: " />

I believe you are using google font for 'X'. Any advice what the CSP should be ?

Irfan · Answer

I have below Content-Security-Policy which i stop to show 'X' on each item. If I comment it out. I can see the 'X'. I beleive multiselect control is using google font. any advice how to solve it.

John Rajaram · Answer

Hi Irfan, 
Sorry for the delay. 
We suggest you to include the “data” attribute for “font-src” field in your Content-Security-Policy. Please refer the below code snippets for more information. 




 
"font-src 'self' data: https://fonts.gstatic.com/;" 
 
Now the Google fonts will be loaded properly. For your reference we have created the sample with ASP.NET Core platform. Please find the sample from the following location. 
Sample: http://www.syncfusion.com/downloads/support/forum/139959/ze/CSP2959739733 
Let us know if you have any queries. 
Regards, 
John R

Irfan · Answer

HiThanks. I found same while doing google. anyways, thanks for help. Best forum

John Rajaram · Answer

Hi Irfan, 
We are glad to know that your problem has been resolved. Please let us know if you need further assistance on this. 
Regards, 
John R