Multiselect editor template

[Nikolay]

Hello,
I want to ask if it is supported in Kendo for ASP.NET Core, multi-select as EditorTemplate for a column in grid?

I've try it but it doesn't work like in MVC 5.

[Alex Hajigeorgieva]

Hello, Nikolay,

The Kendo UI Grid for ASP.NET Core works well with a Kendo UI MultiSelect as an editor.

I have prepared a sample project for your reference. I will also update our ASP.NET Core examples repository which we have recently created for such examples:

https://github.com/telerik/aspnet-core-examples

Should you need further assistance, please share the current implementation that you are working on the model, controllers, view and editor view so I can assist you with specific suggestions.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

[Luke]

Hello Alex, I am trying this same implementation. I referenced your link and this one: 

https://github.com/telerik/ui-for-aspnet-mvc-examples/tree/master/grid/multiselect-in-grid

My Multiselect editor template is not showing in my grid popup. One key difference from the examples is that I do not want to show my list in the grid. I just want the user to be able to select the required types for creating and editing a grid item. In my particular scenario a user is adding a document type and they need to be able to select the types of cases this document type will be required for. Below is my implementation.

        // GET: DocumentTypes
        public IActionResult Index()
        {
            List<TypeOfDeathForDocTypeModel> typeOfDeathRequirements = _typeOfDeathService.GetTypesOfDeathForDocType().ToList();
            ViewData["RequiredDeaths"] = typeOfDeathRequirements;
            return View();
        }

    @(
     Html.Kendo().Grid<DocumentTypeVM>()
        .Name("DocumentTypes")
        .Columns(columns => {
            columns.Bound(c => c.Description);
            columns.Bound(c => c.IsActive).ClientTemplateId("IsActiveTemplate");
            columns.Command(c => c.Edit());
        })
        .ToolBar(toolbar => toolbar.Create())
        .NoRecords()
        .Sortable(sortable => sortable
            .AllowUnsort(true)
            .SortMode(GridSortMode.MultipleColumn)
            .ShowIndexes(true)
        )
        .Filterable(filters => filters
            .Operators(options =>
            {
                options.ForString(strFilters => strFilters.Clear().Contains("Contains"));
            })
            .Extra(false)
        )
        .Search(search => search.Field(f => f.Description))
        .DataSource(datasource => datasource
            .Ajax()
            .Model(model => {
                model.Id(m => m.Id);
                model.Field(m => m.Description);
                model.Field(m => m.IsActive).DefaultValue(true);
                model.Field(m => m.DeathRequirements).DefaultValue(new List<TypeOfDeathForDocTypeModel>());
            })
            .Sort(m => { m.Add(f => f.IsActive).Descending(); m.Add(f => f.Description); })
            .Create(c => c.Action("Create", "DocumentTypes"))
            .Read(c => c.Action("Read", "DocumentTypes"))
            .Update(c => c.Action("Update", "DocumentTypes"))
        )
        .Editable(editable => editable.Mode(GridEditMode.PopUp))
        .Events(events =>
        {
            events.FilterMenuOpen("AdjustIsActiveFilters");
            events.Edit("OnEdit");
        })
    )

The model for the grid:

    public class DocumentTypeVM
    {
        public int Id { get; set; }

        [Required]
        [StringLength(50)]
        public string Description { get; set; }
        public bool IsActive { get; set; }

        [UIHint("DeathRequirements")]
        public List<TypeOfDeathModels.TypeOfDeathForDocTypeModel> DeathRequirements { get; set; }
    }

    public class TypeOfDeathForDocTypeModel
    {
        public int Id { get; set; }
        public string TypeOfDeathName { get; set; }
        public bool Required { get; set; } = false;
    }

Editor Template "DeathRequirements.cshtml"

@model List<CCM_Application.Models.TypeOfDeathModels.TypeOfDeathForDocTypeModel>

<label>Required For</label>
@(
    Html.Kendo().MultiSelectFor(m => m)
        .Name("DeathRequirements")
        .Placeholder("Select types of death...")
        .DataTextField("TypeOfDeathName")
        .DataValueField("Required")
        .BindTo((IEnumerable<CCM_Application.Models.TypeOfDeathModels.TypeOfDeathForDocTypeModel>)ViewData["RequiredDeaths"])
)

Any help will be appreciated. Please let me know if there are any more details you need from me.

[Aleksandar]

Hi Luke,

From the provided information it is not clear what the actual issue is. Can you elaborate? Are there any errors logged? That said I see in the editor template the DataValueField is set to a boolean model Property. I can suggest using the Id property as a value field. 

[Luke]

The grid popup editor doesn't show my editor template for the List<TypeOfDeathForDocTypeModel> and there are no errors in the console. It seems as though the grid is not recognizing that my List is an editable field even with the UIHint. I tried changing the DataValueField of the MultiSelect component to Id but that didn't have any effect. Is it required to implement a custom popup editor for the grid to use a MultiSelect for a particular field? If so, what would that look like?

[Aleksandar]

Luke, in order to achieve the desired when using a Popp editing define a custom EditorTemplate and use the EditorFor to add the MultiSelect as editor:

.Editable(e => e.Mode(GridEditMode.PopUp).TemplateName("CustomEditor"))

Add the CustomEditor.cshtml in the ~/Views/Shared/EditorTemplates folder and use the CustomEditor you have defined using the UIHint:

@model Telerik.Examples.Mvc.Models.MyModel

@Html.EditorFor(m=>m.MyCollection)