We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to handle data in dropdown with multiselect checkboxes?

Thread ID:

Created:

Updated:

Platform:

Replies:

145625 Jul 1,2019 04:48 PM UTC Jul 4,2019 12:30 PM UTC ASP.NET MVC - EJ 2 5
loading
Tags: Grid
Iván
Asked On July 1, 2019 04:48 PM UTC

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 [Syncfusion]
Replied On July 2, 2019 01:32 PM UTC

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
Replied On July 2, 2019 05:28 PM UTC

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 [Syncfusion]
Replied On July 3, 2019 11:55 AM UTC

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
Replied On July 3, 2019 04:33 PM UTC

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 [Syncfusion]
Replied On July 4, 2019 12:30 PM UTC

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, 


Regards, 
Pavithra S. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon