DropDownListFor multiple selection binding

Hello,

I'm trying to bind values to a multi-select dropdown, but I'm having troubles and after multiple tests I'm writing here:

I have this dropdown:
@Html.EJ().DropDownListFor(model => model.SelectedRolesForUserArray, (Syncfusion.JavaScript.Models.DropDownListProperties)Model.RolesListDropDown).DropDownListFields(f => f.Text("Name")).ShowCheckbox(true).WatermarkText("Seleziona Ruoli").Width("100%").Value(Model.SelectedRolesForUserArray.ToCsv())

Where:
  • model.SelectedRolesForUserArray is a string[] with the current enabled roles for the user (From a List<UserRole> loaded from Database)
  • Model.RolesListDropDown is a DropDownListProperties populated with all the roles available (code is based on this sample code: sample)
  • ToCsv() is an extender that translate the string[] to a CSV like => Admin,Role1,Role2 to preselect the roles in the dropdown
Everything is working good, except for a little detail: when I HttpPost the form, my SelectedRolesForUserArray contains the Name of the role and not the Id, so that I have "Admin,Role1,Role2" instead of "1,2,3" so my question are:

  • How can I bind the array to the IDs and not to the names?
  • Are there other methods to bind and preselect multiple values? Can I bind directly a List<UserRole> instead of DropDownListProperties?
Thanks in advance for your help!

                

5 Replies

DA Daniele January 24, 2018 12:57 AM UTC

God!

I solved myself by Adding in DropDownListFields(f => f.Text("Name") .Value("Id")).... -.-

Well, my second question is still valid:
  • Are there other methods to bind and preselect multiple values? Can I bind directly a List instead of DropDownListProperties?


KR Keerthana Rajendran Syncfusion Team January 24, 2018 11:57 AM UTC

Hi Daniele,       
   
Thank you for contacting Syncfusion support.   
   
Query : Are there other methods to bind and preselect multiple values?   
   
Yes, you can preselect multiple values either by using SelectedIndices property as shown below   
   
  @Html.EJ().DropDownListFor(model => model.auto1).Datasource((IEnumerable<RolesList>)ViewData["List"]).DropDownListFields(f => f.Text("Name").Value("Id")).SelectedIndices(new List<int> { 1,2}).ShowCheckbox(true).WatermarkText("Seleziona Ruoli").Width("100%")   
   
   
Else, you can use Selected field of DropDownList to specify the items to be selected in the list as shown below   
   
@Html.EJ().DropDownListFor(model => model.auto1).Datasource((IEnumerable<RolesList>)ViewData["List"]).DropDownListFields(f => f.Text("Name").Value("Id").Selected("IsSelected")).ShowCheckbox(true).WatermarkText("Seleziona Ruoli").Width("100%")   
   
  public ActionResult Index()   
        {   
   
            List<RolesList> Role = new List<RolesList>();   
            Role.Add(new RolesList{Id="001", Name="Manager"IsSelected = true});   
            Role.Add(new RolesList { Id = "002", Name = "Supervisor"IsSelected = false });   
            Role.Add(new RolesList { Id = "003", Name = "Team Lead", IsSelected = true });   
            Role.Add(new RolesList { Id = "004", Name = "Engineer", IsSelected = false });   
            ViewData["List"] = Role;   
            return View();   
        }   
   
Refer to the below given UG links for more details   
   
   
   
Query: Can I bind directly a List instead of DropDownListProperties?   
   
As Value property is of sting type you cannot directly bind list collection values. You can pass these multiples values as string for value property as shown below   
   
@{string MyList = "001,002"}   
   
  @Html.EJ().DropDownListFor(model => model.auto1).Datasource((IEnumerable<RolesList>)ViewData["List"]).Value(MyList).DropDownListFields(f => f.Text("Name").Value("Id")).ShowCheckbox(true).WatermarkText("Seleziona Ruoli").Width("100%")   
      
   
   
We have attached a sample for your reference which can be downloaded from the below link   
   
   
Regards,   
Keerthana.   
  
 



DA Daniele January 24, 2018 01:52 PM UTC

Hello!

The method, using IsSelected works like a charm. Actually (since I'm trying to move to Syncfusion) I've already had my List converted to a List of Mvc.SelectListItem so fields names were already perfect for my suits. I've then bound the dropdown to a list and it works.

Perfect! Thanks!


DA Daniele January 24, 2018 08:07 PM UTC

Hello again,

Maybe I should open another Thread since it's another control, but basically, I'm trying to do the very same thing but using ListBoxFor instead of DropDownListFor. No matter what, I'm always getting a Null reference exception for (model => model.auto1) even if data is present and not null.

In the screenshot, commented DropdownListFor works perfectly.


AP Arun Palaniyandi Syncfusion Team January 25, 2018 10:13 AM UTC

Hi Daniele,       
    
Thanks for your update. 
 
We have tried to replicate your mentioned issue with the same sample that we shared you before, but unfortunately we were unable to replicate the issue. We are not getting any Null reference exception for (model => model.auto1) as you mentioned. The ListBoxFor works as same as the DropDownListFor in the same sample. 
 
We have also shared the sample and a video below for your reference. 
 
 
 
Note: In this shared project, we have used the Syncfusion version of 15.4.0.17 based on your latest download history. 
 
Please check the shared sample, video and if you still face the same issue we request you to use our sample to replicate your issue and then share the sample. We also request you to share us the Syncfusion version that you were currently using. Hence these details will be greatly helpful for us to analyze and to provide a better solution 
 
Regards, 
Arun P. 


Loader.
Up arrow icon