[Solved] MultiSelect not assigning the values.

[Justina]

Hi, 

I have been trying to implement the multiSelect with no avail. 

I have been trying to implement the multiselect and although in the pop up is working, meaning I am able to see the possible values as well as I am able to select the values, when I press save. The model that is used to create the whole object contains null instead of the selected values.

When I check in the WebApp the payload the MultiSelect looks like this:

ActivitiesUuids[0].Disabled: false

ActivitiesUuids[0].Group:

ActivitiesUuids[0].Selected: false

ActivitiesUuids[0].Text: name of the activity (I have changed the name for security)

ActivitiesUuids[0].Value: xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx (I have changed the Guid number into x, the value is actually a proper Guid)

 

My Models:

    public class CourseContentViewModel
    {public List<Guid>? RelatedCourseContensUuids { get; set; }  //contains a list of values that has been/should be chosen from the multiselec}

    public class CombinedCourseContentViewModel
    {public SelectList RelatedCourseContens { get; set; }  //contains a list of the values that multiSelect has to choose from}

 

Controller:

This is inside the Index and List methods.

           ICollection<CourseContentResponseDTO> responseDTOs = await _akdService.CourseContentsAllAsync();

           combinedCourseContentViewModel.RelatedCourseContentViewModel = new SelectList(responseDTOs, "Uuid", "Name");

 

Grid implementation:

@(Html.Kendo().Grid<WebApp.Models.CourseContentViewModel>().Name("grid")
    .Columns(columns =>
    {
        columns.Bound(n => n.Name).Filterable(false).Title("Username").Width(250);
        columns.Command(command => { command.Edit().Text("Edit"); command.Destroy().Text("Delete"); }).Width(200);
    })
    .ToolBar(toolBar =>
    {
        toolBar.Create().Text("Create");
    })
    .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("CourseContentCreateUpdate"))
    .Pageable()
    .Sortable()
    .Scrollable()
    .Filterable()
    .DataSource(dataSource => dataSource
    .Ajax()
    .PageSize(30)
    .Model(model =>
    {
        model.Id(p => p.Uuid);
    })
    .Read(read => read.Action("List", "CourseContent"))
    .Update("Update", "CourseContent")
    .Create(create => create.Action("Create", "CourseContent"))
    .Destroy(destroy => destroy.Action("Delete", "CourseContent"))
    )
    )

This is my pop-up template multiselect (other components likes comboBoxes are working fine):

            <label class="Headings">Related Course Content</label>
            <kendo-multiselect for="RelatedCourseContensUuids"
                               name="RelatedCourseContensUuids"
                               datatextfield="Text"
                               datavaluefield="Value"
                               placeholder="No items selected..."
                               bind-to="combinedCourseContentViewModel.RelatedCourseContentViewModel">
            </kendo-multiselect>

My implementation of comboBoxes is almost the same except difference in naming of the tag helpers.

Hope you can help! 

Juste

[Ivaylo]

Hello Justina,

Thank you for the code snippets and the details provided.

After observation of your code, I prepared a sample app where I managed to make the MultiSelect to send the values to the create action. 

The app is attached to this reply. You can try to reproduce it. Let me know if this is the desired behavior. If the issue persists, please provide more information and we will do our best to assist you.

I hope this information was helpful.

Regards,
Ivaylo
Progress Telerik