How to handle data in dropdown with multiselect checkboxes?

[Iván]

How can I parse the data of multiselect dropdown with checkboxes? I obtains without problems the others controllers but the multiselect don't contain data. I Ise RemoteAdaptor to save the data to db.

Razor (Template Dialog):

@using Syncfusion.EJ2
@using Syncfusion.EJ2.DropDowns;

<div>
    <div class="form-row">
        <div class="form-group col-md-6 info">
            <h4>Datos</h4>
            <div class="e-float-input e-control-wrapper" style="padding-top:5px;">
                @Html.TextBox("name")
                <span class="e-float-line"></span>
                @Html.Label("name", "Nombre", new { @class = "e-float-text e-label-top" })
            </div>
            <div class="e-float-input e-control-wrapper" style="padding-top:9px;">
                @Html.TextBox("email")
                <span class="e-float-line"></span>
                @Html.Label("email", "E-mail", new { @class = "e-float-text e-label-top" })
            </div>
            <div class="e-float-input e-control-wrapper" style="padding-top:11px;">
                @Html.Password("password")
                <span class="e-float-line"></span>
                @Html.Label("password", "Contraseña", new { @class = "e-float-text e-label-top" })
            </div>
        </div>
        <div class="form-group col-md-6">
            <h4>Permisos</h4>
            <div class="e-float-input e-control-wrapper">
                @Html.EJS().MultiSelect("_items").DataSource((IEnumerable<object>)ViewBag.perms).Placeholder("" + "Insumos").Mode(VisualMode.CheckBox).ShowDropDownIcon(true).ShowSelectAll(true).Fields(new MultiSelectFieldSettings { Text = "Name", Value = "Id" }).Render()
            </div>

        </div>
    </div>
</div>

@Html.EJS().ScriptManager()

[Prince Oliver]

Hi Iván, 

Thank you for contacting us. 

Multiselect stores the selected value as array of strings. Hence to parse the multiselect’s data in the controller, you need to access it as string[] type.  

public class MyClass 

{ 

    public string[] Multiselect { get; set; } 

} 

If you still face any issues in your end, Kindly share us additional information on your scenario. This will help us provide a prompt solution. 

Regards, 

Prince 

[Iván]

This is my controller (I changed the name from _items to usersArray in the View):

I've tried to pass it as array, list, object, but it always appears as null, also when I try to see the values from JS it's null.

[Prince Oliver]

Hi Iván, 

Good day to you. 

You need to access the posted values from the response body. It is accessible only with the control’s name attribute. Make sure that the usersArray exists in the name attribute of the element. Kindly refer to the following code example. 

[view] 

@Html.EJS().MultiSelect("userArray").DataSource((IEnumerable<object>)ViewBag.perms).Placeholder("" + "Insumos").Mode(VisualMode.CheckBox).ShowDropDownIcon(true).ShowSelectAll(true).Fields(new MultiSelectFieldSettings { Text = "Name", Value = "Id" }).Render() 

[controller] 

public ActionResult Update([FromBody]MyClass model) 

{ 

    string[] items = model.usersArray; 

    return Json(model); 

} 

 

public class MyClass 

{ 

    public string[] usersArray { get; set; } 

} 

For further reference, please check the following documentation link: https://ej2.syncfusion.com/aspnetmvc/documentation/grid/edit/?no-cache=1#update-record 

Please let us know if you need any further assistance. 

Regards, 

Prince 

[Iván]

I'm sorry, but I can't make it work. I've trying buy always return a null value the multiselect control, I try in RemoveSaveAdaptor but nothing, changed to UrlAdaptor as the documentation but nothing else.

[View]

@section controlsSection{
@Html.EJS().Grid("Users").DataSource(dataManager =>
{
dataManager.Url("/Users/UrlDataSource").InsertUrl("/Users/Insert").RemoveUrl("/Users/Delete").UpdateUrl("/Users/Update").Adaptor("UrlAdaptor");

}).EditSettings(e =>
{
e.AllowAdding(true)
.AllowEditing(true)
.AllowDeleting(true)
.ShowDeleteConfirmDialog(true)
.ShowConfirmDialog(true)
.Mode(Syncfusion.EJ2.Grids.EditMode.Dialog)
.Template("#dialogtemplate");
}).AllowFiltering().AllowSorting().ActionComplete("actionComplete").Columns(col =>
{
col.Field("id").Visible(false).IsPrimaryKey(true).Add();
col.Field("name").HeaderText("Nombre").ValidationRules(new { required = true }).Add();
col.Field("email").HeaderText("Email").ValidationRules(new { required = true, email = true }).Add();
col.Field("password").HeaderText("Contraseña").ValidationRules(new { required = true }).Visible(false).Add();
col.Field("deleted").Visible(false).Add();

}).AllowPaging().PageSettings(page => page.PageCount(10).PageSizes(true)).FilterSettings(filter => { filter.Type(Syncfusion.EJ2.Grids.FilterType.Menu); }).Toolbar(new List
() { "Add", "Edit", "Delete", "Update", "Cancel", "Search" }).Render()


}

[DialogTemplate]

@Html.Label("", "Usuarios")
@Html.EJS().MultiSelect("usersArray").DataSource((IEnumerable<object>)ViewBag.perms).Mode(VisualMode.CheckBox).ShowDropDownIcon(true).ShowSelectAll(true).Fields(new MultiSelectFieldSettings { Text = "Name", Value = "Id" }).Render()
</object>

[Controller]

public ActionResult Insert(Users value, [FromBody]PermissionsModel model)
{
string[] element = model.usersArray;

value.deleted = false;
value.password = GeneratePassword(value.password);
db.Users.Add(value);
db.SaveChanges();

return Json(value);
}

[PermissionsModel ]

public class PermissionsModel
{
public string Id { get; set; }
public string Name { get; set; }
public string[] usersArray { get; set; }

public List PermsList()
{
List permissions = new List();
permissions.Add(new PermissionsModel() { Id = "0", Name = "Ver" });
permissions.Add(new PermissionsModel() { Id = "1", Name = "Crear" });
permissions.Add(new PermissionsModel() { Id = "2", Name = "Modificar" });
permissions.Add(new PermissionsModel() { Id = "3", Name = "Eliminar" });
return permissions;
}
}

[Pavithra Subramaniyam]

Hi Iván, 

From your last update, we found that you have used MultiSelect dropdown in Grid dialog template. So we suggest to convert the dropdown selected values to string before it will send to the controller for save action. You can use Grid actionBegin event to convert the array values to string. Please refer the below code snippet, 

ActionBegin: 

 

function actionBegin(args) { 

        if (args.requestType == "save") { 

            var editDialog = document.getElementsByClassName("e-edit-dialog ")[0]; 

            var value = editDialog.querySelector("#ShipCity").ej2_instances[0].value.join(','); // convert the array values to string 

            args.data.ShipCity = value; // Changed the default edited value with converted string value 

        } 

    } 

For your convenience, we have prepared the sample by using MultiSelect dropdown in Grid dialog template and you can find that sample from the below link, 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/EJ2Grid1590245588.zip 

Regards, 

Pavithra S.