How to Preselect Values for MultiSelectDropdown with Remote Data Source

Hi Syncfusion team,

I have a MultiSelectFor control render in the view, it's data source is remote data source which using UrlAdaptor with a query filter. The remote data source returns nothing when filter is empty (user not searching by keyword). The MultiSelectFor control works like picker where a search text box allows user to search for keyword and select multiple values.

The problem here is when I have a list of preselected value, its data source remain empty due to no keyword is searched. Therefore the MultiSelectFor is not selecting anything even the model contains a list of preselected value.

May I know how do I preselect items when in form initialization? or to prepopulate data source with only these preselected values so that its appear as selected?

Thank You!

Regards,
Khar Hui Chok

1 Reply 1 reply marked as answer

VS Vignesh Srinivasan Syncfusion Team January 22, 2021 01:57 PM UTC

Hi Khar, 
 
We have created sample based on your requirement with preselected value in MultiSelectFor. Please find the code below. 
 
Code snippet: 
 
 
@Html.EJS().MultiSelectFor(model => model.val).Placeholder("Select names").DataSource( 
                   obj => obj.Url("https://ej2services.syncfusion.com/production/web-services/api/Employees").CrossDomain(true).Adaptor("WebApiAdaptor")).Fields( 
                   new MultiSelectFieldSettings { Text = "FirstName", Value = "EmployeeID" }).Value(Model.Values).Render() 
 
public ActionResult Index() 
        { 
            MultiselectModel model = new MultiselectModel(); 
            model.Values = new int[] { 1, 2, 3 }; 
            return View(model); 
        } 
        [HttpPost] 
        public ActionResult Index(MultiselectModel model) 
        { 
            model.val = model.val; 
            return View(model); 
        } 
 
Screenshot: 
 
 
 
 
Kindly check with the above sample. Please let us know if you need any further assistance. 
 
Regards, 
 
Vignesh Srinivasan. 


Marked as answer
Loader.
Up arrow icon