ASP.NET Core Datagrid Dialog Template Multiselect check boxes

[Chris]

Hi, 

I am trying to pre-select checkboxes in a dropdown list in an edit dialog box.  I can't figure out how to check the boxes by sending data to it.  In this example I want White and Purple to be selected. Thanks for your help!  Here is my code:

DialogEditPartial:

<div>

    <div class="form-row">

        <div class="form-group col-md-6">

            <div class="e-float-input e-control-wrapper">

                <input asp-for="UserId" value=@Model.UserId.ToString() disabled type='text' />

                <span class="e-float-line"></span>

                <label asp-for="UserId" class="e-float-text e-label-top" >Order ID</label>

            </div>

        </div>

    </div>

    <div class="form-row">

        <div class="form-group col-md-6">

            <ejs-numerictextbox id="FirstName" value=@Model.Firstname format="C2" placeholder="Freight" floatLabelType="Always" ></ejs-numerictextbox>

        </div>

        <div class="form-group col-md-6">

            <ejs-datepicker id="LastName" value=@Model.Lastname placeholder="Order Date" floatLabelType="Always"></ejs-datepicker>

        </div>

    </div>

    <div class="form-row">

        <div class="form-group col-md-6">

            <ejs-multiselect id="Memberof" value="@ViewBag.groupchecked" dataSource="@ViewBag.groups" placeholder="Groups"  floatLabelType="Always" popupHeight="300px" mode="CheckBox" >

                <e-multiselect-fields text="Group" value="GroupVals" ></e-multiselect-fields>

            </ejs-multiselect>

        </div>

    </div>

    <div class="form-row">

        <div class="form-group col-md-12">

            <div class="e-float-input e-control-wrapper">

                <textarea asp-for="Location">@Model.Location</textarea>

                <span class="e-float-line"></span>

                <label asp-for="Location" class="e-float-text e-label-top">Ship Address</label>

            </div>

        </div>

    </div>

</div>

<ejs-scripts></ejs-scripts>

Controller:

public IActionResult EditPartial([FromBody] CRUDModel<HomeModel> value)

        {

            var data = Users.GetUsers(ViewBag.typedata, ViewBag.locationdata, ViewBag.gradedata);

            ViewBag.datasource = data;

            List<GroupList> Groups = new List<GroupList>();

            

            ViewBag.groups = new UserGroups().GetUserGroups();

            ViewBag.groupchecked = new string[] { "White", "Purple" };

            return PartialView("_DialogEditPartial", value.Value);

        }

Model:

namespace UserManagement.Models

{

    public class UserGroups

    {

        public string Group { get; set; }

        public string GroupDN { get; set; }

        public bool isSelected { get; set; }

        public List<UserGroups> GetUserGroups()

        {

            List<UserGroups> groups = new List<UserGroups>();

            groups.Add(new UserGroups { Group = "Red", GroupVals = "0" });

            groups.Add(new UserGroups { Group = "Blue", GroupVals = "1" });

            groups.Add(new UserGroups { Group = "Green", GroupVals = "2" });

            groups.Add(new UserGroups { Group = "Pink", GroupVals = "3" });

            groups.Add(new UserGroups { Group = "Black", GroupVals = "4" });

            groups.Add(new UserGroups { Group = "White", GroupVals = "5" });

            groups.Add(new UserGroups { Group = "Purple", GroupVals = "6" });

            groups.Add(new UserGroups { Group = "Green", GroupVals = "7" });

            groups.Add(new UserGroups { Group = "Yellow", GroupVals = "8" });

            return groups;

        }

    }

}

[Thavasianand Sankaranarayanan]

Hi Chris, 

Thanks for contacting Syncfusion support.  

We have validated your query “ pre-select the checkboxes in a dropdown list in an edit dialog box” at our end. 

By Default, Multiselect dropdown should map to its field and value has same like below code block . 

Here , In Multiselect filed value as mapped to GroupVals, So you have to assign corresponding Groupvals (like 5 and 6 ) to multiselect value field. 

 

<div> 

    . . . .  

    <ejs-multiselect id="Memberof" value="@ViewBag.groupchecked" dataSource="@ViewBag.groups" . . . > 

    <e-multiselect-fields text="Group" value="GroupVals"></e-multiselect-fields> 

    </ejs-multiselect> 

</div> 

[Controller.cs] 

 

     ViewBag.groupchecked = new string[] { "White", "Purple" };  

     

     Your requirement you have to assign value instead of above like below 

 

     ViewBag.groupchecked = new string[] { "5", "6" }; 

 

[Model.cs] 

 

     . . . . . 

     groups.Add(new UserGroups { Group = "White", GroupVals = "5" }); 

     groups.Add(new UserGroups { Group = "Purple", GroupVals = "6" }); 

     . . . . . .  

     return groups; 

     

Please check the above code and get back to us, if you require any further assistance on this. 

 

Regards, 

Thavasianand S.