Kendo MultiSelect not rendering in Kendo Grid popup - asp.net-mvc

Question

I am trying to use Kendo MultiSelect in a Kendo Grid with ASP.NET MVC.
I don't specifically need the column with the MultiSelect to be visible in the grid, but I need to be able to edit it in popup view.
When the grid loads, the column with the MultiSelect has the value of [object Object] and when I click on edit to open the popup, the MultiSelect doesn't show in the popup at all.
When I change the edit mode of the grid to inline or incell and press edit, the MultiSelect appears in column with the correct preselected values for each object from the database as well as the correct bounded list of values from ViewData.
I can't figure out what I am doing wrong.
Here is my code:
The ViewModels:
public class QMKeyVM
{
[HiddenInput(DisplayValue = false)]
public int Id { get; set; }
[StringLength(100)]
public string Code { get; set; }
[StringLength(255)]
public string Title { get; set; }
[UIHint("Enum")]
public ScopeType Scope { get; set; }
[UIHint("InstituteTypes_MultiSelect")]
public List<InstituteTypeVM> InstituteTypes { get; set; }
}
public class InstituteTypeVM
{
public int Id { get; set; }
public string Name { get; set; }
}
The editor template file InstituteTypes_MultiSelect.cshtml for MultiSelect:
#(Html.Kendo().MultiSelect()
.Name("InstituteTypes")
.DataValueField("Id")
.DataTextField("Name")
.Filter("contains")
.HtmlAttributes(new { style = "width:250px;height:50px" })
.BindTo((IEnumerable<InstituteTypeVM>)ViewData["InstituteTypes"])
.HtmlAttributes(new { data_value_primitive = false })
)
The grid in the View:
#(Html.Kendo().Grid<QMKeyVM>()
.Name("QMKeysGrid")
.Columns(columns =>
{
columns.Bound(p => p.Id).Hidden();
columns.Bound(p => p.Code);
columns.Bound(p => p.Title);
columns.Bound(p => p.Scope).EditorTemplateName("Enum");
columns.Bound(p => p.InstituteTypes).EditorTemplateName("InstituteTypes_MultiSelect");
})
.Pageable(p =>
{
p.Messages(m => m.Page("Page").Empty("No entries").ItemsPerPage("per page").Display("{0} to {1} from {2}"));
p.Refresh(true);
p.Input(true);
p.PageSizes(new int[] { 20, 50, 100, 200 });
})
.ClientDetailTemplateId("qmkeydetailtemplate")
.Sortable().Groupable(g => g.Messages(m => m.Empty("Grouping")))
.Scrollable(s => s.Height("auto"))
.Resizable(resize => resize.Columns(true))
.ToolBar(tools => tools.Excel())
.Excel(excel => excel
FileName("qmkeys.xlsx")
.Filterable(true)
.ProxyURL(Url.Action("Excel_Export_Save", "Grid"))
)
.Filterable(filterable => filterable
.Extra(false)
.Operators(operators => operators
.ForString(str => str.Clear()
.Contains("Contains")
)
.ForDate(dr => dr.Clear().IsEqualTo("ForDate"))
).Messages(m => m.Filter("Apply Filter").Clear("Clear Filter").Info("")))
.ToolBar(toolbar =>
{
toolbar.Create().Text("Add QMKey");
toolbar.Custom().Text("Add Section").HtmlAttributes(new { id = "addSectionsBtn" });
toolbar.Custom().Text("Add Subsection").HtmlAttributes(new { id = "addSectionGroupsBtn" });
})
.Editable(editable => editable.Mode(GridEditMode.PopUp)
.Window(w => w.Title("Edit").Resizable().Draggable(true).Width(700))
.DisplayDeleteConfirmation("Confirm Delete"))
.Events(e => e.Edit("onEdit"))
.DataSource(dataSource => dataSource
.Ajax().ServerOperation(false)
.PageSize(200)
.Read(read => read.Action("QMKeysRead", "QMKeys"))
.Create(create => create.Action("QMKeyCreate", "QMKeys"))
.Update(update => update.Action("QMKeyUpdate", "QMKeys"))
.Destroy(destroy => destroy.Action("QMKeyDelete", "QMKeys"))
.Events(events => events.Error("GridOnError").RequestEnd("QMKeysGrid_OnRequestEnd"))
.Model(model =>
{
model.Id(p => p.Id);
})
).AutoBind(true).Deferred())
Thanks a lot.

Answer 1

Try to put Datasource property to fetch Data From Database
Below code will help you:
#(Html.Kendo().MultiSelect()
.Name("multiselect")
.DataTextField("ProductName")
.DataValueField("ProductID")
.Value(new[] { 2, 7 })
.DataSource(source =>
{
source.Read(read =>
{
read.Action("Products_Read", "Home");
})
.ServerFiltering(true);
})
)